Title: [255030] branches/safari-609-branch
Revision
255030
Author
[email protected]
Date
2020-01-23 13:44:43 -0800 (Thu, 23 Jan 2020)

Log Message

Cherry-pick r254841. rdar://problem/58807959

    EXIF orientation is ignored for some CSS images
    https://bugs.webkit.org/show_bug.cgi?id=203355

    Patch by Said Abou-Hallawa <[email protected]> on 2020-01-20
    Reviewed by Simon Fraser.

    Source/WebCore:

    Unlike GraphicsContext::drawNativeImage(), GraphicsContext::drawPattern()
    can't change the coordinates system before drawing the image to respect
    the EXIF orientation. Drawing a pattern tries to fill the destination
    rectangle with the image according to the GraphicsContext origin and the
    direction of its axes. So we need to create temporary NativeImage with
    respecting the EXIF orientation and then use it to draw the pattern.

    Tests: fast/images/exif-orientation-background-image-no-repeat.html
           fast/images/exif-orientation-background-image-repeat.html
           fast/images/exif-orientation-border-image.html

    * platform/graphics/BitmapImage.cpp:
    (WebCore::BitmapImage::nativeImageForCurrentFrameRespectingOrientation):
    (WebCore::BitmapImage::drawPattern):
    * platform/graphics/BitmapImage.h:
    * platform/graphics/Image.h:
    (WebCore::Image::nativeImage):
    (WebCore::Image::nativeImageForCurrentFrameRespectingOrientation):
    (WebCore::Image::nativeImageOfSize):
    * platform/graphics/ImageBuffer.h:
    * platform/graphics/cg/GraphicsContextCG.cpp:
    (WebCore::GraphicsContext::drawPattern):
    * platform/graphics/cg/NativeImageCG.cpp:
    (WebCore::drawNativeImage):
    * rendering/style/NinePieceImage.cpp:
    (WebCore::NinePieceImage::paint const):

    LayoutTests:

    * fast/images/exif-orientation-background-image-no-repeat-expected.html: Added.
    * fast/images/exif-orientation-background-image-no-repeat.html: Added.
    * fast/images/exif-orientation-background-image-repeat-expected.html: Added.
    * fast/images/exif-orientation-background-image-repeat.html: Added.
    * fast/images/exif-orientation-border-image-expected.html: Added.
    * fast/images/exif-orientation-border-image.html: Added.

    git-svn-id: https://svn.webkit.org/repository/webkit/trunk@254841 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Modified Paths

Added Paths

Diff

Modified: branches/safari-609-branch/LayoutTests/ChangeLog (255029 => 255030)


--- branches/safari-609-branch/LayoutTests/ChangeLog	2020-01-23 21:44:38 UTC (rev 255029)
+++ branches/safari-609-branch/LayoutTests/ChangeLog	2020-01-23 21:44:43 UTC (rev 255030)
@@ -1,5 +1,69 @@
 2020-01-23  Russell Epstein  <[email protected]>
 
+        Cherry-pick r254841. rdar://problem/58807959
+
+    EXIF orientation is ignored for some CSS images
+    https://bugs.webkit.org/show_bug.cgi?id=203355
+    
+    Patch by Said Abou-Hallawa <[email protected]> on 2020-01-20
+    Reviewed by Simon Fraser.
+    
+    Source/WebCore:
+    
+    Unlike GraphicsContext::drawNativeImage(), GraphicsContext::drawPattern()
+    can't change the coordinates system before drawing the image to respect
+    the EXIF orientation. Drawing a pattern tries to fill the destination
+    rectangle with the image according to the GraphicsContext origin and the
+    direction of its axes. So we need to create temporary NativeImage with
+    respecting the EXIF orientation and then use it to draw the pattern.
+    
+    Tests: fast/images/exif-orientation-background-image-no-repeat.html
+           fast/images/exif-orientation-background-image-repeat.html
+           fast/images/exif-orientation-border-image.html
+    
+    * platform/graphics/BitmapImage.cpp:
+    (WebCore::BitmapImage::nativeImageForCurrentFrameRespectingOrientation):
+    (WebCore::BitmapImage::drawPattern):
+    * platform/graphics/BitmapImage.h:
+    * platform/graphics/Image.h:
+    (WebCore::Image::nativeImage):
+    (WebCore::Image::nativeImageForCurrentFrameRespectingOrientation):
+    (WebCore::Image::nativeImageOfSize):
+    * platform/graphics/ImageBuffer.h:
+    * platform/graphics/cg/GraphicsContextCG.cpp:
+    (WebCore::GraphicsContext::drawPattern):
+    * platform/graphics/cg/NativeImageCG.cpp:
+    (WebCore::drawNativeImage):
+    * rendering/style/NinePieceImage.cpp:
+    (WebCore::NinePieceImage::paint const):
+    
+    LayoutTests:
+    
+    * fast/images/exif-orientation-background-image-no-repeat-expected.html: Added.
+    * fast/images/exif-orientation-background-image-no-repeat.html: Added.
+    * fast/images/exif-orientation-background-image-repeat-expected.html: Added.
+    * fast/images/exif-orientation-background-image-repeat.html: Added.
+    * fast/images/exif-orientation-border-image-expected.html: Added.
+    * fast/images/exif-orientation-border-image.html: Added.
+    
+    git-svn-id: https://svn.webkit.org/repository/webkit/trunk@254841 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+    2020-01-20  Said Abou-Hallawa  <[email protected]>
+
+            EXIF orientation is ignored for some CSS images
+            https://bugs.webkit.org/show_bug.cgi?id=203355
+
+            Reviewed by Simon Fraser.
+
+            * fast/images/exif-orientation-background-image-no-repeat-expected.html: Added.
+            * fast/images/exif-orientation-background-image-no-repeat.html: Added.
+            * fast/images/exif-orientation-background-image-repeat-expected.html: Added.
+            * fast/images/exif-orientation-background-image-repeat.html: Added.
+            * fast/images/exif-orientation-border-image-expected.html: Added.
+            * fast/images/exif-orientation-border-image.html: Added.
+
+2020-01-23  Russell Epstein  <[email protected]>
+
         Cherry-pick r254814. rdar://problem/58816321
 
     Video sound sometimes keeps playing in page cache

Added: branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-no-repeat-expected.html (0 => 255030)


--- branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-no-repeat-expected.html	                        (rev 0)
+++ branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-no-repeat-expected.html	2020-01-23 21:44:43 UTC (rev 255030)
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<style>
+    div.container {
+        display: inline-block;
+        margin-right: 20px; 
+        margin-bottom: 10px; 
+        width: 100px; 
+        vertical-align: top;
+    }
+    div.box {
+        width: 100px;
+        height:100px;
+        border: 1px solid black;
+    }
+</style>
+<body>
+    <b>The CSS background images should be rotated respecting their EXIF orientation.</b>
+    <br>
+    <br>
+    <div class="container">
+        <div class="box">
+            <img src="" style="transform: translate(0, 25px);">
+        </div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="box">
+            <img src="" style="transform: translate(0, 25px) scaleX(-1);">
+        </div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="box">
+            <img src="" style="transform: translate(0, 25px) rotate(180deg);">
+        </div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="box">
+            <img src="" style="transform: translate(0, 25px) scaleX(-1) rotate(180deg);">
+        </div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="box">
+            <img src="" style="transform: translate(0, 25px) rotate(90deg) scaleY(-1);">
+        </div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="box">
+            <img src="" style="transform: translate(0, 25px) rotate(90deg);">
+        </div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div class="container">
+        <div class="box">
+            <img src="" style="transform: translate(0, 25px) rotate(270deg) scaleY(-1);">
+        </div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="box">
+            <img src="" style="transform: translate(0, 25px) rotate(270deg);">
+        </div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <br>
+    <div class="container">
+        <div class="box">
+            <img src="" style="transform: translate(0, 25px);">
+        </div>
+        <br>Undefined (invalid value)
+    </div>
+</body>

Added: branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-no-repeat.html (0 => 255030)


--- branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-no-repeat.html	                        (rev 0)
+++ branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-no-repeat.html	2020-01-23 21:44:43 UTC (rev 255030)
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<style>
+    div.container {
+        display: inline-block;
+        margin-right: 20px; 
+        margin-bottom: 10px; 
+        width: 100px; 
+        vertical-align: top;
+    }
+    div.box {
+        border: 1px solid black;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+    div.horizontal {
+        width: 100px;
+        height: 100px;
+    }
+    div.vertical {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <b>The CSS background images should be rotated respecting their EXIF orientation.</b>
+    <br>
+    <br>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-1-ul.jpg');"></div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-2-ur.jpg');"></div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-3-lr.jpg');"></div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-4-lol.jpg');"></div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="vertical box" style="background-image: url('resources/exif-orientation-5-lu.jpg');"></div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="vertical box" style="background-image: url('resources/exif-orientation-6-ru.jpg');"></div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div class="container">
+        <div class="vertical box" style="background-image: url('resources/exif-orientation-7-rl.jpg');"></div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="vertical box" style="background-image: url('resources/exif-orientation-8-llo.jpg');"></div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <br>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-9-u.jpg');"></div>
+        <br>Undefined (invalid value)
+    </div>
+</body>

Added: branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-repeat-expected.html (0 => 255030)


--- branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-repeat-expected.html	                        (rev 0)
+++ branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-repeat-expected.html	2020-01-23 21:44:43 UTC (rev 255030)
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<style>
+    div.container {
+        display: inline-block;
+        margin-right: 20px; 
+        margin-bottom: 10px; 
+        width: 100px; 
+        vertical-align: top;
+    }
+    div.box {
+        width: 100px;
+        height:100px;
+        border: 1px solid black;
+    }
+    img {
+        display: block;
+    }
+</style>
+<body>
+    <b>The CSS background images should be rotated respecting their EXIF orientation.</b>
+    <br>
+    <br>
+    <div class="container">
+        <div class="box">
+            <img src=""
+            <img src=""
+        </div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="box" style="transform: scaleX(-1);">
+            <img src=""
+            <img src=""
+        </div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="box" style="transform: rotate(180deg);">
+            <img src=""
+            <img src=""
+        </div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="box" style="transform: scaleX(-1) rotate(180deg);">
+            <img src=""
+            <img src=""
+        </div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="box" style="transform: rotate(90deg) scaleY(-1);">
+            <img src=""
+            <img src=""
+        </div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="box" style="transform: rotate(90deg);">
+            <img src=""
+            <img src=""
+        </div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div class="container">
+        <div class="box" style="transform: rotate(270deg) scaleY(-1);">
+            <img src=""
+            <img src=""
+        </div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="box" style="transform: rotate(270deg);">
+            <img src=""
+            <img src=""
+        </div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <br>
+    <div class="container">
+        <div class="box">
+            <img src=""
+            <img src=""
+        </div>
+        <br>Undefined (invalid value)
+    </div>
+</body>

Added: branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-repeat.html (0 => 255030)


--- branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-repeat.html	                        (rev 0)
+++ branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-background-image-repeat.html	2020-01-23 21:44:43 UTC (rev 255030)
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<style>
+    div.container {
+        display: inline-block;
+        margin-right: 20px; 
+        margin-bottom: 10px; 
+        width: 100px; 
+        vertical-align: top;
+    }
+    div.box {
+        border: 1px solid black;
+        background-size: contain;
+        background-repeat: repeat;
+    }
+    div.horizontal {
+        width: 100px;
+        height: 100px;
+    }
+    div.vertical {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <b>The CSS background images should be rotated respecting their EXIF orientation.</b>
+    <br>
+    <br>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-1-ul.jpg');"></div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-2-ur.jpg');"></div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-3-lr.jpg');"></div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-4-lol.jpg');"></div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="vertical box" style="background-image: url('resources/exif-orientation-5-lu.jpg');"></div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="vertical box" style="background-image: url('resources/exif-orientation-6-ru.jpg');"></div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div class="container">
+        <div class="vertical box" style="background-image: url('resources/exif-orientation-7-rl.jpg');"></div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="vertical box" style="background-image: url('resources/exif-orientation-8-llo.jpg');"></div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <br>
+    <div class="container">
+        <div class="horizontal box" style="background-image: url('resources/exif-orientation-9-u.jpg');"></div>
+        <br>Undefined (invalid value)
+    </div>
+</body>

Added: branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-border-image-expected.html (0 => 255030)


--- branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-border-image-expected.html	                        (rev 0)
+++ branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-border-image-expected.html	2020-01-23 21:44:43 UTC (rev 255030)
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<style>
+    div.container {
+        display: inline-block;
+        margin-right: 20px; 
+        margin-bottom: 10px; 
+        width: 100px; 
+        vertical-align: top;
+    }
+    div.box {
+        image-rendering: crisp-edges;
+    }
+    div.box.horizontal {
+        width: 102px;
+        height: 52px;
+    }
+    div.box.vertical {
+        width: 52px;
+        height: 102px;
+    }
+    img {
+        border: 1px solid black;
+    }
+</style>
+<body>
+    <b>The CSS border images should be rotated respecting their EXIF orientation.</b>
+    <br>
+    <br>
+    <div class="container">
+        <div class="horizontal box">
+            <img src=""
+        </div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="horizontal box">
+            <img src="" style="transform: scaleX(-1);">
+        </div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="horizontal box">
+            <img src="" style="transform: rotate(180deg);">
+        </div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="horizontal box">
+            <img src="" style="transform: scaleX(-1) rotate(180deg);">
+        </div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="vertical box">
+            <img src="" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);">
+        </div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="vertical box">
+            <img src="" style="transform: translate(-25px, 25px) rotate(90deg);">
+        </div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div class="container">
+        <div class="vertical box">
+            <img src="" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);">
+        </div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="vertical box">
+            <img src="" style="transform: translate(-25px, 25px) rotate(270deg);">
+        </div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <br>
+    <div class="container">
+        <div class="horizontal box">
+            <img src=""
+        </div>
+        <br>Undefined (invalid value)
+    </div>
+</body>
\ No newline at end of file

Added: branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-border-image.html (0 => 255030)


--- branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-border-image.html	                        (rev 0)
+++ branches/safari-609-branch/LayoutTests/fast/images/exif-orientation-border-image.html	2020-01-23 21:44:43 UTC (rev 255030)
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<style>
+    div.container {
+        display: inline-block;
+        margin-right: 20px; 
+        margin-bottom: 10px; 
+        width: 100px; 
+        vertical-align: top;
+    }
+    div.border {
+        border: 1px solid black;
+    }
+    div.border.horizontal {
+        width: 100px; 
+    }
+    div.border.vertical {
+        width: 50px; 
+    }
+    div.box {
+        border-image-slice: 10 fill;
+        border-width: 10px;
+        image-rendering: crisp-edges;
+    }
+    div.box.horizontal {
+        width: 80px;
+        height: 30px;
+    }
+    div.box.vertical {
+        width: 30px;
+        height: 80px;
+    }
+</style>
+<body>
+    <b>The CSS border images should be rotated respecting their EXIF orientation.</b>
+    <br>
+    <br>
+    <div class="container">
+        <div class="horizontal border">
+            <div class="horizontal box" style="border-image-source: url('resources/exif-orientation-1-ul.jpg');"></div>
+        </div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="horizontal border">
+            <div class="horizontal box" style="border-image-source: url('resources/exif-orientation-2-ur.jpg');"></div>
+        </div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="horizontal border">
+            <div class="horizontal box" style="border-image-source: url('resources/exif-orientation-3-lr.jpg');"></div>
+        </div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="horizontal border">
+            <div class="horizontal box" style="border-image-source: url('resources/exif-orientation-4-lol.jpg');"></div>
+        </div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="vertical border">
+            <div class="vertical box" style="border-image-source: url('resources/exif-orientation-5-lu.jpg');"></div>
+        </div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="vertical border">
+            <div class="vertical box" style="border-image-source: url('resources/exif-orientation-6-ru.jpg');"></div>
+        </div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div class="container">
+        <div class="vertical border">
+            <div class="vertical box" style="border-image-source: url('resources/exif-orientation-7-rl.jpg');"></div>
+        </div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="vertical border">
+            <div class="vertical box" style="border-image-source: url('resources/exif-orientation-8-llo.jpg');"></div>
+        </div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <br>
+    <div class="container">
+        <div class="horizontal border">
+            <div class="horizontal box" style="border-image-source: url('resources/exif-orientation-9-u.jpg');"></div>
+        </div>
+        <br>Undefined (invalid value)
+    </div>
+</body>

Modified: branches/safari-609-branch/Source/WebCore/ChangeLog (255029 => 255030)


--- branches/safari-609-branch/Source/WebCore/ChangeLog	2020-01-23 21:44:38 UTC (rev 255029)
+++ branches/safari-609-branch/Source/WebCore/ChangeLog	2020-01-23 21:44:43 UTC (rev 255030)
@@ -1,5 +1,89 @@
 2020-01-23  Russell Epstein  <[email protected]>
 
+        Cherry-pick r254841. rdar://problem/58807959
+
+    EXIF orientation is ignored for some CSS images
+    https://bugs.webkit.org/show_bug.cgi?id=203355
+    
+    Patch by Said Abou-Hallawa <[email protected]> on 2020-01-20
+    Reviewed by Simon Fraser.
+    
+    Source/WebCore:
+    
+    Unlike GraphicsContext::drawNativeImage(), GraphicsContext::drawPattern()
+    can't change the coordinates system before drawing the image to respect
+    the EXIF orientation. Drawing a pattern tries to fill the destination
+    rectangle with the image according to the GraphicsContext origin and the
+    direction of its axes. So we need to create temporary NativeImage with
+    respecting the EXIF orientation and then use it to draw the pattern.
+    
+    Tests: fast/images/exif-orientation-background-image-no-repeat.html
+           fast/images/exif-orientation-background-image-repeat.html
+           fast/images/exif-orientation-border-image.html
+    
+    * platform/graphics/BitmapImage.cpp:
+    (WebCore::BitmapImage::nativeImageForCurrentFrameRespectingOrientation):
+    (WebCore::BitmapImage::drawPattern):
+    * platform/graphics/BitmapImage.h:
+    * platform/graphics/Image.h:
+    (WebCore::Image::nativeImage):
+    (WebCore::Image::nativeImageForCurrentFrameRespectingOrientation):
+    (WebCore::Image::nativeImageOfSize):
+    * platform/graphics/ImageBuffer.h:
+    * platform/graphics/cg/GraphicsContextCG.cpp:
+    (WebCore::GraphicsContext::drawPattern):
+    * platform/graphics/cg/NativeImageCG.cpp:
+    (WebCore::drawNativeImage):
+    * rendering/style/NinePieceImage.cpp:
+    (WebCore::NinePieceImage::paint const):
+    
+    LayoutTests:
+    
+    * fast/images/exif-orientation-background-image-no-repeat-expected.html: Added.
+    * fast/images/exif-orientation-background-image-no-repeat.html: Added.
+    * fast/images/exif-orientation-background-image-repeat-expected.html: Added.
+    * fast/images/exif-orientation-background-image-repeat.html: Added.
+    * fast/images/exif-orientation-border-image-expected.html: Added.
+    * fast/images/exif-orientation-border-image.html: Added.
+    
+    git-svn-id: https://svn.webkit.org/repository/webkit/trunk@254841 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+    2020-01-20  Said Abou-Hallawa  <[email protected]>
+
+            EXIF orientation is ignored for some CSS images
+            https://bugs.webkit.org/show_bug.cgi?id=203355
+
+            Reviewed by Simon Fraser.
+
+            Unlike GraphicsContext::drawNativeImage(), GraphicsContext::drawPattern()
+            can't change the coordinates system before drawing the image to respect
+            the EXIF orientation. Drawing a pattern tries to fill the destination
+            rectangle with the image according to the GraphicsContext origin and the
+            direction of its axes. So we need to create temporary NativeImage with
+            respecting the EXIF orientation and then use it to draw the pattern.
+
+            Tests: fast/images/exif-orientation-background-image-no-repeat.html
+                   fast/images/exif-orientation-background-image-repeat.html
+                   fast/images/exif-orientation-border-image.html
+
+            * platform/graphics/BitmapImage.cpp:
+            (WebCore::BitmapImage::nativeImageForCurrentFrameRespectingOrientation):
+            (WebCore::BitmapImage::drawPattern):
+            * platform/graphics/BitmapImage.h:
+            * platform/graphics/Image.h:
+            (WebCore::Image::nativeImage):
+            (WebCore::Image::nativeImageForCurrentFrameRespectingOrientation):
+            (WebCore::Image::nativeImageOfSize):
+            * platform/graphics/ImageBuffer.h:
+            * platform/graphics/cg/GraphicsContextCG.cpp:
+            (WebCore::GraphicsContext::drawPattern):
+            * platform/graphics/cg/NativeImageCG.cpp:
+            (WebCore::drawNativeImage):
+            * rendering/style/NinePieceImage.cpp:
+            (WebCore::NinePieceImage::paint const):
+
+2020-01-23  Russell Epstein  <[email protected]>
+
         Cherry-pick r254814. rdar://problem/58816321
 
     Video sound sometimes keeps playing in page cache

Modified: branches/safari-609-branch/Source/WebCore/platform/graphics/BitmapImage.cpp (255029 => 255030)


--- branches/safari-609-branch/Source/WebCore/platform/graphics/BitmapImage.cpp	2020-01-23 21:44:38 UTC (rev 255029)
+++ branches/safari-609-branch/Source/WebCore/platform/graphics/BitmapImage.cpp	2020-01-23 21:44:43 UTC (rev 255030)
@@ -151,6 +151,28 @@
     return frameImageAtIndexCacheIfNeeded(m_currentFrame, SubsamplingLevel::Default, targetContext);
 }
 
+NativeImagePtr BitmapImage::nativeImageForCurrentFrameRespectingOrientation(const GraphicsContext* targetContext)
+{
+    auto image = nativeImageForCurrentFrame(targetContext);
+
+    ImageOrientation orientation = orientationForCurrentFrame();
+    if (orientation == ImageOrientation::None)
+        return image;
+
+    FloatRect rect = { FloatPoint(), size() };
+    auto buffer = ImageBuffer::create(rect.size(), Unaccelerated);
+    if (!buffer)
+        return image;
+
+    buffer->context().drawNativeImage(image, rect.size(), rect, rect, { orientation });
+
+#if USE(CG) || USE(DIRECT2D)
+    return ImageBuffer::sinkIntoNativeImage(WTFMove(buffer));
+#elif USE(CAIRO)
+    return buffer->nativeImage();
+#endif
+}
+
 #if USE(CG)
 NativeImagePtr BitmapImage::nativeImageOfSize(const IntSize& size, const GraphicsContext* targetContext)
 {
@@ -295,7 +317,7 @@
         if (m_currentFrameDecodingStatus == DecodingStatus::Invalid)
             m_source->destroyIncompleteDecodedData();
         
-        Image::drawPattern(ctxt, destRect, tileRect, transform, phase, spacing, options);
+        Image::drawPattern(ctxt, destRect, tileRect, transform, phase, spacing, { options, ImageOrientation::FromImage });
         m_currentFrameDecodingStatus = frameDecodingStatusAtIndex(m_currentFrame);
         return;
     }
@@ -310,7 +332,7 @@
         // Temporarily reset image observer, we don't want to receive any changeInRect() calls due to this relayout.
         setImageObserver(nullptr);
 
-        draw(buffer->context(), tileRect, tileRect, { options, DecodingMode::Synchronous, ImageOrientation::None });
+        draw(buffer->context(), tileRect, tileRect, { options, DecodingMode::Synchronous, ImageOrientation::FromImage });
 
         setImageObserver(observer);
         buffer->convertToLuminanceMask();
@@ -321,7 +343,7 @@
     }
 
     ctxt.setDrawLuminanceMask(false);
-    m_cachedImage->drawPattern(ctxt, destRect, tileRect, transform, phase, spacing, options);
+    m_cachedImage->drawPattern(ctxt, destRect, tileRect, transform, phase, spacing, { options, ImageOrientation::FromImage });
 }
 
 bool BitmapImage::shouldAnimate() const

Modified: branches/safari-609-branch/Source/WebCore/platform/graphics/BitmapImage.h (255029 => 255030)


--- branches/safari-609-branch/Source/WebCore/platform/graphics/BitmapImage.h	2020-01-23 21:44:38 UTC (rev 255029)
+++ branches/safari-609-branch/Source/WebCore/platform/graphics/BitmapImage.h	2020-01-23 21:44:43 UTC (rev 255030)
@@ -134,6 +134,7 @@
 
     WEBCORE_EXPORT NativeImagePtr nativeImage(const GraphicsContext* = nullptr) override;
     NativeImagePtr nativeImageForCurrentFrame(const GraphicsContext* = nullptr) override;
+    NativeImagePtr nativeImageForCurrentFrameRespectingOrientation(const GraphicsContext* = nullptr) override;
 #if USE(CG)
     NativeImagePtr nativeImageOfSize(const IntSize&, const GraphicsContext* = nullptr) override;
     Vector<NativeImagePtr> framesNativeImages();

Modified: branches/safari-609-branch/Source/WebCore/platform/graphics/Image.h (255029 => 255030)


--- branches/safari-609-branch/Source/WebCore/platform/graphics/Image.h	2020-01-23 21:44:38 UTC (rev 255029)
+++ branches/safari-609-branch/Source/WebCore/platform/graphics/Image.h	2020-01-23 21:44:43 UTC (rev 255030)
@@ -148,8 +148,9 @@
     enum TileRule { StretchTile, RoundTile, SpaceTile, RepeatTile };
 
     virtual NativeImagePtr nativeImage(const GraphicsContext* = nullptr) { return nullptr; }
+    virtual NativeImagePtr nativeImageForCurrentFrame(const GraphicsContext* = nullptr) { return nullptr; }
+    virtual NativeImagePtr nativeImageForCurrentFrameRespectingOrientation(const GraphicsContext* = nullptr) { return nullptr; }
     virtual NativeImagePtr nativeImageOfSize(const IntSize&, const GraphicsContext* = nullptr) { return nullptr; }
-    virtual NativeImagePtr nativeImageForCurrentFrame(const GraphicsContext* = nullptr) { return nullptr; }
 
     // Accessors for native image formats.
 

Modified: branches/safari-609-branch/Source/WebCore/platform/graphics/ImageBuffer.h (255029 => 255030)


--- branches/safari-609-branch/Source/WebCore/platform/graphics/ImageBuffer.h	2020-01-23 21:44:38 UTC (rev 255029)
+++ branches/safari-609-branch/Source/WebCore/platform/graphics/ImageBuffer.h	2020-01-23 21:44:43 UTC (rev 255030)
@@ -169,6 +169,7 @@
     friend class NamedImageGeneratedImage;
     friend class GradientImage;
     friend class CustomPaintImage;
+    friend class BitmapImage;
 
 private:
     ImageBufferData m_data;

Modified: branches/safari-609-branch/Source/WebCore/platform/graphics/cg/GraphicsContextCG.cpp (255029 => 255030)


--- branches/safari-609-branch/Source/WebCore/platform/graphics/cg/GraphicsContextCG.cpp	2020-01-23 21:44:38 UTC (rev 255029)
+++ branches/safari-609-branch/Source/WebCore/platform/graphics/cg/GraphicsContextCG.cpp	2020-01-23 21:44:43 UTC (rev 255030)
@@ -330,6 +330,13 @@
             subimageRect.setHeight(ceilf(subimageRect.height() + topPadding));
             adjustedDestRect.setHeight(subimageRect.height() / yScale);
 
+            // subimageRect is in logical coordinates. getSubimage() deals with none-oriented
+            // image. We need to convert subimageRect to physical image coordinates.
+            if (options.orientation() != ImageOrientation::None) {
+                if (auto transform = options.orientation().transformFromDefault(imageSize).inverse())
+                    subimageRect = transform.value().mapRect(subimageRect);
+            }
+
 #if CACHE_SUBIMAGES
             subImage = SubimageCacheWithTimer::getSubimage(subImage.get(), subimageRect);
 #else
@@ -440,7 +447,12 @@
     float adjustedX = phase.x() - destRect.x() + tileRect.x() * narrowPrecisionToFloat(patternTransform.a()); // We translated the context so that destRect.x() is the origin, so subtract it out.
     float adjustedY = destRect.height() - (phase.y() - destRect.y() + tileRect.y() * narrowPrecisionToFloat(patternTransform.d()) + scaledTileHeight);
 
-    auto tileImage = image.nativeImageForCurrentFrame();
+    NativeImagePtr tileImage;
+    if (options.orientation() == ImageOrientation::FromImage)
+        tileImage = image.nativeImageForCurrentFrameRespectingOrientation();
+    else
+        tileImage = image.nativeImageForCurrentFrame();
+
     float h = CGImageGetHeight(tileImage.get());
 
     RetainPtr<CGImageRef> subImage;

Modified: branches/safari-609-branch/Source/WebCore/platform/graphics/cg/NativeImageCG.cpp (255029 => 255030)


--- branches/safari-609-branch/Source/WebCore/platform/graphics/cg/NativeImageCG.cpp	2020-01-23 21:44:38 UTC (rev 255029)
+++ branches/safari-609-branch/Source/WebCore/platform/graphics/cg/NativeImageCG.cpp	2020-01-23 21:44:43 UTC (rev 255030)
@@ -73,6 +73,8 @@
 {
     // Subsampling may have given us an image that is smaller than size().
     IntSize subsampledImageSize = nativeImageSize(image);
+    if (options.orientation().usesWidthAsHeight())
+        subsampledImageSize = subsampledImageSize.transposedSize();
 
     // srcRect is in the coordinates of the unsubsampled image, so we have to map it to the subsampled image.
     FloatRect adjustedSrcRect = srcRect;

Modified: branches/safari-609-branch/Source/WebCore/rendering/style/NinePieceImage.cpp (255029 => 255030)


--- branches/safari-609-branch/Source/WebCore/rendering/style/NinePieceImage.cpp	2020-01-23 21:44:38 UTC (rev 255029)
+++ branches/safari-609-branch/Source/WebCore/rendering/style/NinePieceImage.cpp	2020-01-23 21:44:43 UTC (rev 255030)
@@ -223,13 +223,13 @@
             continue;
 
         if (isCornerPiece(piece)) {
-            graphicsContext.drawImage(*image, destinationRects[piece], sourceRects[piece], op);
+            graphicsContext.drawImage(*image, destinationRects[piece], sourceRects[piece], { op, ImageOrientation::FromImage });
             continue;
         }
 
         Image::TileRule hRule = isHorizontalPiece(piece) ? static_cast<Image::TileRule>(horizontalRule()) : Image::StretchTile;
         Image::TileRule vRule = isVerticalPiece(piece) ? static_cast<Image::TileRule>(verticalRule()) : Image::StretchTile;
-        graphicsContext.drawTiledImage(*image, destinationRects[piece], sourceRects[piece], tileScales[piece], hRule, vRule, op);
+        graphicsContext.drawTiledImage(*image, destinationRects[piece], sourceRects[piece], tileScales[piece], hRule, vRule, { op, ImageOrientation::FromImage });
     }
 }
 
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to