Title: [197618] trunk
Revision
197618
Author
simon.fra...@apple.com
Date
2016-03-05 16:01:17 -0800 (Sat, 05 Mar 2016)

Log Message

Add support for the object-position CSS property
https://bugs.webkit.org/show_bug.cgi?id=122811
rdar://problem/15836338

Reviewed by Sam Weinig.

Source/WebCore:

Take object-position into account when rendering replaced elements.
RenderReplaced::replacedContentRect() is the one place where we compute
the content rect for replaced elements.

Also return false from foregroundIsKnownToBeOpaqueInRect() if we have
any non-default object-position, as the foreground may no longer fill the box.

Tests: compositing/video/video-object-position.html
       fast/css/object-position/object-position-canvas.html
       fast/css/object-position/object-position-embed.html
       fast/css/object-position/object-position-img-svg.html
       fast/css/object-position/object-position-img.html
       fast/css/object-position/object-position-input-image.html
       fast/css/object-position/object-position-object.html
       fast/css/object-position/object-position-video-poster.html

* rendering/RenderImage.cpp:
(WebCore::RenderImage::foregroundIsKnownToBeOpaqueInRect):
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::replacedContentRect):

LayoutTests:

Various object-position tests.

* compositing/video/video-object-position-expected.txt: Added.
* compositing/video/video-object-position.html: Added.
* fast/css/object-position/object-position-embed-expected.html: Added.
* fast/css/object-position/object-position-embed.html: Added.
* fast/css/object-position/object-position-img-expected.html: Added.
* fast/css/object-position/object-position-img-svg-expected.html: Added.
* fast/css/object-position/object-position-img-svg.html: Added.
* fast/css/object-position/object-position-img.html: Added.
* fast/css/object-position/object-position-input-image-expected.html: Added.
* fast/css/object-position/object-position-input-image.html: Added.
* fast/css/object-position/object-position-object-expected.html: Added.
* fast/css/object-position/object-position-object.html: Added.
* fast/css/object-position/object-position-video-poster-expected.html: Added.
* fast/css/object-position/object-position-video-poster.html: Added.
* fast/css/object-position/resources/expected.css: Added.
* fast/css/object-position/resources/test.css: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (197617 => 197618)


--- trunk/LayoutTests/ChangeLog	2016-03-05 23:23:40 UTC (rev 197617)
+++ trunk/LayoutTests/ChangeLog	2016-03-06 00:01:17 UTC (rev 197618)
@@ -1,5 +1,32 @@
 2016-03-05  Simon Fraser  <simon.fra...@apple.com>
 
+        Add support for the object-position CSS property
+        https://bugs.webkit.org/show_bug.cgi?id=122811
+        rdar://problem/15836338
+
+        Reviewed by Sam Weinig.
+
+        Various object-position tests.
+
+        * compositing/video/video-object-position-expected.txt: Added.
+        * compositing/video/video-object-position.html: Added.
+        * fast/css/object-position/object-position-embed-expected.html: Added.
+        * fast/css/object-position/object-position-embed.html: Added.
+        * fast/css/object-position/object-position-img-expected.html: Added.
+        * fast/css/object-position/object-position-img-svg-expected.html: Added.
+        * fast/css/object-position/object-position-img-svg.html: Added.
+        * fast/css/object-position/object-position-img.html: Added.
+        * fast/css/object-position/object-position-input-image-expected.html: Added.
+        * fast/css/object-position/object-position-input-image.html: Added.
+        * fast/css/object-position/object-position-object-expected.html: Added.
+        * fast/css/object-position/object-position-object.html: Added.
+        * fast/css/object-position/object-position-video-poster-expected.html: Added.
+        * fast/css/object-position/object-position-video-poster.html: Added.
+        * fast/css/object-position/resources/expected.css: Added.
+        * fast/css/object-position/resources/test.css: Added.
+
+2016-03-05  Simon Fraser  <simon.fra...@apple.com>
+
         Add parsing support for object-position
         https://bugs.webkit.org/show_bug.cgi?id=155065
 

Added: trunk/LayoutTests/compositing/video/video-object-position-expected.txt (0 => 197618)


--- trunk/LayoutTests/compositing/video/video-object-position-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/compositing/video/video-object-position-expected.txt	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,89 @@
+        
+        
+(GraphicsLayer
+  (anchor 0.00 0.00)
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (children 10
+        (GraphicsLayer
+          (position 13.00 13.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents layer 2.00, 2.00 120.00 x 200.00)
+        )
+        (GraphicsLayer
+          (position 151.00 13.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents clipping layer 2.00, 2.00 120.00 x 200.00)
+          (contents layer 20.00, 10.00 120.00 x 200.00)
+        )
+        (GraphicsLayer
+          (position 289.00 13.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents layer 2.00, 2.00 120.00 x 200.00)
+        )
+        (GraphicsLayer
+          (position 427.00 13.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents clipping layer 2.00, 2.00 120.00 x 200.00)
+          (contents layer -10.00, -10.00 120.00 x 200.00)
+        )
+        (GraphicsLayer
+          (position 565.00 13.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents layer 2.00, 2.00 120.00 x 200.00)
+        )
+        (GraphicsLayer
+          (position 13.00 231.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents layer 2.00, 57.00 120.00 x 90.00)
+        )
+        (GraphicsLayer
+          (position 151.00 231.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents clipping layer 2.00, 2.00 120.00 x 200.00)
+          (contents layer 20.00, 10.00 120.00 x 90.00)
+        )
+        (GraphicsLayer
+          (position 289.00 231.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents layer 2.00, 30.00 120.00 x 90.00)
+        )
+        (GraphicsLayer
+          (position 427.00 231.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents clipping layer 2.00, 2.00 120.00 x 200.00)
+          (contents layer -10.00, 100.00 120.00 x 90.00)
+        )
+        (GraphicsLayer
+          (position 565.00 231.00)
+          (bounds 124.00 204.00)
+          (contentsOpaque 1)
+          (drawsContent 1)
+          (contents layer 2.00, 101.00 120.00 x 90.00)
+        )
+      )
+    )
+  )
+)
+

Added: trunk/LayoutTests/compositing/video/video-object-position.html (0 => 197618)


--- trunk/LayoutTests/compositing/video/video-object-position.html	                        (rev 0)
+++ trunk/LayoutTests/compositing/video/video-object-position.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    video {
+        width: 120px;
+        height: 200px;
+        margin: 5px;
+        border: 2px solid blue;
+        background-color: gray;
+    }
+
+    .group > *:nth-child(1) { object-position: center center; }
+    .group > *:nth-child(2) { object-position: 20px 10px; }
+    .group > *:nth-child(3) { object-position: 50% 25%; }
+    .group > *:nth-child(4) { object-position: bottom 10px right 10px; }
+    .group > *:nth-child(5) { object-position: bottom 10% right 30%; }
+</style>
+<script src=""
+<script>
+    if (window.testRunner) {
+        testRunner.waitUntilDone();
+        testRunner.dumpAsText();
+    }
+
+    function init()
+    {
+        setSrcByTagName("video", findMediaFile("video", "../../media/content/test"));
+
+        var totalCount = document.getElementsByTagName('video').length;
+        var count = totalCount;
+        document.addEventListener("canplaythrough", function () {
+            if (!--count) {
+                if (window.testRunner)
+                    setTimeout(function() {
+                        if (window.internals)
+                            document.getElementById('results').innerText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_CONTENT_LAYERS);
+                        testRunner.notifyDone();
+                    }, totalCount * 150);
+            }
+        }, true);
+    }
+</script>
+
+</head>
+<body _onload_="init();">
+    <div class="group">
+        <video style="object-fit: fill"></video>
+        <video style="object-fit: fill"></video>
+        <video style="object-fit: fill"></video>
+        <video style="object-fit: fill"></video>
+        <video style="object-fit: fill"></video>
+    </div>
+
+    <div class="group">
+        <video style="object-fit: contain"></video>
+        <video style="object-fit: contain"></video>
+        <video style="object-fit: contain"></video>
+        <video style="object-fit: contain"></video>
+        <video style="object-fit: contain"></video>
+    </div>
+<pre id="results"></pre>
+</body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-embed-expected.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-embed-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-embed-expected.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <link rel="stylesheet" href="" type="text/css">      
+</head>
+<body>
+    <div class="group">
+        <div><img src=""
+        <div><img src=""
+        <div><img src=""
+        <div><img src=""
+        <div><img src=""
+    </div>
+</body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-embed.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-embed.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-embed.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <link rel="stylesheet" href="" type="text/css">
+    <script>
+        // Disable plugins, because otherwise the "Test WebKit PlugIn" steals <embed>s referencing PNGs.
+        if (window.testRunner)
+            testRunner.setPluginsEnabled(false);
+    </script>
+</head>
+<body>
+    <div class="group">
+        <embed src=""
+        <embed src=""
+        <embed src=""
+        <embed src=""
+        <embed src=""
+    </div>
+</body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-img-expected.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-img-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-img-expected.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <style type="text/css">
+    .group > div {
+        display: inline-block;
+        overflow: hidden;
+        width: 100px;
+        height: 100px;
+        margin: 2px 10px;
+        border: 1px solid black;
+        background-color: gray;
+    }
+
+    .group img { display: block; }
+    .contain img { width: 100%; }
+    .contain > *:nth-child(1) * { margin-top: 25px; }
+    .contain > *:nth-child(2) * { margin-left: 20px; margin-top: 10px; }
+    .contain > *:nth-child(3) * { margin-top: 13px; }
+    .contain > *:nth-child(4) * { margin-left: -10px; margin-top: 40px; }
+    .contain > *:nth-child(5) * { margin-top: 45px; }
+
+    .fill img { height: 100%; width: 100%; }
+    .fill > *:nth-child(1) * { }
+    .fill > *:nth-child(2) * { margin-left: 20px; margin-top: 10px; }
+    .fill > *:nth-child(3) * { }
+    .fill > *:nth-child(4) * { margin-left: -10px; margin-top: -10px; }
+    .fill > *:nth-child(5) * { }
+    </style>
+  </head>
+  <body>
+
+  <div class="contain group">
+      <div><img src=""
+      <div><img src=""
+      <div><img src=""
+      <div><img src=""
+      <div><img src=""
+  </div>
+
+  <div class="fill group">
+      <div><img src=""
+      <div><img src=""
+      <div><img src=""
+      <div><img src=""
+      <div><img src=""
+  </div>
+
+  </body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-img-svg-expected.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-img-svg-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-img-svg-expected.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <link rel="stylesheet" href="" type="text/css">
+    <style type="text/css">
+    .group > div {
+        height: 72px;
+        width: 144px;
+    }
+    </style>
+  </head>
+  <body>
+
+    <div class="group">
+      <div><img src="" type="image/svg+xml"></div>
+      <div><img src="" type="image/svg+xml"></div>
+      <div><img src="" type="image/svg+xml"></div>
+      <div><img src="" type="image/svg+xml"></div>
+      <div><img src="" type="image/svg+xml"></div>
+    </div>
+
+    <div class="group">
+      <div><img src="" type="image/svg+xml"></div>
+      <div><img src="" type="image/svg+xml"></div>
+      <div><img src="" type="image/svg+xml"></div>
+      <div><img src="" type="image/svg+xml"></div>
+      <div><img src="" type="image/svg+xml"></div>
+    </div>
+
+  </body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-img-svg.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-img-svg.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-img-svg.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>object-fit on SVG images</title>
+    <style type="text/css">
+      img, embed, object, input, canvas, video {
+        height: 72px;
+        width: 144px;
+        margin: 2px 10px;
+        border: 1px solid black;
+        background-color: gray;
+      }
+
+      .group { object-fit: contain; }
+      .group > *:nth-child(1) { object-position: center center; }
+      .group > *:nth-child(2) { object-position: 20px 10px; }
+      .group > *:nth-child(3) { object-position: 50% 25%; }
+      .group > *:nth-child(4) { object-position: bottom 10px right 10px; }
+      .group > *:nth-child(5) { object-position: bottom 10% right 30%; }
+    </style>
+  </head>
+  <body>
+
+    <div class="group">
+      <img src="" type="image/svg+xml">
+      <img src="" type="image/svg+xml">
+      <img src="" type="image/svg+xml">
+      <img src="" type="image/svg+xml">
+      <img src="" type="image/svg+xml">
+    </div>
+
+    <div class="group">
+      <img src="" type="image/svg+xml">
+      <img src="" type="image/svg+xml">
+      <img src="" type="image/svg+xml">
+      <img src="" type="image/svg+xml">
+      <img src="" type="image/svg+xml">
+    </div>
+
+  </body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-img.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-img.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-img.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>object-position on images</title>
+    <style type="text/css">
+    img, embed, object, input, canvas, video {
+        width: 100px;
+        height: 100px;
+        margin: 2px 10px;
+        border: 1px solid black;
+        background-color: gray;
+    }
+
+    .contain > img { object-fit: contain; }
+    .fill > img { object-fit: fill; }
+
+    .group > *:nth-child(1) { object-position: center center; }
+    .group > *:nth-child(2) { object-position: 20px 10px; }
+    .group > *:nth-child(3) { object-position: 50% 25%; }
+    .group > *:nth-child(4) { object-position: bottom 10px right 10px; }
+    .group > *:nth-child(5) { object-position: bottom 10% right 30%; }
+
+    .group > *:nth-child(7) { }
+    </style>
+  </head>
+  <body>
+
+    <div class="contain group">
+      <img src=""
+      <img src=""
+      <img src=""
+      <img src=""
+      <img src=""
+    </div>
+
+    <div class="fill group">
+      <img src=""
+      <img src=""
+      <img src=""
+      <img src=""
+      <img src=""
+    </div>
+
+  </body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-input-image-expected.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-input-image-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-input-image-expected.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <link rel="stylesheet" href="" type="text/css">      
+</head>
+<body>
+    <div class="group">
+        <div><img src=""
+        <div><img src=""
+        <div><img src=""
+        <div><img src=""
+        <div><img src=""
+    </div>
+</body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-input-image.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-input-image.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-input-image.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <title>object-fit on input images</title>
+    <link rel="stylesheet" href="" type="text/css">
+</head>
+<body>
+    <div class="group">
+        <input type="image" src=""
+        <input type="image" src=""
+        <input type="image" src=""
+        <input type="image" src=""
+        <input type="image" src=""
+    </div>
+</body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-object-expected.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-object-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-object-expected.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <link rel="stylesheet" href="" type="text/css">      
+</head>
+<body>
+    <div class="group">
+        <div><img src=""
+        <div><img src=""
+        <div><img src=""
+        <div><img src=""
+        <div><img src=""
+    </div>
+</body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-object.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-object.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-object.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+      <link rel="stylesheet" href="" type="text/css">
+  </head>
+  <body>
+
+    <div class="group">
+      <object data=""
+      <object data=""
+      <object data=""
+      <object data=""
+      <object data=""
+    </div>
+
+  </body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-video-poster-expected.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-video-poster-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-video-poster-expected.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <link rel="stylesheet" href="" type="text/css">
+    <style>
+    .group video {
+        width: 100px;
+        height: 50px;
+    }
+    .group > *:nth-child(1) * { margin-top: 25px; }
+    .group > *:nth-child(2) * { margin-left: 20px; margin-top: 10px; }
+    .group > *:nth-child(3) * { margin-top: 13px; }
+    .group > *:nth-child(4) * { margin-left: -10px; margin-top: 40px; }
+    .group > *:nth-child(5) * { margin-top: 45px; }
+    </style>
+  </head>
+  <body>
+
+    <div class="group">
+      <div><video poster="../resources/circles-landscape.png"></video></div>
+      <div><video poster="../resources/circles-landscape.png"></video></div>
+      <div><video poster="../resources/circles-landscape.png"></video></div>
+      <div><video poster="../resources/circles-landscape.png"></video></div>
+      <div><video poster="../resources/circles-landscape.png"></video></div>
+    </div>
+
+  </body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/object-position-video-poster.html (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/object-position-video-poster.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/object-position-video-poster.html	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <link rel="stylesheet" href=""
+</head>
+<body>
+    <div class="group">
+        <video poster="../resources/circles-landscape.png"></video>
+        <video poster="../resources/circles-landscape.png"></video>
+        <video poster="../resources/circles-landscape.png"></video>
+        <video poster="../resources/circles-landscape.png"></video>
+        <video poster="../resources/circles-landscape.png"></video>
+    </div>
+</body>
+</html>

Added: trunk/LayoutTests/fast/css/object-position/resources/expected.css (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/resources/expected.css	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/resources/expected.css	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,19 @@
+.group > div {
+    display: inline-block;
+    overflow: hidden;
+    width: 100px;
+    height: 100px;
+    margin: 2px 10px;
+    border: 1px solid black;
+    background-color: gray;
+}
+
+.group img, .group canvas, .group video {
+    height: 100%; width: 100%;
+    display: block;
+}
+.group > *:nth-child(1) * { }
+.group > *:nth-child(2) * { margin-left: 20px; margin-top: 10px; }
+.group > *:nth-child(3) * { }
+.group > *:nth-child(4) * { margin-left: -10px; margin-top: -10px; }
+.group > *:nth-child(5) * { }

Added: trunk/LayoutTests/fast/css/object-position/resources/test.css (0 => 197618)


--- trunk/LayoutTests/fast/css/object-position/resources/test.css	                        (rev 0)
+++ trunk/LayoutTests/fast/css/object-position/resources/test.css	2016-03-06 00:01:17 UTC (rev 197618)
@@ -0,0 +1,15 @@
+
+img, embed, object, input, canvas, video {
+    width: 100px;
+    height: 100px;
+    margin: 2px 10px;
+    border: 1px solid black;
+    background-color: gray;
+}
+
+.group { object-fit: contain; }
+.group > *:nth-child(1) { object-position: center center; }
+.group > *:nth-child(2) { object-position: 20px 10px; }
+.group > *:nth-child(3) { object-position: 50% 25%; }
+.group > *:nth-child(4) { object-position: bottom 10px right 10px; }
+.group > *:nth-child(5) { object-position: bottom 10% right 30%; }

Modified: trunk/Source/WebCore/ChangeLog (197617 => 197618)


--- trunk/Source/WebCore/ChangeLog	2016-03-05 23:23:40 UTC (rev 197617)
+++ trunk/Source/WebCore/ChangeLog	2016-03-06 00:01:17 UTC (rev 197618)
@@ -1,5 +1,34 @@
 2016-03-05  Simon Fraser  <simon.fra...@apple.com>
 
+        Add support for the object-position CSS property
+        https://bugs.webkit.org/show_bug.cgi?id=122811
+        rdar://problem/15836338
+
+        Reviewed by Sam Weinig.
+
+        Take object-position into account when rendering replaced elements.
+        RenderReplaced::replacedContentRect() is the one place where we compute
+        the content rect for replaced elements.
+
+        Also return false from foregroundIsKnownToBeOpaqueInRect() if we have
+        any non-default object-position, as the foreground may no longer fill the box.
+
+        Tests: compositing/video/video-object-position.html
+               fast/css/object-position/object-position-canvas.html
+               fast/css/object-position/object-position-embed.html
+               fast/css/object-position/object-position-img-svg.html
+               fast/css/object-position/object-position-img.html
+               fast/css/object-position/object-position-input-image.html
+               fast/css/object-position/object-position-object.html
+               fast/css/object-position/object-position-video-poster.html
+
+        * rendering/RenderImage.cpp:
+        (WebCore::RenderImage::foregroundIsKnownToBeOpaqueInRect):
+        * rendering/RenderReplaced.cpp:
+        (WebCore::RenderReplaced::replacedContentRect):
+
+2016-03-05  Simon Fraser  <simon.fra...@apple.com>
+
         Add parsing support for object-position
         https://bugs.webkit.org/show_bug.cgi?id=155065
 

Modified: trunk/Source/WebCore/rendering/RenderImage.cpp (197617 => 197618)


--- trunk/Source/WebCore/rendering/RenderImage.cpp	2016-03-05 23:23:40 UTC (rev 197617)
+++ trunk/Source/WebCore/rendering/RenderImage.cpp	2016-03-06 00:01:17 UTC (rev 197618)
@@ -584,6 +584,11 @@
     ObjectFit objectFit = style().objectFit();
     if (objectFit != ObjectFitFill && objectFit != ObjectFitCover)
         return false;
+
+    LengthPoint objectPosition = style().objectPosition();
+    if (objectPosition != RenderStyle::initialObjectPosition())
+        return false;
+
     // Check for image with alpha.
     return imageResource().cachedImage() && imageResource().cachedImage()->currentFrameKnownToBeOpaque(this);
 }

Modified: trunk/Source/WebCore/rendering/RenderReplaced.cpp (197617 => 197618)


--- trunk/Source/WebCore/rendering/RenderReplaced.cpp	2016-03-05 23:23:40 UTC (rev 197617)
+++ trunk/Source/WebCore/rendering/RenderReplaced.cpp	2016-03-06 00:01:17 UTC (rev 197618)
@@ -338,8 +338,6 @@
         return contentRect;
 
     ObjectFit objectFit = style().objectFit();
-    if (objectFit == ObjectFitFill)
-        return contentRect;
 
     LayoutRect finalRect = contentRect;
     switch (objectFit) {
@@ -354,13 +352,14 @@
         finalRect.setSize(intrinsicSize);
         break;
     case ObjectFitFill:
-        ASSERT_NOT_REACHED();
+        break;
     }
 
-    // FIXME: This is where object-position should be taken into account, but since it's not
-    // implemented yet, assume the initial value of "50% 50%".
-    LayoutUnit xOffset = (contentRect.width() - finalRect.width()) / 2;
-    LayoutUnit yOffset = (contentRect.height() - finalRect.height()) / 2;
+    LengthPoint objectPosition = style().objectPosition();
+
+    LayoutUnit xOffset = minimumValueForLength(objectPosition.x(), contentRect.width() - finalRect.width());
+    LayoutUnit yOffset = minimumValueForLength(objectPosition.y(), contentRect.height() - finalRect.height());
+
     finalRect.move(xOffset, yOffset);
 
     return finalRect;
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to