WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
[patch]
Patch
bug-201123-20190828152317.patch (text/plain), 103.49 KB, created by
Said Abou-Hallawa
on 2019-08-28 15:23:18 PDT
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Said Abou-Hallawa
Created:
2019-08-28 15:23:18 PDT
Size:
103.49 KB
patch
obsolete
>Subversion Revision: 249217 >diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog >index 835721d3039bc5aca339d1e9928b7488d82d768f..c2bf2540d2f45f43b977ccf8fa1491529878a7a0 100644 >--- a/Source/WebCore/ChangeLog >+++ b/Source/WebCore/ChangeLog >@@ -1,3 +1,83 @@ >+2019-08-28 Said Abou-Hallawa <sabouhallawa@apple.com> >+ >+ EXIF orientation should be respected when rendering images >+ https://bugs.webkit.org/show_bug.cgi?id=201123 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ -- Image::size() will return the rendered size based on the image >+ orientation. If image orientation is FromImage, ImageSource will query >+ the actual image orientation from the ImageDecoder. The low level APIs >+ might transpose the size just before calling the system API to draw >+ the image. >+ >+ -- RenderElement::imageOrientation() will return ImageOrientation::FromImage >+ for all images and for all ports till the CSS image-orientation specs >+ is finalized. >+ >+ -- The default of ImagePaintingOptions argument of GraphicsContext::drawImage() >+ will be changed to { ImageOrientation::FromImage }. >+ >+ -- Image element: RenderImage::paintIntoRect() will pass imageOrientation() >+ which returns ImageOrientation::FromImage to GraphicsContext::drawImage(). >+ >+ -- CSS background image: RenderBoxModelObject::paintFillLayerExtended will >+ pass ImageOrientation::FromImage by default to GraphicsContext::drawTiledImage(). >+ >+ -- Images on canvas: CanvasRenderingContext2DBase::drawImage() will pass >+ ImageOrientation::FromImage by default to GraphicsContext::drawImage(). >+ >+ -- SVG images: RenderSVGImage::paintForeground() calls GraphicsContext::drawImage() >+ with the default ImagePaintingOptions which is now { ImageOrientation::FromImage }. >+ >+ -- SVG feImage filters: FEImage::platformApplySoftware() calls >+ GraphicsContext::drawImage() with the default ImagePaintingOptions >+ which is now { ImageOrientation::FromImage }. >+ >+ -- ImageDocument: RenderElement::imageOrientation() returns FromImage >+ always and for all ports. >+ >+ Tests: fast/images/image-orientation-background.html >+ fast/images/image-orientation-canvas.html >+ fast/images/image-orientation-content.html >+ fast/images/image-orientation-document.html >+ fast/images/image-orientation-image-object.html >+ fast/images/image-orientation-img-element-object-fit.html >+ fast/images/image-orientation-img-element.html >+ fast/images/image-orientation-svg-feimage.html >+ fast/images/image-orientation-svg-image.html >+ >+ * html/canvas/CanvasRenderingContext2DBase.cpp: >+ (WebCore::CanvasRenderingContext2DBase::drawImage): >+ * loader/cache/CachedImage.cpp: >+ (WebCore::CachedImage::imageSizeForRenderer const): >+ * platform/graphics/BitmapImage.h: >+ * platform/graphics/CrossfadeGeneratedImage.h: >+ * platform/graphics/GeneratedImage.h: >+ * platform/graphics/GraphicsContext.h: >+ * platform/graphics/Image.h: >+ * platform/graphics/ImageFrame.h: >+ (WebCore::ImageFrame::sizeRespectingOrientation const): Deleted. >+ * platform/graphics/ImageSource.cpp: >+ (WebCore::ImageSource::size): >+ (WebCore::ImageSource::sizeRespectingOrientation): Deleted. >+ * platform/graphics/ImageSource.h: >+ * platform/graphics/cg/PDFDocumentImage.cpp: >+ (WebCore::PDFDocumentImage::size const): >+ * platform/graphics/cg/PDFDocumentImage.h: >+ * platform/mac/DragImageMac.mm: >+ (WebCore::createDragImageFromImage): >+ * rendering/RenderBoxModelObject.cpp: >+ (WebCore::RenderBoxModelObject::paintFillLayerExtended): >+ * rendering/RenderElement.cpp: >+ (WebCore::RenderElement::imageOrientation const): >+ * rendering/RenderImage.cpp: >+ (WebCore::RenderImage::paintIntoRect): >+ * svg/graphics/SVGImage.h: >+ * svg/graphics/SVGImageForContainer.cpp: >+ (WebCore::SVGImageForContainer::size const): >+ * svg/graphics/SVGImageForContainer.h: >+ > 2019-08-28 Said Abou-Hallawa <sabouhallawa@apple.com> > > All image drawing functions should take an argument of type ImagePaintingOptions >diff --git a/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.cpp b/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.cpp >index 065d7e262d4c02ede5b0cc1304822d1f955a5880..397534a67e2f09379813e946d645bf3620332d61 100644 >--- a/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.cpp >+++ b/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.cpp >@@ -1578,18 +1578,20 @@ ExceptionOr<void> CanvasRenderingContext2DBase::drawImage(Document& document, Ca > downcast<BitmapImage>(*image).updateFromSettings(document.settings()); > } > >+ ImagePaintingOptions options = { op, blendMode, ImageOrientation::FromImage }; >+ > if (rectContainsCanvas(normalizedDstRect)) { >- c->drawImage(*image, normalizedDstRect, normalizedSrcRect, { op, blendMode }); >+ c->drawImage(*image, normalizedDstRect, normalizedSrcRect, options); > didDrawEntireCanvas(); > } else if (isFullCanvasCompositeMode(op)) { > fullCanvasCompositedDrawImage(*image, normalizedDstRect, normalizedSrcRect, op); > didDrawEntireCanvas(); > } else if (op == CompositeCopy) { > clearCanvas(); >- c->drawImage(*image, normalizedDstRect, normalizedSrcRect, { op, blendMode }); >+ c->drawImage(*image, normalizedDstRect, normalizedSrcRect, options); > didDrawEntireCanvas(); > } else { >- c->drawImage(*image, normalizedDstRect, normalizedSrcRect, { op, blendMode }); >+ c->drawImage(*image, normalizedDstRect, normalizedSrcRect, options); > didDraw(normalizedDstRect); > } > >diff --git a/Source/WebCore/loader/cache/CachedImage.cpp b/Source/WebCore/loader/cache/CachedImage.cpp >index ef93b351e791d527dae80f87c525a7dc14e7e420..cefbe32b56a6deca5c911348eab10b1066c9edf5 100644 >--- a/Source/WebCore/loader/cache/CachedImage.cpp >+++ b/Source/WebCore/loader/cache/CachedImage.cpp >@@ -280,13 +280,10 @@ FloatSize CachedImage::imageSizeForRenderer(const RenderElement* renderer, SizeT > if (!m_image) > return { }; > >- if (is<BitmapImage>(*m_image) && renderer && renderer->imageOrientation() == ImageOrientation::FromImage) >- return downcast<BitmapImage>(*m_image).sizeRespectingOrientation(); >- > if (is<SVGImage>(*m_image) && sizeType == UsedSize) > return m_svgImageCache->imageSizeForRenderer(renderer); > >- return m_image->size(); >+ return m_image->size(renderer ? renderer->imageOrientation() : ImageOrientation(ImageOrientation::FromImage)); > } > > LayoutSize CachedImage::imageSizeForRenderer(const RenderElement* renderer, float multiplier, SizeType sizeType) const >diff --git a/Source/WebCore/platform/graphics/BitmapImage.h b/Source/WebCore/platform/graphics/BitmapImage.h >index 3202fbe304ecfea6ffc8feb5276b60c2b858e39b..2ad7f1c5ce07d51335480314bbc74377801cdc43 100644 >--- a/Source/WebCore/platform/graphics/BitmapImage.h >+++ b/Source/WebCore/platform/graphics/BitmapImage.h >@@ -81,8 +81,7 @@ public: > Optional<IntPoint> hotSpot() const override { return m_source->hotSpot(); } > > // FloatSize due to override. >- FloatSize size() const override { return m_source->size(); } >- IntSize sizeRespectingOrientation() const { return m_source->sizeRespectingOrientation(); } >+ FloatSize size(ImageOrientation orientation = ImageOrientation::FromImage) const override { return m_source->size(orientation); } > Color singlePixelSolidColor() const override { return m_source->singlePixelSolidColor(); } > bool frameIsBeingDecodedAndIsCompatibleWithOptionsAtIndex(size_t index, const DecodingOptions& decodingOptions) const { return m_source->frameIsBeingDecodedAndIsCompatibleWithOptionsAtIndex(index, decodingOptions); } > DecodingStatus frameDecodingStatusAtIndex(size_t index) const { return m_source->frameDecodingStatusAtIndex(index); } >diff --git a/Source/WebCore/platform/graphics/CrossfadeGeneratedImage.h b/Source/WebCore/platform/graphics/CrossfadeGeneratedImage.h >index 1dd7ea9ec3fa5eb289af0b0ba729006cb8b7e5c8..45765c8314521e48acb0f9db39ea03d4ea6ec3b1 100644 >--- a/Source/WebCore/platform/graphics/CrossfadeGeneratedImage.h >+++ b/Source/WebCore/platform/graphics/CrossfadeGeneratedImage.h >@@ -44,7 +44,7 @@ public: > bool hasRelativeWidth() const override { return false; } > bool hasRelativeHeight() const override { return false; } > >- FloatSize size() const override { return m_crossfadeSize; } >+ FloatSize size(ImageOrientation = ImageOrientation::FromImage) const override { return m_crossfadeSize; } > > protected: > ImageDrawResult draw(GraphicsContext&, const FloatRect& dstRect, const FloatRect& srcRect, const ImagePaintingOptions& = { }) override; >diff --git a/Source/WebCore/platform/graphics/GeneratedImage.h b/Source/WebCore/platform/graphics/GeneratedImage.h >index 108688b975657da47b174ff573499d1a2e8e4a63..3e01614c14dedfc455923fa6d24b111ab144c3a5 100644 >--- a/Source/WebCore/platform/graphics/GeneratedImage.h >+++ b/Source/WebCore/platform/graphics/GeneratedImage.h >@@ -40,7 +40,7 @@ public: > bool hasRelativeHeight() const override { return true; } > void computeIntrinsicDimensions(Length& intrinsicWidth, Length& intrinsicHeight, FloatSize& intrinsicRatio) override; > >- FloatSize size() const override { return m_size; } >+ FloatSize size(ImageOrientation = ImageOrientation::FromImage) const override { return m_size; } > > // Assume that generated content has no decoded data we need to worry about > void destroyDecodedData(bool /*destroyAll*/ = true) override { } >diff --git a/Source/WebCore/platform/graphics/GraphicsContext.h b/Source/WebCore/platform/graphics/GraphicsContext.h >index 7ce1cbb0a3810afc3dbe25b4f2df49368893e41c..13f5a2f55db67fb362dd0ce8de6a1f119b7c1fb7 100644 >--- a/Source/WebCore/platform/graphics/GraphicsContext.h >+++ b/Source/WebCore/platform/graphics/GraphicsContext.h >@@ -359,9 +359,9 @@ public: > > WEBCORE_EXPORT void strokeRect(const FloatRect&, float lineWidth); > >- WEBCORE_EXPORT ImageDrawResult drawImage(Image&, const FloatPoint& destination, const ImagePaintingOptions& = { }); >- WEBCORE_EXPORT ImageDrawResult drawImage(Image&, const FloatRect& destination, const ImagePaintingOptions& = { }); >- ImageDrawResult drawImage(Image&, const FloatRect& destination, const FloatRect& source, const ImagePaintingOptions& = { }); >+ WEBCORE_EXPORT ImageDrawResult drawImage(Image&, const FloatPoint& destination, const ImagePaintingOptions& = { ImageOrientation::FromImage }); >+ WEBCORE_EXPORT ImageDrawResult drawImage(Image&, const FloatRect& destination, const ImagePaintingOptions& = { ImageOrientation::FromImage }); >+ ImageDrawResult drawImage(Image&, const FloatRect& destination, const FloatRect& source, const ImagePaintingOptions& = { ImageOrientation::FromImage }); > > ImageDrawResult drawTiledImage(Image&, const FloatRect& destination, const FloatPoint& source, const FloatSize& tileSize, const FloatSize& spacing, const ImagePaintingOptions& = { }); > ImageDrawResult drawTiledImage(Image&, const FloatRect& destination, const FloatRect& source, const FloatSize& tileScaleFactor, Image::TileRule, Image::TileRule, const ImagePaintingOptions& = { }); >diff --git a/Source/WebCore/platform/graphics/Image.h b/Source/WebCore/platform/graphics/Image.h >index d55067732f7f39a3909988ab4aee2b57aa95ef0f..3722c226e00eb50ffe4ee6dd8721e5a3b21f49c0 100644 >--- a/Source/WebCore/platform/graphics/Image.h >+++ b/Source/WebCore/platform/graphics/Image.h >@@ -111,7 +111,7 @@ public: > virtual bool hasRelativeHeight() const { return false; } > virtual void computeIntrinsicDimensions(Length& intrinsicWidth, Length& intrinsicHeight, FloatSize& intrinsicRatio); > >- virtual FloatSize size() const = 0; >+ virtual FloatSize size(ImageOrientation = ImageOrientation::FromImage) const = 0; > FloatRect rect() const { return FloatRect(FloatPoint(), size()); } > float width() const { return size().width(); } > float height() const { return size().height(); } >diff --git a/Source/WebCore/platform/graphics/ImageFrame.h b/Source/WebCore/platform/graphics/ImageFrame.h >index 2dfefaeb5d19336ded21258ee1fff6386f58b92d..2cc6b02a7d3501571cf209364b36ed25c1d83969 100644 >--- a/Source/WebCore/platform/graphics/ImageFrame.h >+++ b/Source/WebCore/platform/graphics/ImageFrame.h >@@ -61,7 +61,6 @@ public: > bool isComplete() const { return m_decodingStatus == DecodingStatus::Complete; } > > IntSize size() const; >- IntSize sizeRespectingOrientation() const { return !m_orientation.usesWidthAsHeight() ? size() : size().transposedSize(); } > unsigned frameBytes() const { return hasNativeImage() ? (size().area() * sizeof(uint32_t)).unsafeGet() : 0; } > SubsamplingLevel subsamplingLevel() const { return m_subsamplingLevel; } > >diff --git a/Source/WebCore/platform/graphics/ImageSource.cpp b/Source/WebCore/platform/graphics/ImageSource.cpp >index 18976f919eb81da39567f26a18bae7a9af1d3243..f398d77cdeae50ea2991020f475414f657a0ecda 100644 >--- a/Source/WebCore/platform/graphics/ImageSource.cpp >+++ b/Source/WebCore/platform/graphics/ImageSource.cpp >@@ -63,10 +63,8 @@ ImageSource::ImageSource(NativeImagePtr&& nativeImage) > > m_decodedSize = m_frames[0].frameBytes(); > >- // The assumption is the memory image will be displayed with the default >- // orientation. So set m_sizeRespectingOrientation to be the same as m_size. > m_size = m_frames[0].size(); >- m_sizeRespectingOrientation = m_size; >+ m_orientation = ImageOrientation(ImageOrientation::None); > } > > ImageSource::~ImageSource() >@@ -559,20 +557,27 @@ Optional<IntPoint> ImageSource::hotSpot() > return metadata<Optional<IntPoint>, (&ImageDecoder::hotSpot)>(WTF::nullopt, &m_hotSpot); > } > >-IntSize ImageSource::size() >+ImageOrientation ImageSource::orientation() > { >+ return frameMetadataAtIndexCacheIfNeeded<ImageOrientation>(0, (&ImageFrame::orientation), &m_orientation, ImageFrame::Caching::Metadata); >+} >+ >+IntSize ImageSource::size(ImageOrientation orientation) >+{ >+ IntSize size; > #if !USE(CG) > // It's possible that we have decoded the metadata, but not frame contents yet. In that case ImageDecoder claims to > // have the size available, but the frame cache is empty. Return the decoder size without caching in such case. > if (m_frames.isEmpty() && isDecoderAvailable()) >- return m_decoder->size(); >+ size = m_decoder->size(); >+ else > #endif >- return frameMetadataAtIndexCacheIfNeeded<IntSize>(0, (&ImageFrame::size), &m_size, ImageFrame::Caching::Metadata, SubsamplingLevel::Default); >-} >+ size = frameMetadataAtIndexCacheIfNeeded<IntSize>(0, (&ImageFrame::size), &m_size, ImageFrame::Caching::Metadata, SubsamplingLevel::Default); >+ >+ if (orientation == ImageOrientation::FromImage) >+ orientation = this->orientation(); > >-IntSize ImageSource::sizeRespectingOrientation() >-{ >- return frameMetadataAtIndexCacheIfNeeded<IntSize>(0, (&ImageFrame::sizeRespectingOrientation), &m_sizeRespectingOrientation, ImageFrame::Caching::Metadata, SubsamplingLevel::Default); >+ return orientation.usesWidthAsHeight() ? size.transposedSize() : size; > } > > Color ImageSource::singlePixelSolidColor() >diff --git a/Source/WebCore/platform/graphics/ImageSource.h b/Source/WebCore/platform/graphics/ImageSource.h >index bc790993278bcb42503865fb512ab6f2e988e83d..f4e81854d9790c08e1487088919989436c322daa 100644 >--- a/Source/WebCore/platform/graphics/ImageSource.h >+++ b/Source/WebCore/platform/graphics/ImageSource.h >@@ -93,9 +93,10 @@ public: > String uti(); > String filenameExtension(); > Optional<IntPoint> hotSpot(); >+ ImageOrientation orientation(); > > // Image metadata which is calculated from the first ImageFrame. >- WEBCORE_EXPORT IntSize size(); >+ WEBCORE_EXPORT IntSize size(ImageOrientation = ImageOrientation::FromImage); > IntSize sizeRespectingOrientation(); > Color singlePixelSolidColor(); > SubsamplingLevel maximumSubsamplingLevel(); >@@ -196,7 +197,7 @@ private: > > // Image metadata which is calculated from the first ImageFrame. > Optional<IntSize> m_size; >- Optional<IntSize> m_sizeRespectingOrientation; >+ Optional<ImageOrientation> m_orientation; > Optional<Color> m_singlePixelSolidColor; > Optional<SubsamplingLevel> m_maximumSubsamplingLevel; > }; >diff --git a/Source/WebCore/platform/graphics/cg/PDFDocumentImage.cpp b/Source/WebCore/platform/graphics/cg/PDFDocumentImage.cpp >index a60f125a01103736ba7517e363aa4a98d62109d6..80f6b1872522968ea7d9576b7e0056333258823c 100644 >--- a/Source/WebCore/platform/graphics/cg/PDFDocumentImage.cpp >+++ b/Source/WebCore/platform/graphics/cg/PDFDocumentImage.cpp >@@ -66,7 +66,7 @@ String PDFDocumentImage::filenameExtension() const > return "pdf"; > } > >-FloatSize PDFDocumentImage::size() const >+FloatSize PDFDocumentImage::size(ImageOrientation) const > { > FloatSize expandedCropBoxSize = FloatSize(expandedIntSize(m_cropBox.size())); > >diff --git a/Source/WebCore/platform/graphics/cg/PDFDocumentImage.h b/Source/WebCore/platform/graphics/cg/PDFDocumentImage.h >index 27d9e7800798e3e2d1dda12edfd5d3601bfa3957..17c0afc181f02c77835fe54afb4fa28701d86836 100644 >--- a/Source/WebCore/platform/graphics/cg/PDFDocumentImage.h >+++ b/Source/WebCore/platform/graphics/cg/PDFDocumentImage.h >@@ -76,7 +76,7 @@ private: > void destroyDecodedData(bool /*destroyAll*/ = true) override; > > void computeIntrinsicDimensions(Length& intrinsicWidth, Length& intrinsicHeight, FloatSize& intrinsicRatio) override; >- FloatSize size() const override; >+ FloatSize size(ImageOrientation) const override; > > ImageDrawResult draw(GraphicsContext&, const FloatRect& dstRect, const FloatRect& srcRect, const ImagePaintingOptions& = { }) override; > >diff --git a/Source/WebCore/platform/mac/DragImageMac.mm b/Source/WebCore/platform/mac/DragImageMac.mm >index 8ebe0076a8cc66eabfe04291faeff594ff09180e..0363e2e47825201603d554edae3c619235334e52 100644 >--- a/Source/WebCore/platform/mac/DragImageMac.mm >+++ b/Source/WebCore/platform/mac/DragImageMac.mm >@@ -94,39 +94,36 @@ RetainPtr<NSImage> dissolveDragImageToFraction(RetainPtr<NSImage> image, float d > > RetainPtr<NSImage> createDragImageFromImage(Image* image, ImageOrientation orientation) > { >- FloatSize size = image->size(); >- > if (is<BitmapImage>(*image)) { > BitmapImage& bitmapImage = downcast<BitmapImage>(*image); >- IntSize sizeRespectingOrientation = bitmapImage.sizeRespectingOrientation(); > > if (orientation == ImageOrientation::FromImage) > orientation = bitmapImage.orientationForCurrentFrame(); > > if (orientation != ImageOrientation::None) { > // Construct a correctly-rotated copy of the image to use as the drag image. >- FloatRect destRect(FloatPoint(), sizeRespectingOrientation); >- >- RetainPtr<NSImage> rotatedDragImage = adoptNS([[NSImage alloc] initWithSize:(NSSize)(sizeRespectingOrientation)]); >+ FloatSize imageSize = image->size(orientation); >+ RetainPtr<NSImage> rotatedDragImage = adoptNS([[NSImage alloc] initWithSize:(NSSize)(imageSize)]); > [rotatedDragImage lockFocus]; > > // ImageOrientation uses top-left coordinates, need to flip to bottom-left, apply... >- CGAffineTransform transform = CGAffineTransformMakeTranslation(0, destRect.height()); >+ CGAffineTransform transform = CGAffineTransformMakeTranslation(0, imageSize.height()); > transform = CGAffineTransformScale(transform, 1, -1); >- transform = CGAffineTransformConcat(orientation.transformFromDefault(sizeRespectingOrientation), transform); >+ transform = CGAffineTransformConcat(orientation.transformFromDefault(imageSize), transform); > > if (orientation.usesWidthAsHeight()) >- destRect = FloatRect(destRect.x(), destRect.y(), destRect.height(), destRect.width()); >+ imageSize = imageSize.transposedSize(); > > // ...and flip back. >- transform = CGAffineTransformTranslate(transform, 0, destRect.height()); >+ transform = CGAffineTransformTranslate(transform, 0, imageSize.height()); > transform = CGAffineTransformScale(transform, 1, -1); > > RetainPtr<NSAffineTransform> cocoaTransform = adoptNS([[NSAffineTransform alloc] init]); > [cocoaTransform setTransformStruct:*(NSAffineTransformStruct*)&transform]; > [cocoaTransform concat]; > >- [image->snapshotNSImage() drawInRect:destRect fromRect:NSMakeRect(0, 0, size.width(), size.height()) operation:NSCompositingOperationSourceOver fraction:1.0]; >+ FloatRect imageRect(FloatPoint(), imageSize); >+ [image->snapshotNSImage() drawInRect:imageRect fromRect:imageRect operation:NSCompositingOperationSourceOver fraction:1.0]; > > [rotatedDragImage unlockFocus]; > >@@ -134,8 +131,9 @@ RetainPtr<NSImage> createDragImageFromImage(Image* image, ImageOrientation orien > } > } > >+ FloatSize imageSize = image->size(); > auto dragImage = image->snapshotNSImage(); >- [dragImage setSize:(NSSize)size]; >+ [dragImage setSize:(NSSize)imageSize]; > return dragImage; > } > >diff --git a/Source/WebCore/rendering/RenderBoxModelObject.cpp b/Source/WebCore/rendering/RenderBoxModelObject.cpp >index 7482ce020c9410f56eb0604f3c53bf9b1bd26c84..220afd735186390eb4c401ba04940783b167279c 100644 >--- a/Source/WebCore/rendering/RenderBoxModelObject.cpp >+++ b/Source/WebCore/rendering/RenderBoxModelObject.cpp >@@ -947,15 +947,20 @@ void RenderBoxModelObject::paintFillLayerExtended(const PaintInfo& paintInfo, co > geometry.clip(LayoutRect(pixelSnappedRect)); > RefPtr<Image> image; > if (!geometry.destRect().isEmpty() && (image = bgImage->image(backgroundObject ? backgroundObject : this, geometry.tileSize()))) { >- auto compositeOp = op == CompositeSourceOver ? bgLayer.composite() : op; > context.setDrawLuminanceMask(bgLayer.maskSourceType() == MaskSourceType::Luminance); > > if (is<BitmapImage>(image)) > downcast<BitmapImage>(*image).updateFromSettings(settings()); > >- auto interpolation = chooseInterpolationQuality(context, *image, &bgLayer, geometry.tileSize()); >- auto decodingMode = decodingModeForImageDraw(*image, paintInfo); >- auto drawResult = context.drawTiledImage(*image, geometry.destRect(), toLayoutPoint(geometry.relativePhase()), geometry.tileSize(), geometry.spaceSize(), { compositeOp, bgLayer.blendMode(), decodingMode, interpolation }); >+ ImagePaintingOptions options = { >+ op == CompositeSourceOver ? bgLayer.composite() : op, >+ bgLayer.blendMode(), >+ decodingModeForImageDraw(*image, paintInfo), >+ ImageOrientation::FromImage, >+ chooseInterpolationQuality(context, *image, &bgLayer, geometry.tileSize()) >+ }; >+ >+ auto drawResult = context.drawTiledImage(*image, geometry.destRect(), toLayoutPoint(geometry.relativePhase()), geometry.tileSize(), geometry.spaceSize(), options); > if (drawResult == ImageDrawResult::DidRequestDecoding) { > ASSERT(bgImage->isCachedImage()); > bgImage->cachedImage()->addClientWaitingForAsyncDecoding(*this); >diff --git a/Source/WebCore/rendering/RenderElement.cpp b/Source/WebCore/rendering/RenderElement.cpp >index 1b11e2e3f1cd1ea47f867a0ed0dd080ba8c972ca..220b1a673590e6ba7c28ffbb190c10850ea46ff4 100644 >--- a/Source/WebCore/rendering/RenderElement.cpp >+++ b/Source/WebCore/rendering/RenderElement.cpp >@@ -2039,16 +2039,7 @@ bool RenderElement::checkForRepaintDuringLayout() const > > ImageOrientation RenderElement::imageOrientation() const > { >-#if USE(CG) || USE(CAIRO) || USE(DIRECT2D) >- // This can only be enabled for ports which honor the orientation flag in their drawing code. >- if (document().isImageDocument()) >- return ImageOrientation::FromImage; >-#endif >- // Respect the image's orientation if it's being used as a full-page image or it's >- // an <img> and the setting to respect it everywhere is set. >- if (settings().shouldRespectImageOrientation() && is<HTMLImageElement>(element())) >- return ImageOrientation::FromImage; >- return style().imageOrientation(); >+ return ImageOrientation::FromImage; > } > > void RenderElement::adjustFragmentedFlowStateOnContainingBlockChangeIfNeeded() >diff --git a/Source/WebCore/rendering/RenderImage.cpp b/Source/WebCore/rendering/RenderImage.cpp >index 3935cb45a14e6d76879a5d718e50a405f3948a82..26aaa0372e3b3b6bb4b37e7a4d8c578f2de7e343 100644 >--- a/Source/WebCore/rendering/RenderImage.cpp >+++ b/Source/WebCore/rendering/RenderImage.cpp >@@ -617,11 +617,9 @@ ImageDrawResult RenderImage::paintIntoRect(PaintInfo& paintInfo, const FloatRect > return ImageDrawResult::DidNothing; > > HTMLImageElement* imageElement = is<HTMLImageElement>(element()) ? downcast<HTMLImageElement>(element()) : nullptr; >- CompositeOperator compositeOperator = imageElement ? imageElement->compositeOperator() : CompositeSourceOver; > > // FIXME: Document when image != img.get(). > Image* image = imageResource().image().get(); >- InterpolationQuality interpolation = image ? chooseInterpolationQuality(paintInfo.context(), *image, image, LayoutSize(rect.size())) : InterpolationDefault; > > #if USE(CG) > if (is<PDFDocumentImage>(image)) >@@ -631,8 +629,14 @@ ImageDrawResult RenderImage::paintIntoRect(PaintInfo& paintInfo, const FloatRect > if (is<BitmapImage>(image)) > downcast<BitmapImage>(*image).updateFromSettings(settings()); > >- auto decodingMode = decodingModeForImageDraw(*image, paintInfo); >- auto drawResult = paintInfo.context().drawImage(*img, rect, { compositeOperator, BlendMode::Normal, decodingMode, imageOrientation(), interpolation }); >+ ImagePaintingOptions options = { >+ imageElement ? imageElement->compositeOperator() : CompositeSourceOver, >+ decodingModeForImageDraw(*image, paintInfo), >+ imageOrientation(), >+ image ? chooseInterpolationQuality(paintInfo.context(), *image, image, LayoutSize(rect.size())) : InterpolationDefault >+ }; >+ >+ auto drawResult = paintInfo.context().drawImage(*img, rect, options); > if (drawResult == ImageDrawResult::DidRequestDecoding) > imageResource().cachedImage()->addClientWaitingForAsyncDecoding(*this); > >diff --git a/Source/WebCore/svg/graphics/SVGImage.h b/Source/WebCore/svg/graphics/SVGImage.h >index 6145853403b477aec711c8dd62f88365499e02d7..9ad9358c711ba221c2d92a5a79599db542b785de 100644 >--- a/Source/WebCore/svg/graphics/SVGImage.h >+++ b/Source/WebCore/svg/graphics/SVGImage.h >@@ -48,7 +48,7 @@ public: > FrameView* frameView() const; > > bool isSVGImage() const final { return true; } >- FloatSize size() const final { return m_intrinsicSize; } >+ FloatSize size(ImageOrientation = ImageOrientation::FromImage) const final { return m_intrinsicSize; } > > bool hasSingleSecurityOrigin() const final; > >diff --git a/Source/WebCore/svg/graphics/SVGImageForContainer.cpp b/Source/WebCore/svg/graphics/SVGImageForContainer.cpp >index d70a640c6a0491e7e167f94c180e2791a31eac8a..eaefc31e47d02151d690c5cd65f5e831b31af365 100644 >--- a/Source/WebCore/svg/graphics/SVGImageForContainer.cpp >+++ b/Source/WebCore/svg/graphics/SVGImageForContainer.cpp >@@ -27,7 +27,7 @@ > > namespace WebCore { > >-FloatSize SVGImageForContainer::size() const >+FloatSize SVGImageForContainer::size(ImageOrientation) const > { > FloatSize scaledContainerSize(m_containerSize); > scaledContainerSize.scale(m_containerZoom); >diff --git a/Source/WebCore/svg/graphics/SVGImageForContainer.h b/Source/WebCore/svg/graphics/SVGImageForContainer.h >index 57b204d983fb07b1a7ed61a1afeb4eb7f8aa0d44..e644f7acf30ec224df8515d87f72c2ae1bb34a5c 100644 >--- a/Source/WebCore/svg/graphics/SVGImageForContainer.h >+++ b/Source/WebCore/svg/graphics/SVGImageForContainer.h >@@ -43,7 +43,7 @@ public: > > bool isSVGImage() const final { return true; } > >- FloatSize size() const final; >+ FloatSize size(ImageOrientation = ImageOrientation::FromImage) const final; > > bool usesContainerSize() const final { return m_image->usesContainerSize(); } > bool hasRelativeWidth() const final { return m_image->hasRelativeWidth(); } >diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog >index 00ae54e649b164b31fa71be4b4cd38569ca05726..4de1f7be39e0c1297b9bca01bb1ab0c8bbb4baa6 100644 >--- a/LayoutTests/ChangeLog >+++ b/LayoutTests/ChangeLog >@@ -1,3 +1,42 @@ >+2019-08-28 Said Abou-Hallawa <sabouhallawa@apple.com> >+ >+ EXIF orientation should be respected when rendering images >+ https://bugs.webkit.org/show_bug.cgi?id=201123 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ Existing tests are made ref-tests. New tests were added to cover more >+ cases for drawing images. >+ >+ * fast/images/exif-orientation-composited-expected.txt: Removed. >+ * fast/images/exif-orientation-composited.html: Removed. >+ * fast/images/exif-orientation-css-expected.txt: Removed. >+ * fast/images/exif-orientation-css.html: Removed. >+ * fast/images/exif-orientation-expected.txt: Removed. >+ * fast/images/exif-orientation-image-document-expected.txt: Removed. >+ * fast/images/exif-orientation-image-document.html: Removed. >+ * fast/images/exif-orientation.html: Removed. >+ * fast/images/image-orientation-background-expected.html: Added. >+ * fast/images/image-orientation-background.html: Added. >+ * fast/images/image-orientation-canvas-expected.html: Added. >+ * fast/images/image-orientation-canvas.html: Added. >+ * fast/images/image-orientation-content-expected.html: Added. >+ * fast/images/image-orientation-content.html: Added. >+ * fast/images/image-orientation-document-expected.html: Added. >+ * fast/images/image-orientation-document.html: Added. >+ * fast/images/image-orientation-image-object-expected.html: Added. >+ * fast/images/image-orientation-image-object.html: Added. >+ * fast/images/image-orientation-img-element-expected.html: Added. >+ * fast/images/image-orientation-img-element-object-fit-expected.html: Added. >+ * fast/images/image-orientation-img-element-object-fit.html: Added. >+ * fast/images/image-orientation-img-element.html: Added. >+ * fast/images/image-orientation-svg-feimage-expected.html: Added. >+ * fast/images/image-orientation-svg-feimage.html: Added. >+ * fast/images/image-orientation-svg-image-expected.html: Added. >+ * fast/images/image-orientation-svg-image.html: Added. >+ * platform/gtk/TestExpectations: >+ * platform/win/TestExpectations: >+ > 2019-08-28 Said Abou-Hallawa <sabouhallawa@apple.com> > > XLinkNames namespace is required before the 'href' attribute of SVG animate elements >diff --git a/LayoutTests/fast/images/exif-orientation-composited-expected.txt b/LayoutTests/fast/images/exif-orientation-composited-expected.txt >deleted file mode 100644 >index 16b158bec56c19e26985de0284846c49225daf2c..0000000000000000000000000000000000000000 >--- a/LayoutTests/fast/images/exif-orientation-composited-expected.txt >+++ /dev/null >@@ -1,18 +0,0 @@ >-The images should be rotated respecting their EXIF orientation. This test can only be run with testRunner (or by manually setting WebKitShouldRespectImageOrientation to true). >- >- >-Flipped horizontally >-Rotated 180° >-Flipped vertically >- >-Rotated 90° CCW and flipped vertically >-Rotated 90° CCW >-Rotated 90° CW and flipped vertically >-Rotated 90° CW >-img1 size = 100px by 50px >-img2 size = 100px by 50px >-img3 size = 100px by 50px >-img4 size = 50px by 100px >-img5 size = 50px by 100px >-img6 size = 50px by 100px >-img7 size = 50px by 100px >diff --git a/LayoutTests/fast/images/exif-orientation-composited.html b/LayoutTests/fast/images/exif-orientation-composited.html >deleted file mode 100644 >index 98cff09a472f4b910c1f9ede5650eeba23052de1..0000000000000000000000000000000000000000 >--- a/LayoutTests/fast/images/exif-orientation-composited.html >+++ /dev/null >@@ -1,46 +0,0 @@ >-<html> >-<head> >-<script> >-if (window.internals) >- internals.settings.setShouldRespectImageOrientation(true); >-if (window.testRunner) >- testRunner.dumpAsText(true); >- >-function log(str) { >- var li = document.createElement("li"); >- li.appendChild(document.createTextNode(str)); >- var console = document.getElementById("console"); >- console.appendChild(li); >-} >- >-function imageSize(el) { >- var computedStyle = window.getComputedStyle(el); >- return computedStyle.width + " by " + computedStyle.height; >-} >- >- >-function load() { >- for(var i = 1; i <= 7; i++) >- log("img" + i + " size = " + imageSize(document.getElementById("img" + i))) >-} >- >-</script> >-<style> >-img { -webkit-transform: translateZ(0); } >-div { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 100px; vertical-align: top; } >-</style> >-</head> >-<body onload="load()"> >-<b>The images should be rotated respecting their EXIF orientation. This test can only be run with testRunner (or by manually setting WebKitShouldRespectImageOrientation to true).</b><br><br> >-<div><img id="img1" src="resources/exif-orientation-2-ur.jpg"><br>Flipped horizontally</div> >-<div><img id="img2" src="resources/exif-orientation-3-lr.jpg"><br>Rotated 180°</div> >-<div><img id="img3" src="resources/exif-orientation-4-lol.jpg"><br>Flipped vertically</div> >-<br> >-<div><img id="img4" src="resources/exif-orientation-5-lu.jpg"><br>Rotated 90° CCW and flipped vertically</div> >-<div><img id="img5" src="resources/exif-orientation-6-ru.jpg"><br>Rotated 90° CCW</div> >-<div><img id="img6" src="resources/exif-orientation-7-rl.jpg"><br>Rotated 90° CW and flipped vertically </div> >-<div><img id="img7" src="resources/exif-orientation-8-llo.jpg"><br>Rotated 90° CW</div> >-<br> >-<ul id="console"></ul> >-</body> >-</html> >diff --git a/LayoutTests/fast/images/exif-orientation-css-expected.txt b/LayoutTests/fast/images/exif-orientation-css-expected.txt >deleted file mode 100644 >index f02245b60bbb8d2d119e9e07e8305bd631185613..0000000000000000000000000000000000000000 >--- a/LayoutTests/fast/images/exif-orientation-css-expected.txt >+++ /dev/null >@@ -1,32 +0,0 @@ >-None of the images should be rotated. This test is only valid when run with testRunner (or with WebKitShouldRespectImageOrientation manually set to true). >- >- >-Normal >-Flipped horizontally >-Rotated 180° >-Flipped vertically >- >-Rotated 90° CCW and flipped vertically >-Rotated 90° CCW >-Rotated 90° CW and flipped vertically >-Rotated 90° CW >- >-Rotated 90° CCW and flipped vertically >-Rotated 90° CCW >-Rotated 90° CW and flipped vertically >-Rotated 90° CW >- >-Undefined (invalid value) >-img1 size = 100px by 50px >-img2 size = 100px by 50px >-img3 size = 100px by 50px >-img4 size = 100px by 50px >-img5 size = 100px by 50px >-img6 size = 100px by 50px >-img7 size = 100px by 50px >-img8 size = 100px by 50px >-img9 size = 100px by 100px >-img10 size = 100px by 100px >-img11 size = 100px by 100px >-img12 size = 100px by 100px >-img13 size = 100px by 50px >diff --git a/LayoutTests/fast/images/exif-orientation-css.html b/LayoutTests/fast/images/exif-orientation-css.html >deleted file mode 100644 >index 7417f55892133646d3866a0baeeb361682eb1fbc..0000000000000000000000000000000000000000 >--- a/LayoutTests/fast/images/exif-orientation-css.html >+++ /dev/null >@@ -1,55 +0,0 @@ >-<html> >-<head> >-<script> >-if (window.internals) >- internals.settings.setShouldRespectImageOrientation(true); >-if (window.testRunner) >- testRunner.dumpAsText(true); >- >-function log(str) { >- var li = document.createElement("li"); >- li.appendChild(document.createTextNode(str)); >- var console = document.getElementById("console"); >- console.appendChild(li); >-} >- >-function imageSize(el) { >- var computedStyle = window.getComputedStyle(el); >- return computedStyle.width + " by " + computedStyle.height; >-} >- >- >-function load() { >- for(var i = 1; i <= 13; i++) >- log("img" + i + " size = " + imageSize(document.getElementById("img" + i))) >-} >- >-</script> >-<style> >-div.image { display: inline-block; border: 1px solid black; } >-div.container { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 100px; vertical-align: top; } >-img { width: 100px; height: 100px; background-repeat: no-repeat; } >-</style> >-</head> >-<body onload="load()"> >-<b>None of the images should be rotated. This test is only valid when run with testRunner (or with WebKitShouldRespectImageOrientation manually set to true).</b><br><br> >-<div class="container"><div class="image" id="img1" style="content: url(resources/exif-orientation-1-ul.jpg)"></div><br>Normal</div> >-<div class="container"><div class="image" id="img2" style="content: url(resources/exif-orientation-2-ur.jpg)"></div><br>Flipped horizontally</div> >-<div class="container"><div class="image" id="img3" style="content: url(resources/exif-orientation-3-lr.jpg)"></div><br>Rotated 180°</div> >-<div class="container"><div class="image" id="img4" style="content: url(resources/exif-orientation-4-lol.jpg)"></div><br>Flipped vertically</div> >-<br> >-<div class="container"><div class="image" id="img5" style="content: url(resources/exif-orientation-5-lu.jpg)"></div><br>Rotated 90° CCW and flipped vertically</div> >-<div class="container"><div class="image" id="img6" style="content: url(resources/exif-orientation-6-ru.jpg)"></div><br>Rotated 90° CCW</div> >-<div class="container"><div class="image" id="img7" style="content: url(resources/exif-orientation-7-rl.jpg)"></div><br>Rotated 90° CW and flipped vertically</div> >-<div class="container"><div class="image" id="img8" style="content: url(resources/exif-orientation-8-llo.jpg)"></div><br>Rotated 90° CW</div> >-<br> >-<div class="container"><img id="img9" style="background-image: url(resources/exif-orientation-5-lu.jpg)"></img><br>Rotated 90° CCW and flipped vertically</div> >-<div class="container"><img id="img10" style="background-image: url(resources/exif-orientation-6-ru.jpg)"></img><br>Rotated 90° CCW</div> >-<div class="container"><img id="img11" style="background-image: url(resources/exif-orientation-7-rl.jpg)"></img><br>Rotated 90° CW and flipped vertically</div> >-<div class="container"><img id="img12" style="background-image: url(resources/exif-orientation-8-llo.jpg)"></img><br>Rotated 90° CW</div> >-<br> >-<div class="container"><div class="image" id="img13" style="content: url(resources/exif-orientation-9-u.jpg)"></div><br>Undefined (invalid value)</div> >-<br> >-<ul id="console"></ul> >-</body> >-</html> >diff --git a/LayoutTests/fast/images/exif-orientation-expected.txt b/LayoutTests/fast/images/exif-orientation-expected.txt >deleted file mode 100644 >index df488323f494a06b7490af60397d14f9201ae3ad..0000000000000000000000000000000000000000 >--- a/LayoutTests/fast/images/exif-orientation-expected.txt >+++ /dev/null >@@ -1,23 +0,0 @@ >-The images should be rotated respecting their EXIF orientation. This test can only be run with testRunner (or by manually setting WebKitShouldRespectImageOrientation to true). >- >- >-Normal >-Flipped horizontally >-Rotated 180° >-Flipped vertically >- >-Rotated 90° CCW and flipped vertically >-Rotated 90° CCW >-Rotated 90° CW and flipped vertically >-Rotated 90° CW >- >-Undefined (invalid value) >-img1 size = 100px by 50px >-img2 size = 100px by 50px >-img3 size = 100px by 50px >-img4 size = 100px by 50px >-img5 size = 50px by 100px >-img6 size = 50px by 100px >-img7 size = 50px by 100px >-img8 size = 50px by 100px >-img9 size = 100px by 50px >diff --git a/LayoutTests/fast/images/exif-orientation-image-document-expected.txt b/LayoutTests/fast/images/exif-orientation-image-document-expected.txt >deleted file mode 100644 >index 47313be5234f5e2867ad4d56006a535e0efc6f42..0000000000000000000000000000000000000000 >--- a/LayoutTests/fast/images/exif-orientation-image-document-expected.txt >+++ /dev/null >@@ -1,6 +0,0 @@ >-The images should be rotated respecting their EXIF orientation. In image documents, this happens independent of WebKitShouldRespectImageOrientation. >- >- >- >- >-PASS >diff --git a/LayoutTests/fast/images/exif-orientation-image-document.html b/LayoutTests/fast/images/exif-orientation-image-document.html >deleted file mode 100644 >index 921b3e558b944028fa6d0fa5949e587660aa08d1..0000000000000000000000000000000000000000 >--- a/LayoutTests/fast/images/exif-orientation-image-document.html >+++ /dev/null >@@ -1,59 +0,0 @@ >-<html> >-<head> >-<script> >-if (window.testRunner) { >- // Note that this test only passes in DRT. In browsers, the cross-iframe dom inspection usually causes a security exception. >- testRunner.dumpAsText(true); >-} >- >-function log(str) { >- var li = document.createElement("li"); >- li.appendChild(document.createTextNode(str)); >- var console = document.getElementById("console"); >- console.appendChild(li); >-} >- >-function imageSize(name) { >- var img = window.frames[name].document.querySelector('img'); >- return [img.offsetWidth, img.offsetHeight]; >-} >- >- >-function load() { >- var expected = [ >- [100, 50], [100, 50], [100, 50], [100, 50], >- [50, 100], [50, 100], [50, 100], [50, 100], >- [100, 50], >- ]; >- var success = true; >- for(var i = 1; i <= 9; i++) { >- var s = imageSize("img" + i); >- if (s[0] !== expected[i - 1][0] || s[1] !== expected[i - 1][1]) >- success = false; >- } >- log(success ? "PASS" : "FAIL"); >-} >- >-</script> >-<style> >-iframe { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 120px; height: 110px; vertical-align: top; border: 1px solid black; } >-</style> >-</head> >-<body onload="load()"> >-<b>The images should be rotated respecting their EXIF orientation. In image documents, this happens independent of WebKitShouldRespectImageOrientation.</b><br><br> >-<iframe name="img1" src="resources/exif-orientation-1-ul.jpg" frameborder=0></iframe> >-<iframe name="img2" src="resources/exif-orientation-2-ur.jpg" frameborder=0></iframe> >-<iframe name="img3" src="resources/exif-orientation-3-lr.jpg" frameborder=0></iframe> >-<iframe name="img4" src="resources/exif-orientation-4-lol.jpg" frameborder=0></iframe> >-<br> >-<iframe name="img5" src="resources/exif-orientation-5-lu.jpg" frameborder=0></iframe> >-<iframe name="img6" src="resources/exif-orientation-6-ru.jpg" frameborder=0></iframe> >-<iframe name="img7" src="resources/exif-orientation-7-rl.jpg" frameborder=0></iframe> >-<iframe name="img8" src="resources/exif-orientation-8-llo.jpg" frameborder=0></iframe> >-<br> >-<iframe name="img9" src="resources/exif-orientation-9-u.jpg" frameborder=0></iframe> >-<br> >-<ul id="console"></ul> >-</body> >-</html> >- >diff --git a/LayoutTests/fast/images/exif-orientation.html b/LayoutTests/fast/images/exif-orientation.html >deleted file mode 100644 >index 0d8c83b0d5f3ed5de9309b86274fe1714bf05a8c..0000000000000000000000000000000000000000 >--- a/LayoutTests/fast/images/exif-orientation.html >+++ /dev/null >@@ -1,49 +0,0 @@ >-<html> >-<head> >-<script> >-if (window.internals) >- internals.settings.setShouldRespectImageOrientation(true); >-if (window.testRunner) >- testRunner.dumpAsText(true); >- >-function log(str) { >- var li = document.createElement("li"); >- li.appendChild(document.createTextNode(str)); >- var console = document.getElementById("console"); >- console.appendChild(li); >-} >- >-function imageSize(el) { >- var computedStyle = window.getComputedStyle(el); >- return computedStyle.width + " by " + computedStyle.height; >-} >- >- >-function load() { >- for(var i = 1; i <= 9; i++) >- log("img" + i + " size = " + imageSize(document.getElementById("img" + i))) >-} >- >-</script> >-<style> >-img { border: 1px solid black; } >-div { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 100px; vertical-align: top; } >-</style> >-</head> >-<body onload="load()"> >-<b>The images should be rotated respecting their EXIF orientation. This test can only be run with testRunner (or by manually setting WebKitShouldRespectImageOrientation to true).</b><br><br> >-<div><img id="img1" src="resources/exif-orientation-1-ul.jpg"><br>Normal</div> >-<div><img id="img2" src="resources/exif-orientation-2-ur.jpg"><br>Flipped horizontally</div> >-<div><img id="img3" src="resources/exif-orientation-3-lr.jpg"><br>Rotated 180°</div> >-<div><img id="img4" src="resources/exif-orientation-4-lol.jpg"><br>Flipped vertically</div> >-<br> >-<div><img id="img5" src="resources/exif-orientation-5-lu.jpg"><br>Rotated 90° CCW and flipped vertically</div> >-<div><img id="img6" src="resources/exif-orientation-6-ru.jpg"><br>Rotated 90° CCW</div> >-<div><img id="img7" src="resources/exif-orientation-7-rl.jpg"><br>Rotated 90° CW and flipped vertically </div> >-<div><img id="img8" src="resources/exif-orientation-8-llo.jpg"><br>Rotated 90° CW</div> >-<br> >-<div><img id="img9" src="resources/exif-orientation-9-u.jpg"><br>Undefined (invalid value)</div> >-<br> >-<ul id="console"></ul> >-</body> >-</html> >diff --git a/LayoutTests/fast/images/image-orientation-background-expected.html b/LayoutTests/fast/images/image-orientation-background-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..149a5ed550009c37140d841146ea0f9d4f32c4ca >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-background-expected.html >@@ -0,0 +1,82 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ img { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The css background images should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1);"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: rotate(180deg);"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1) rotate(180deg);"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg);"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg);"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-background.html b/LayoutTests/fast/images/image-orientation-background.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a9c3ca453c611e45815eb768c5250a2a4318a1a6 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-background.html >@@ -0,0 +1,65 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.image { >+ border: 1px solid black; >+ background-repeat: no-repeat; >+ } >+ div.horizontal { >+ width: 100px; >+ height: 50px; >+ } >+ div.vertical { >+ width: 50px; >+ height: 100px; >+ } >+</style> >+<body> >+ <b>The css background images should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="image horizontal" style="background-image: url(resources/exif-orientation-1-ul.jpg)"></div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="image horizontal" style="background-image: url(resources/exif-orientation-2-ur.jpg)"></div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="image horizontal" style="background-image: url(resources/exif-orientation-3-lr.jpg)"></div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="image horizontal" style="background-image: url(resources/exif-orientation-4-lol.jpg)"></div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="image vertical" style="background-image: url(resources/exif-orientation-5-lu.jpg)"></div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="image vertical" style="background-image: url(resources/exif-orientation-6-ru.jpg)"></div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="image vertical" style="background-image: url(resources/exif-orientation-7-rl.jpg)"></div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="image vertical" style="background-image: url(resources/exif-orientation-8-llo.jpg)"></div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="image horizontal" style="background-image: url(resources/exif-orientation-9-u.jpg)"></div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-canvas-expected.html b/LayoutTests/fast/images/image-orientation-canvas-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..4c102681076579d69bc8c96b7f1ab1f5f3727909 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-canvas-expected.html >@@ -0,0 +1,82 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ img { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>CanvasRenderingContext2D.drawImage() should respect the image EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1);"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: rotate(180deg);"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1) rotate(180deg);"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg);"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg);"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-canvas.html b/LayoutTests/fast/images/image-orientation-canvas.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8da41827957656fe6b34df368b9b57c100004c17 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-canvas.html >@@ -0,0 +1,126 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ canvas { >+ border: 1px solid black; >+ } >+ canvas.horizontal { >+ width: 100px; >+ height: 50px; >+ } >+ canvas.vertical { >+ width: 50px; >+ height: 100px; >+ } >+</style> >+<body> >+ <b>CanvasRenderingContext2D.drawImage() should respect the image EXIF orientation.</b> >+ <br> >+ <br> >+ <div class ="container"> >+ <div class ="horizontal"> >+ <canvas class="horizontal" id="canvas1"></canvas> >+ </div> >+ <br>Normal >+ </div> >+ <div class ="container"> >+ <div class ="horizontal"> >+ <canvas class="horizontal" id="canvas2"></canvas> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class ="container"> >+ <div class ="horizontal"> >+ <canvas class="horizontal" id="canvas3"></canvas> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class ="container"> >+ <div class ="horizontal"> >+ <canvas class="horizontal" id="canvas4"></canvas> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class ="container"> >+ <div class ="vertical"> >+ <canvas class="vertical" id="canvas5"></canvas> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class ="container"> >+ <div class ="vertical"> >+ <canvas class="vertical" id="canvas6"></canvas> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class ="container"> >+ <div class ="vertical"> >+ <canvas class="vertical" id="canvas7"></canvas> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class ="container"> >+ <div class ="vertical"> >+ <canvas class="vertical" id="canvas8"></canvas> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class ="container"> >+ <div class ="horizontal"> >+ <canvas class="horizontal" id="canvas9"></canvas> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+ <script> >+ if (window.testRunner) >+ window.testRunner.waitUntilDone(); >+ >+ window.onload = function() { >+ var names = [ >+ { resource: "resources/exif-orientation-1-ul.jpg", id : "canvas1" }, >+ { resource: "resources/exif-orientation-2-ur.jpg", id : "canvas2" }, >+ { resource: "resources/exif-orientation-3-lr.jpg", id : "canvas3" }, >+ { resource: "resources/exif-orientation-4-lol.jpg", id : "canvas4" }, >+ { resource: "resources/exif-orientation-5-lu.jpg", id : "canvas5" }, >+ { resource: "resources/exif-orientation-6-ru.jpg", id : "canvas6" }, >+ { resource: "resources/exif-orientation-7-rl.jpg", id : "canvas7" }, >+ { resource: "resources/exif-orientation-8-llo.jpg", id : "canvas8" }, >+ { resource: "resources/exif-orientation-9-u.jpg", id : "canvas9" } >+ ]; >+ >+ var drawCount = 0; >+ >+ names.forEach(function(name) { >+ var image = new Image; >+ image.src = name.resource; >+ image.decode().then(() => { >+ let canvas = document.getElementById(name.id); >+ canvas.width = image.width; >+ canvas.height = image.height; >+ let context = canvas.getContext("2d"); >+ context.drawImage(image, 0, 0, canvas.width, canvas.height); >+ if (++drawCount == names.length) { >+ if (window.testRunner) >+ window.testRunner.notifyDone(); >+ } >+ }); >+ }); >+ } >+ </script> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-content-expected.html b/LayoutTests/fast/images/image-orientation-content-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d085a82263b2bf438283447f5a72c8449e3d715a >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-content-expected.html >@@ -0,0 +1,82 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ img { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The css content images should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1);"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: rotate(180deg);"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1) rotate(180deg);"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg);"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg);"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-content.html b/LayoutTests/fast/images/image-orientation-content.html >new file mode 100644 >index 0000000000000000000000000000000000000000..45918ea327bcfeb9b8ccd57c7a43807581cba408 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-content.html >@@ -0,0 +1,64 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.image { >+ border: 1px solid black; >+ } >+ div.horizontal { >+ width: 100px; >+ height: 50px; >+ } >+ div.vertical { >+ width: 50px; >+ height: 100px; >+ } >+</style> >+<body> >+ <b>The css content images should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="image horizontal" style="content: url(resources/exif-orientation-1-ul.jpg)"></div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="image horizontal" style="content: url(resources/exif-orientation-2-ur.jpg)"></div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="image horizontal" style="content: url(resources/exif-orientation-3-lr.jpg)"></div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="image horizontal" style="content: url(resources/exif-orientation-4-lol.jpg)"></div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="image vertical" style="content: url(resources/exif-orientation-5-lu.jpg)"></div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="image vertical" style="content: url(resources/exif-orientation-6-ru.jpg)"></div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="image vertical" style="content: url(resources/exif-orientation-7-rl.jpg)"></div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="image vertical" style="content: url(resources/exif-orientation-8-llo.jpg)"></div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="image horizontal" style="content: url(resources/exif-orientation-9-u.jpg)"></div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-document-expected.html b/LayoutTests/fast/images/image-orientation-document-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9c7a1371f27c4468506b149919fd33261551cb4b >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-document-expected.html >@@ -0,0 +1,82 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ img { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The images of ImageDocuments should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1);"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: rotate(180deg);"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1) rotate(180deg);"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg);"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg);"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-document.html b/LayoutTests/fast/images/image-orientation-document.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5295f19ddf77cf66c38a92304bc89b0976959e03 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-document.html >@@ -0,0 +1,103 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ iframe { >+ border: 1px solid black; >+ } >+ iframe.horizontal { >+ width: 100px; >+ height: 50px; >+ } >+ iframe.vertical { >+ width: 50px; >+ height: 100px; >+ } >+</style> >+<body> >+ <b>The images of ImageDocuments should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <iframe class="horizontal" onload="onFrameLoad(this)" src="resources/exif-orientation-1-ul.jpg"></iframe> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <iframe class="horizontal" onload="onFrameLoad(this)" src="resources/exif-orientation-2-ur.jpg"></iframe> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <iframe class="horizontal" onload="onFrameLoad(this)" src="resources/exif-orientation-3-lr.jpg"></iframe> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <iframe class="horizontal" onload="onFrameLoad(this)" src="resources/exif-orientation-4-lol.jpg"></iframe> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <iframe class="vertical" onload="onFrameLoad(this)" src="resources/exif-orientation-5-lu.jpg"></iframe> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <iframe class="vertical" onload="onFrameLoad(this)" src="resources/exif-orientation-6-ru.jpg"></iframe> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <iframe class="vertical" onload="onFrameLoad(this)" src="resources/exif-orientation-7-rl.jpg"></iframe> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <iframe class="vertical" onload="onFrameLoad(this)" src="resources/exif-orientation-8-llo.jpg"></iframe> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <iframe class="horizontal" onload="onFrameLoad(this)" src="resources/exif-orientation-9-u.jpg"></iframe> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+ <script> >+ if (window.testRunner) >+ window.testRunner.waitUntilDone(); >+ >+ var iFrameLoadedCount = 0; >+ >+ function onFrameLoad() { >+ if (++iFrameLoadedCount == 9) { >+ if (window.testRunner) >+ window.testRunner.notifyDone(); >+ } >+ } >+ </script> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-image-object-expected.html b/LayoutTests/fast/images/image-orientation-image-object-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..884e858e2402a2186f2b02be7c2d039affded3ff >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-image-object-expected.html >@@ -0,0 +1,82 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ img { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The images of <object> elements should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1);"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: rotate(180deg);"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1) rotate(180deg);"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg);"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg);"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-image-object.html b/LayoutTests/fast/images/image-orientation-image-object.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f4d7280252a00464552b98723ee407efb764fd70 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-image-object.html >@@ -0,0 +1,82 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ object { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The images of <object> elements should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <object type="image/jpeg" data="resources/exif-orientation-1-ul.jpg"></object> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <object type="image/jpeg" data="resources/exif-orientation-2-ur.jpg"></object> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <object type="image/jpeg" data="resources/exif-orientation-3-lr.jpg"></object> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <object type="image/jpeg" data="resources/exif-orientation-4-lol.jpg"></object> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <object type="image/jpeg" data="resources/exif-orientation-5-lu.jpg"></object> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <object type="image/jpeg" data="resources/exif-orientation-6-ru.jpg"></object> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <object type="image/jpeg" data="resources/exif-orientation-7-rl.jpg"></object> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <object type="image/jpeg" data="resources/exif-orientation-8-llo.jpg"></object> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <object type="image/jpeg" data="resources/exif-orientation-9-u.jpg"></object> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-img-element-expected.html b/LayoutTests/fast/images/image-orientation-img-element-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..66d4675a094d93f30b40379d94e896d1b999b119 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-img-element-expected.html >@@ -0,0 +1,105 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ img { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The images of <img> elements should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img1" src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img2" src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1);"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img3" src="resources/exif-orientation-1-ul.jpg" style="transform: rotate(180deg);"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img4" src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1) rotate(180deg);"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <img id="img5" src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img id="img6" src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg);"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img id="img7" src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img id="img8" src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg);"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img9" src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+ <br> >+ <ul id="console"></ul> >+ <script> >+ function log(str) { >+ var li = document.createElement("li"); >+ li.appendChild(document.createTextNode(str)); >+ var console = document.getElementById("console"); >+ console.appendChild(li); >+ } >+ >+ function imageSize(index) { >+ var element = document.getElementById("img" + index); >+ var computedStyle = window.getComputedStyle(element); >+ if (element.parentElement.classList.contains("vertical")) >+ return computedStyle.height + " by " + computedStyle.width; >+ return computedStyle.width + " by " + computedStyle.height; >+ } >+ >+ window.addEventListener('load', (event) => { >+ for(var i = 1; i <= 9; i++) >+ log("img" + i + " size = " + imageSize(i)); >+ }); >+ </script> >+</body> >\ No newline at end of file >diff --git a/LayoutTests/fast/images/image-orientation-img-element-object-fit-expected.html b/LayoutTests/fast/images/image-orientation-img-element-object-fit-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6a872812cee339dd313429e6054b4d91f7e625aa >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-img-element-object-fit-expected.html >@@ -0,0 +1,78 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.square { >+ width: 100px; >+ height: 100px; >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The images of <img> elements with object-fit property should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="square"> >+ <div> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(0, 25px);"> >+ </div> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(0, 25px) scaleX(-1);"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(0, 25px) rotate(180deg);"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(0, 25px) scaleX(-1) rotate(180deg);"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(0, 25px) rotate(90deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(0, 25px) rotate(90deg);"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(0, 25px) rotate(270deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(0, 25px) rotate(270deg);"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(0, 25px);"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-img-element-object-fit.html b/LayoutTests/fast/images/image-orientation-img-element-object-fit.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6d539a558e01b953ff9c7f5cfc07f1751bd67a63 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-img-element-object-fit.html >@@ -0,0 +1,81 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.square { >+ width: 100px; >+ height: 100px; >+ border: 1px solid black; >+ } >+ img { >+ width: 100px; >+ height: 100px; >+ object-fit: contain; >+ } >+</style> >+<body> >+ <b>The images of <img> elements with object-fit property should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-2-ur.jpg"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-3-lr.jpg"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-4-lol.jpg"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-5-lu.jpg"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-6-ru.jpg"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-7-rl.jpg"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-8-llo.jpg"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="square"> >+ <img src="resources/exif-orientation-9-u.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-img-element.html b/LayoutTests/fast/images/image-orientation-img-element.html >new file mode 100644 >index 0000000000000000000000000000000000000000..afe96c5de2db5cebaeb8724f0339db8374b320dd >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-img-element.html >@@ -0,0 +1,102 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ img { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The images of <img> elements should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img1" src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img2" src="resources/exif-orientation-2-ur.jpg"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img3" src="resources/exif-orientation-3-lr.jpg"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img4" src="resources/exif-orientation-4-lol.jpg"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <img id="img5" src="resources/exif-orientation-5-lu.jpg"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img id="img6" src="resources/exif-orientation-6-ru.jpg"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img id="img7" src="resources/exif-orientation-7-rl.jpg"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img id="img8" src="resources/exif-orientation-8-llo.jpg"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img id="img9" src="resources/exif-orientation-9-u.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+ <br> >+ <ul id="console"></ul> >+ <script> >+ function log(str) { >+ var li = document.createElement("li"); >+ li.appendChild(document.createTextNode(str)); >+ var console = document.getElementById("console"); >+ console.appendChild(li); >+ } >+ >+ function imageSize(el) { >+ var computedStyle = window.getComputedStyle(el); >+ return computedStyle.width + " by " + computedStyle.height; >+ } >+ >+ window.addEventListener('load', (event) => { >+ for(var i = 1; i <= 9; i++) >+ log("img" + i + " size = " + imageSize(document.getElementById("img" + i))); >+ }); >+ </script> >+</body> >\ No newline at end of file >diff --git a/LayoutTests/fast/images/image-orientation-svg-feimage-expected.html b/LayoutTests/fast/images/image-orientation-svg-feimage-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c10b92f3ae5a39ce63f102d3752e16467147b51e >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-svg-feimage-expected.html >@@ -0,0 +1,82 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ img { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The images of SVG <feimage> elements should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1);"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: rotate(180deg);"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1) rotate(180deg);"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg);"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg);"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-svg-feimage.html b/LayoutTests/fast/images/image-orientation-svg-feimage.html >new file mode 100644 >index 0000000000000000000000000000000000000000..54f27b4b6f0810ef51ba285420778b23d7556b5f >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-svg-feimage.html >@@ -0,0 +1,136 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ svg { >+ border: 1px solid black; >+ } >+ svg.horizontal { >+ width: 100px; >+ height: 50px; >+ } >+ svg.vertical { >+ width: 50px; >+ height: 100px; >+ } >+</style> >+<body> >+ <b>The images of SVG <feimage> elements should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <filter id="img1"> >+ <feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-1-ul.jpg"/> >+ </filter> >+ <rect width="100%" height="100%" style="filter:url(#img1);"/> >+ </svg> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <filter id="img2"> >+ <feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-2-ur.jpg"/> >+ </filter> >+ <rect width="100%" height="100%" style="filter:url(#img2);"/> >+ </svg> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <filter id="img3"> >+ <feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-3-lr.jpg"/> >+ </filter> >+ <rect width="100%" height="100%" style="filter:url(#img3);"/> >+ </svg> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <filter id="img4"> >+ <feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-4-lol.jpg"/> >+ </filter> >+ <rect width="100%" height="100%" style="filter:url(#img4);"/> >+ </svg> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <svg class="vertical"> >+ <filter id="img5"> >+ <feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-5-lu.jpg"/> >+ </filter> >+ <rect width="100%" height="100%" style="filter:url(#img5);"/> >+ </svg> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <svg class="vertical"> >+ <filter id="img6"> >+ <feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-6-ru.jpg"/> >+ </filter> >+ <rect width="100%" height="100%" style="filter:url(#img6);"/> >+ </svg> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <svg class="vertical"> >+ <filter id="img7"> >+ <feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-7-rl.jpg"/> >+ </filter> >+ <rect width="100%" height="100%" style="filter:url(#img7);"/> >+ </svg> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <svg class="vertical"> >+ <filter id="img8"> >+ <feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-8-llo.jpg"/> >+ </filter> >+ <rect width="100%" height="100%" style="filter:url(#img8);"/> >+ </svg> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <filter id="img9"> >+ <feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-9-u.jpg"/> >+ </filter> >+ <rect width="100%" height="100%" style="filter:url(#img9);"/> >+ </svg> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+ <br> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-svg-image-expected.html b/LayoutTests/fast/images/image-orientation-svg-image-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..518f9dd50cf566137fa01ffc04aff00f0a2082f1 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-svg-image-expected.html >@@ -0,0 +1,82 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ img { >+ border: 1px solid black; >+ } >+</style> >+<body> >+ <b>The images of SVG <image> elements should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1);"> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: rotate(180deg);"> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1) rotate(180deg);"> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg);"> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);"> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg);"> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <img src="resources/exif-orientation-1-ul.jpg"> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/fast/images/image-orientation-svg-image.html b/LayoutTests/fast/images/image-orientation-svg-image.html >new file mode 100644 >index 0000000000000000000000000000000000000000..afe75b16c0363a079108b2813e899a62cd016045 >--- /dev/null >+++ b/LayoutTests/fast/images/image-orientation-svg-image.html >@@ -0,0 +1,109 @@ >+<!DOCTYPE html> >+<style> >+ div.container { >+ display: inline-block; >+ margin-right: 20px; >+ margin-bottom: 10px; >+ width: 100px; >+ vertical-align: top; >+ } >+ >+ div.horizontal { >+ width: 102; >+ height: 52px; >+ } >+ div.vertical { >+ width: 52px; >+ height: 102px; >+ } >+ svg { >+ border: 1px solid black; >+ } >+ svg.horizontal { >+ width: 100px; >+ height: 50px; >+ } >+ svg.vertical { >+ width: 50px; >+ height: 100px; >+ } >+</style> >+<body> >+ <b>The images of SVG <image> elements should be rendered respecting their EXIF orientation.</b> >+ <br> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <image width="100%" height="100%" href="resources/exif-orientation-1-ul.jpg"/> >+ </svg> >+ </div> >+ <br>Normal >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <image width="100%" height="100%" href="resources/exif-orientation-2-ur.jpg"/> >+ </svg> >+ </div> >+ <br>Flipped horizontally >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <image width="100%" height="100%" href="resources/exif-orientation-3-lr.jpg"/> >+ </svg> >+ </div> >+ <br>Rotated 180° >+ </div> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <image width="100%" height="100%" href="resources/exif-orientation-4-lol.jpg"/> >+ </svg> >+ </div> >+ <br>Flipped vertically >+ </div> >+ <br> >+ <div class="container"> >+ <div class="vertical"> >+ <svg class="vertical"> >+ <image width="100%" height="100%" href="resources/exif-orientation-5-lu.jpg"/> >+ </svg> >+ </div> >+ <br>Rotated 90° CCW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <svg class="vertical"> >+ <image width="100%" height="100%" href="resources/exif-orientation-6-ru.jpg"/> >+ </svg> >+ </div> >+ <br>Rotated 90° CCW >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <svg class="vertical"> >+ <image width="100%" height="100%" href="resources/exif-orientation-7-rl.jpg"/> >+ </svg> >+ </div> >+ <br>Rotated 90° CW and flipped vertically >+ </div> >+ <div class="container"> >+ <div class="vertical"> >+ <svg class="vertical"> >+ <image width="100%" height="100%" href="resources/exif-orientation-8-llo.jpg"/> >+ </svg> >+ </div> >+ <br>Rotated 90° CW >+ </div> >+ <br> >+ <div class="container"> >+ <div class="horizontal"> >+ <svg class="horizontal"> >+ <image width="100%" height="100%" href="resources/exif-orientation-9-u.jpg"/> >+ </svg> >+ </div> >+ <br>Undefined (invalid value) >+ </div> >+</body> >diff --git a/LayoutTests/platform/gtk/TestExpectations b/LayoutTests/platform/gtk/TestExpectations >index 4f75f4fd8e9b70a1c62511db6f8b5ad9b8b70af0..521ad0afb678ffcf1a0340fdd4da58926de55077 100644 >--- a/LayoutTests/platform/gtk/TestExpectations >+++ b/LayoutTests/platform/gtk/TestExpectations >@@ -2927,8 +2927,6 @@ webkit.org/b/120596 css3/masking/mask-repeat-space-content.html [ ImageOnlyFailu > > webkit.org/b/120839 legacy-animation-engine/animations/cross-fade-background-image.html [ ImageOnlyFailure ] > >-webkit.org/b/121905 fast/images/exif-orientation.html [ Failure ] >- > webkit.org/b/180581 css3/shapes/shape-outside/values/shape-margin-001.html [ Failure ] > webkit.org/b/180581 css3/shapes/shape-outside/values/shape-outside-circle-004.html [ Failure ] > webkit.org/b/180581 css3/shapes/shape-outside/values/shape-outside-circle-005.html [ Failure ] >diff --git a/LayoutTests/platform/win/TestExpectations b/LayoutTests/platform/win/TestExpectations >index 33bf6b763806f30e9a7f32f1102e58cf12fc3585..d35047a03734bf237c203384f61c70ce734527ca 100644 >--- a/LayoutTests/platform/win/TestExpectations >+++ b/LayoutTests/platform/win/TestExpectations >@@ -2811,11 +2811,9 @@ fast/history/location-replace-hash.html [ Skip ] > fast/history/saves-state-after-fragment-nav.html [ Skip ] > > fast/images/image-controls-basic.html [ Failure ] >-fast/images/exif-orientation-composited.html [ Failure ] > webkit.org/b/140516 [ Debug ] fast/images/large-size-image-crash.html [ Skip ] # Crashing > fast/images/pdf-as-image-with-annotations.html [ ImageOnlyFailure ] > fast/images/support-broken-image-delegate.html [ Failure ] >-fast/images/exif-orientation.html [ Failure ] > > fast/inline/positionedLifetime.html [ Failure ] >
<b>You cannot view the attachment while viewing its details because your browser does not support IFRAMEs. <a href="attachment.cgi?id=377493">View the attachment on a separate page</a>.</b>
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 201123
:
377221
|
377346
|
377362
|
377428
|
377444
|
377454
|
377493
|
377502
|
377807