[CSS Masking/Background] Position property should be ignored when using repeat: space
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 19 Sep 2013 14:41:36 +0000 (14:41 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 19 Sep 2013 14:41:36 +0000 (14:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=120623

Source/WebCore:

The background/mask-position should be ignored when using repeat: space,
unless there is not enough space for two copies of the image. In that case,
only one image is placed and background/mask-position determines its position.

Patch by Andrei Parvu <parvu@adobe.com> on 2013-09-19
Reviewed by Dirk Schulze.

Test: css3/masking/mask-repeat-one-copy.html

* rendering/RenderBoxModelObject.cpp: Ignored position property if space value is positive, set no-repeat otherwise.
(WebCore::RenderBoxModelObject::calculateBackgroundImageGeometry):

LayoutTests:

Patch by Andrei Parvu <parvu@adobe.com> on 2013-09-19
Reviewed by Dirk Schulze.

* css3/masking/mask-repeat-one-copy-expected.html:
* css3/masking/mask-repeat-one-copy.html: Only one copy of the mask should be drawn, and background position should determine its position.
* css3/masking/mask-repeat-space-padding.html: Added a mask-position which should be ignored.

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

LayoutTests/ChangeLog
LayoutTests/css3/masking/mask-repeat-one-copy-expected.html [new file with mode: 0644]
LayoutTests/css3/masking/mask-repeat-one-copy.html [new file with mode: 0644]
LayoutTests/css3/masking/mask-repeat-space-padding.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBoxModelObject.cpp

index 2f788a5ad4f0b2c4afea3d23db8621fba466048c..b9d47965a37feb6380dd5000ccbce43485744e8a 100644 (file)
@@ -1,3 +1,14 @@
+2013-09-19  Andrei Parvu  <parvu@adobe.com>
+
+        [CSS Masking/Background] Position property should be ignored when using repeat: space
+        https://bugs.webkit.org/show_bug.cgi?id=120623
+
+        Reviewed by Dirk Schulze.
+
+        * css3/masking/mask-repeat-one-copy-expected.html:
+        * css3/masking/mask-repeat-one-copy.html: Only one copy of the mask should be drawn, and background position should determine its position.
+        * css3/masking/mask-repeat-space-padding.html: Added a mask-position which should be ignored.
+
 2013-09-19  Michał Pakuła vel Rutka  <m.pakula@samsung.com>
 
         Unreviewed EFL gardening.
diff --git a/LayoutTests/css3/masking/mask-repeat-one-copy-expected.html b/LayoutTests/css3/masking/mask-repeat-one-copy-expected.html
new file mode 100644 (file)
index 0000000..f0b8e2e
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 600px;
+                height: 500px;
+                background-color: green;
+            }
+            #front {
+                width: 400px;
+                height: 300px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url("resources/circle.png");
+                -webkit-mask-size: 400px 300px;
+                -webkit-mask-repeat: no-repeat;
+                -webkit-mask-origin: padding-box;
+                -webkit-mask-position: 100px 100px;
+                -webkit-mask-clip: padding-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+
diff --git a/LayoutTests/css3/masking/mask-repeat-one-copy.html b/LayoutTests/css3/masking/mask-repeat-one-copy.html
new file mode 100644 (file)
index 0000000..2dbd841
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 600px;
+                height: 500px;
+                background-color: green;
+            }
+            #front {
+                width: 400px;
+                height: 300px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url("resources/circle.png");
+                -webkit-mask-size: 400px 300px;
+                -webkit-mask-repeat: space;
+                -webkit-mask-origin: padding-box;
+                -webkit-mask-position: 100px 100px;
+                -webkit-mask-clip: padding-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+
index 6f73919c1c07fc9321982d1f72e974e1792ae6b5..1fde92fedbb3a3c7cfc644a9b4dc67073859e7d0 100644 (file)
@@ -17,6 +17,7 @@
                 -webkit-mask-size: 153px 127px;
                 -webkit-mask-repeat: space;
                 -webkit-mask-origin: padding-box;
+                -webkit-mask-position: 150px 150px; /* This should be igonored because of repeat: space */
                 -webkit-mask-clip: padding-box;
             }
         </style>
index 046eb89a4b3ac7353d2824c397f84ac7526bb50c..5cd6ca20cbf5829eeff9d3c35b4806ddc0de7f82 100644 (file)
@@ -1,3 +1,19 @@
+2013-09-19  Andrei Parvu  <parvu@adobe.com>
+
+        [CSS Masking/Background] Position property should be ignored when using repeat: space
+        https://bugs.webkit.org/show_bug.cgi?id=120623
+
+        The background/mask-position should be ignored when using repeat: space,
+        unless there is not enough space for two copies of the image. In that case,
+        only one image is placed and background/mask-position determines its position.
+
+        Reviewed by Dirk Schulze.
+
+        Test: css3/masking/mask-repeat-one-copy.html
+
+        * rendering/RenderBoxModelObject.cpp: Ignored position property if space value is positive, set no-repeat otherwise.
+        (WebCore::RenderBoxModelObject::calculateBackgroundImageGeometry):
+
 2013-09-19  Andreas Kling  <akling@apple.com>
 
         CTTE: EllipsisBox::renderer() should return RenderBlock&.
index 39bbda02fc5ea5a48847ceedab155a6399ac4d36..35b84e7da8f5668630cd06ad0a5f205ea43f9605 100644 (file)
@@ -1037,7 +1037,7 @@ bool RenderBoxModelObject::fixedBackgroundPaintsInLocalCoordinates() const
 static inline int getSpace(int areaSize, int tileSize)
 {
     int numberOfTiles = areaSize / tileSize;
-    int space = 0;
+    int space = -1;
 
     if (numberOfTiles > 1)
         space = roundedLayoutUnit((float)(areaSize - numberOfTiles * tileSize) / (numberOfTiles - 1));
@@ -1157,9 +1157,14 @@ void RenderBoxModelObject::calculateBackgroundImageGeometry(const RenderLayerMod
         int space = getSpace(positioningAreaSize.width(), geometry.tileSize().width());
         int actualWidth = geometry.tileSize().width() + space;
 
-        geometry.setSpaceSize(FloatSize(space, 0));
-        geometry.setPhaseX(actualWidth ? actualWidth - roundToInt(computedXPosition + left) % actualWidth : 0);
-    } else if (backgroundRepeatX == NoRepeatFill) {
+        if (space >= 0) {
+            computedXPosition = minimumValueForLength(Length(), availableWidth, &view(), true);
+            geometry.setSpaceSize(FloatSize(space, 0));
+            geometry.setPhaseX(actualWidth ? actualWidth - roundToInt(computedXPosition + left) % actualWidth : 0);
+        } else
+            backgroundRepeatX = NoRepeatFill;
+    }
+    if (backgroundRepeatX == NoRepeatFill) {
         int xOffset = fillLayer->backgroundXOrigin() == RightEdge ? availableWidth - computedXPosition : computedXPosition;
         geometry.setNoRepeatX(left + xOffset);
         geometry.setSpaceSize(FloatSize(0, geometry.spaceSize().height()));
@@ -1172,9 +1177,14 @@ void RenderBoxModelObject::calculateBackgroundImageGeometry(const RenderLayerMod
         int space = getSpace(positioningAreaSize.height(), geometry.tileSize().height());
         int actualHeight = geometry.tileSize().height() + space;
 
-        geometry.setSpaceSize(FloatSize(geometry.spaceSize().width(), space));
-        geometry.setPhaseY(actualHeight ? actualHeight - roundToInt(computedYPosition + top) % actualHeight : 0);
-    } else if (backgroundRepeatY == NoRepeatFill) {
+        if (space >= 0) {
+            computedYPosition = minimumValueForLength(Length(), availableHeight, &view(), true);
+            geometry.setSpaceSize(FloatSize(geometry.spaceSize().width(), space));
+            geometry.setPhaseY(actualHeight ? actualHeight - roundToInt(computedYPosition + top) % actualHeight : 0);
+        } else
+            backgroundRepeatY = NoRepeatFill;
+    }
+    if (backgroundRepeatY == NoRepeatFill) {
         int yOffset = fillLayer->backgroundYOrigin() == BottomEdge ? availableHeight - computedYPosition : computedYPosition;
         geometry.setNoRepeatY(top + yOffset);
         geometry.setSpaceSize(FloatSize(geometry.spaceSize().width(), 0));