[webkit-changes] [153582] trunk

Thu, 01 Aug 2013 06:03:28 -0700

Title: [153582] trunk
Revision
153582
Author
[email protected]
Date
2013-08-01 06:03:45 -0700 (Thu, 01 Aug 2013)

Log Message

mask-repeat: round bug

Source/WebCore:

Added the round functionality to -webkit-mask-repeat and background-repeat. The tile size of the
image is scaled so that the image can fit a whole number of times in the background.
https://bugs.webkit.org/show_bug.cgi?id=119080

Patch by Andrei Parvu <[email protected]> on 2013-08-01
Reviewed by Dirk Schulze.

Tests: css3/masking/mask-repeat-round-auto1.html
       css3/masking/mask-repeat-round-auto2.html
       css3/masking/mask-repeat-round-border.html
       css3/masking/mask-repeat-round-content.html
       css3/masking/mask-repeat-round-padding.html
       css3/background/background-repeat-round-auto1.html
       css3/background/background-repeat-round-auto2.html
       css3/background/background-repeat-round-border.html
       css3/background/background-repeat-round-content.html
       css3/background/background-repeat-round-padding.html

* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::calculateBackgroundImageGeometry):

LayoutTests:

Added tests for the -webkit-mask-repeat: round property.
https://bugs.webkit.org/show_bug.cgi?id=119080

Patch by Andrei Parvu <[email protected]> on 2013-08-01
Reviewed by Dirk Schulze.

* css3/masking/mask-repeat-round-auto1-expected.html: Added.
* css3/masking/mask-repeat-round-auto1.html: Added.
* css3/masking/mask-repeat-round-auto2-expected.html: Added.
* css3/masking/mask-repeat-round-auto2.html: Added.
* css3/masking/mask-repeat-round-border-expected.html: Added.
* css3/masking/mask-repeat-round-border.html: Added.
* css3/masking/mask-repeat-round-content-expected.html: Added.
* css3/masking/mask-repeat-round-content.html: Added.
* css3/masking/mask-repeat-round-padding-expected.html: Added.
* css3/masking/mask-repeat-round-padding.html: Added.
* css3/masking/resources/circle.png: Added.
* css3/background/background-repeat-round-auto1-expected.html: Added.
* css3/background/background-repeat-round-auto1.html: Added.
* css3/background/background-repeat-round-auto2-expected.html: Added.
* css3/background/background-repeat-round-auto2.html: Added.
* css3/background/background-repeat-round-border-expected.html: Added.
* css3/background/background-repeat-round-border.html: Added.
* css3/background/background-repeat-round-content-expected.html: Added.
* css3/background/background-repeat-round-content.html: Added.
* css3/background/background-repeat-round-padding-expected.html: Added.
* css3/background/background-repeat-round-padding.html: Added.
* css3/background/resources/circle.png: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (153581 => 153582)


--- trunk/LayoutTests/ChangeLog	2013-08-01 12:26:44 UTC (rev 153581)
+++ trunk/LayoutTests/ChangeLog	2013-08-01 13:03:45 UTC (rev 153582)
@@ -1,3 +1,36 @@
+2013-08-01  Andrei Parvu  <[email protected]>
+
+        mask-repeat: round bug
+
+        Added tests for the -webkit-mask-repeat: round property.
+        https://bugs.webkit.org/show_bug.cgi?id=119080
+
+        Reviewed by Dirk Schulze.
+
+        * css3/masking/mask-repeat-round-auto1-expected.html: Added.
+        * css3/masking/mask-repeat-round-auto1.html: Added.
+        * css3/masking/mask-repeat-round-auto2-expected.html: Added.
+        * css3/masking/mask-repeat-round-auto2.html: Added.
+        * css3/masking/mask-repeat-round-border-expected.html: Added.
+        * css3/masking/mask-repeat-round-border.html: Added.
+        * css3/masking/mask-repeat-round-content-expected.html: Added.
+        * css3/masking/mask-repeat-round-content.html: Added.
+        * css3/masking/mask-repeat-round-padding-expected.html: Added.
+        * css3/masking/mask-repeat-round-padding.html: Added.
+        * css3/masking/resources/circle.png: Added.
+        * css3/background/background-repeat-round-auto1-expected.html: Added.
+        * css3/background/background-repeat-round-auto1.html: Added.
+        * css3/background/background-repeat-round-auto2-expected.html: Added.
+        * css3/background/background-repeat-round-auto2.html: Added.
+        * css3/background/background-repeat-round-border-expected.html: Added.
+        * css3/background/background-repeat-round-border.html: Added.
+        * css3/background/background-repeat-round-content-expected.html: Added.
+        * css3/background/background-repeat-round-content.html: Added.
+        * css3/background/background-repeat-round-padding-expected.html: Added.
+        * css3/background/background-repeat-round-padding.html: Added.
+        * css3/background/resources/circle.png: Added.
+
+
 2013-08-01  Zoltan Arvai  <[email protected]>
 
         [Qt] Unreviewed expected pixel test result update after r153522.

Added: trunk/LayoutTests/css3/background/background-repeat-round-auto1-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-auto1-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-auto1-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: 100px 79px;
+                background-repeat: repeat;
+                background-origin: border-box;
+                background-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/background-repeat-round-auto1.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-auto1.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-auto1.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: 106px auto;
+                background-repeat: round repeat;
+                background-origin: border-box;
+                background-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/background-repeat-round-auto2-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-auto2-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-auto2-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: 106px 85px;
+                background-repeat: repeat;
+                background-origin: border-box;
+                background-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/background-repeat-round-auto2.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-auto2.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-auto2.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: auto 99px;
+                background-repeat: repeat round;
+                background-origin: border-box;
+                background-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/background-repeat-round-border-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-border-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-border-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: 100px 75px;
+                background-repeat: repeat;
+                background-origin: border-box;
+                background-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/background-repeat-round-border.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-border.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-border.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: 106px;
+                background-repeat: round;
+                background-origin: border-box;
+                background-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/background-repeat-round-content-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-content-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-content-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: 66px 40px;
+                background-repeat: repeat;
+                background-origin: content-box;
+                background-clip: content-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/background-repeat-round-content.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-content.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-content.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: 70px 40px;
+                background-repeat: round;
+                background-origin: content-box;
+                background-clip: content-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/background-repeat-round-padding-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-padding-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-padding-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: 100px 83px;
+                background-repeat: repeat;
+                background-origin: padding-box;
+                background-clip: padding-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/background-repeat-round-padding.html (0 => 153582)


--- trunk/LayoutTests/css3/background/background-repeat-round-padding.html	                        (rev 0)
+++ trunk/LayoutTests/css3/background/background-repeat-round-padding.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            div
+            {
+                width: 800px;
+                height: 400px;
+                padding: 50px;
+                border: 50px solid transparent;
+                background-image: url(resources/circle.png);
+                background-size: 100px 93px;
+                background-repeat: round;
+                background-origin: padding-box;
+                background-clip: padding-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div/>
+    </body>
+
+</html>
+

Added: trunk/LayoutTests/css3/background/resources/circle.png


(Binary files differ)
Property changes on: trunk/LayoutTests/css3/background/resources/circle.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-auto1-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-auto1-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-auto1-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: 100px 79px;
+                -webkit-mask-repeat: repeat;
+                -webkit-mask-origin: border-box;
+                -webkit-mask-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-auto1.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-auto1.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-auto1.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: 106px auto;
+                -webkit-mask-repeat: round repeat;
+                -webkit-mask-origin: border-box;
+                -webkit-mask-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-auto2-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-auto2-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-auto2-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: 106px 85px;
+                -webkit-mask-repeat: repeat;
+                -webkit-mask-origin: border-box;
+                -webkit-mask-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-auto2.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-auto2.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-auto2.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: auto 99px;
+                -webkit-mask-repeat: repeat round;
+                -webkit-mask-origin: border-box;
+                -webkit-mask-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-border-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-border-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-border-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: 100px 75px;
+                -webkit-mask-repeat: repeat;
+                -webkit-mask-origin: border-box;
+                -webkit-mask-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-border.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-border.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-border.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: 106px;
+                -webkit-mask-repeat: round;
+                -webkit-mask-origin: border-box;
+                -webkit-mask-clip: border-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-content-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-content-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-content-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: 66px 40px;
+                -webkit-mask-repeat: repeat;
+                -webkit-mask-origin: content-box;
+                -webkit-mask-clip: content-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-content.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-content.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-content.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: 70px 40px;
+                -webkit-mask-repeat: round;
+                -webkit-mask-origin: content-box;
+                -webkit-mask-clip: content-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-padding-expected.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-padding-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-padding-expected.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: 100px 83px;
+                -webkit-mask-repeat: repeat;
+                -webkit-mask-origin: padding-box;
+                -webkit-mask-clip: padding-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/mask-repeat-round-padding.html (0 => 153582)


--- trunk/LayoutTests/css3/masking/mask-repeat-round-padding.html	                        (rev 0)
+++ trunk/LayoutTests/css3/masking/mask-repeat-round-padding.html	2013-08-01 13:03:45 UTC (rev 153582)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            #back {
+                width: 1000px;
+                height: 600px;
+                background-color: green;
+            }
+            #front {
+                width: 800px;
+                height: 400px;
+                background-color: red;
+                border: 50px solid blue;
+                padding: 50px;
+                -webkit-mask-image: url(resources/circle.png);
+                -webkit-mask-size: 100px 93px;
+                -webkit-mask-repeat: round;
+                -webkit-mask-origin: padding-box;
+                -webkit-mask-clip: padding-box;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="back">
+            <div id="front" />
+        </div>
+    </body>
+</html>
+

Added: trunk/LayoutTests/css3/masking/resources/circle.png


(Binary files differ)
Property changes on: trunk/LayoutTests/css3/masking/resources/circle.png ___________________________________________________________________

Added: svn:mime-type

Modified: trunk/Source/WebCore/ChangeLog (153581 => 153582)


--- trunk/Source/WebCore/ChangeLog	2013-08-01 12:26:44 UTC (rev 153581)
+++ trunk/Source/WebCore/ChangeLog	2013-08-01 13:03:45 UTC (rev 153582)
@@ -1,3 +1,29 @@
+2013-08-01  Andrei Parvu  <[email protected]>
+
+        mask-repeat: round bug
+
+        Added the round functionality to -webkit-mask-repeat and background-repeat. The tile size of the
+        image is scaled so that the image can fit a whole number of times in the background.
+        https://bugs.webkit.org/show_bug.cgi?id=119080
+
+        Reviewed by Dirk Schulze.
+
+        Tests: css3/masking/mask-repeat-round-auto1.html
+               css3/masking/mask-repeat-round-auto2.html
+               css3/masking/mask-repeat-round-border.html
+               css3/masking/mask-repeat-round-content.html
+               css3/masking/mask-repeat-round-padding.html
+               css3/background/background-repeat-round-auto1.html
+               css3/background/background-repeat-round-auto2.html
+               css3/background/background-repeat-round-border.html
+               css3/background/background-repeat-round-content.html
+               css3/background/background-repeat-round-padding.html
+
+
+
+        * rendering/RenderBoxModelObject.cpp:
+        (WebCore::RenderBoxModelObject::calculateBackgroundImageGeometry):
+
 2013-08-01  Alexis Menard  <[email protected]>
 
         Reduce CSSProperty's StylePropertyMetadata memory footprint by half when used inside a ImmutableStylePropertySet.

Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (153581 => 153582)


--- trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp	2013-08-01 12:26:44 UTC (rev 153581)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp	2013-08-01 13:03:45 UTC (rev 153582)
@@ -1309,16 +1309,39 @@
     int availableHeight = positioningAreaSize.height() - geometry.tileSize().height();
 
     LayoutUnit computedXPosition = minimumValueForLength(fillLayer->xPosition(), availableWidth, renderView, true);
+    if (backgroundRepeatX == RoundFill && positioningAreaSize.width() > 0 && fillTileSize.width() > 0) {
+        int nrTiles = ceil((double)positioningAreaSize.width() / fillTileSize.width());
+
+        if (fillLayer->size().size.height().isAuto() && backgroundRepeatY != RoundFill)
+            fillTileSize.setHeight(fillTileSize.height() * positioningAreaSize.width() / (nrTiles * fillTileSize.width()));
+
+        fillTileSize.setWidth(positioningAreaSize.width() / nrTiles);
+        geometry.setTileSize(fillTileSize);
+        geometry.setPhaseX(geometry.tileSize().width() ? geometry.tileSize().width() - roundToInt(computedXPosition + left) % geometry.tileSize().width() : 0);
+    }
+
+    LayoutUnit computedYPosition = minimumValueForLength(fillLayer->yPosition(), availableHeight, renderView, true);
+    if (backgroundRepeatY == RoundFill && positioningAreaSize.height() > 0 && fillTileSize.height() > 0) {
+        int nrTiles = ceil((double)positioningAreaSize.height() / fillTileSize.height());
+
+        if (fillLayer->size().size.width().isAuto() && backgroundRepeatX != RoundFill)
+            fillTileSize.setWidth(fillTileSize.width() * positioningAreaSize.height() / (nrTiles * fillTileSize.height()));
+
+        fillTileSize.setHeight(positioningAreaSize.height() / nrTiles);
+        geometry.setTileSize(fillTileSize);
+        geometry.setPhaseY(geometry.tileSize().height() ? geometry.tileSize().height() - roundToInt(computedYPosition + top) % geometry.tileSize().height() : 0);
+    }
+
     if (backgroundRepeatX == RepeatFill)
         geometry.setPhaseX(geometry.tileSize().width() ? geometry.tileSize().width() - roundToInt(computedXPosition + left) % geometry.tileSize().width() : 0);
-    else {
+    else if (backgroundRepeatX == NoRepeatFill) {
         int xOffset = fillLayer->backgroundXOrigin() == RightEdge ? availableWidth - computedXPosition : computedXPosition;
         geometry.setNoRepeatX(left + xOffset);
     }
-    LayoutUnit computedYPosition = minimumValueForLength(fillLayer->yPosition(), availableHeight, renderView, true);
+
     if (backgroundRepeatY == RepeatFill)
         geometry.setPhaseY(geometry.tileSize().height() ? geometry.tileSize().height() - roundToInt(computedYPosition + top) % geometry.tileSize().height() : 0);
-    else {
+    else if (backgroundRepeatY == NoRepeatFill) {
         int yOffset = fillLayer->backgroundYOrigin() == BottomEdge ? availableHeight - computedYPosition : computedYPosition;
         geometry.setNoRepeatY(top + yOffset);
     }

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to