[CSS Shapes] New positioning model: support for rounded rectangle shape-outside
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 23 Jul 2013 22:20:55 +0000 (22:20 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 23 Jul 2013 22:20:55 +0000 (22:20 +0000)
https://bugs.webkit.org/show_bug.cgi?id=118081

Patch by Bem Jones-Bey <bjonesbe@adobe.com> on 2013-07-23
Reviewed by Dean Jackson.

Update the shape-outside rounded rectangle tests and import them from
the CSS WG's repository. They have been moved to the CSS WG repository
so they can be part of the spec test suite for CSS Shapes.

* TestExpectations: Remove skipping for tests that have been replaced.
* csswg/submitted/shapes/shape-outside/resources/rounded-rectangle.js: Added.
(ellipseXIntercept):
(scanConvertRoundedRectangleOutside):
(genLeftRightRoundedRectFloatShapeOutsideRefTest):
(genLeftRoundedRectFloatShapeOutsideRefTest):
(genRightRoundedRectFloatShapeOutsideRefTest):
* csswg/submitted/shapes/shape-outside/resources/subpixel-utils.js: Added.
(SubPixelLayout):
(SubPixelLayout.):
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html: Added.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html: Added.
* csswg/submitted/shapes/shape-outside/w3c-import.log:

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

15 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/csswg/submitted/shapes/shape-outside/resources/rounded-rectangle.js [new file with mode: 0644]
LayoutTests/csswg/submitted/shapes/shape-outside/resources/subpixel-utils.js [new file with mode: 0644]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001-expected.html [moved from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001-expected.html with 75% similarity]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html [moved from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001.html with 72% similarity]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002-expected.html [moved from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002-expected.html with 76% similarity]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html [moved from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002.html with 72% similarity]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003-expected.html [moved from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003-expected.html with 76% similarity]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html [moved from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003.html with 73% similarity]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html [new file with mode: 0644]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html [new file with mode: 0644]
LayoutTests/csswg/submitted/shapes/shape-outside/w3c-import.log
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-rounded-rectangle-large-radius-expected.html [deleted file]
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-rounded-rectangle-large-radius.html [deleted file]

index b248c07..c4e6a1a 100644 (file)
@@ -1,3 +1,34 @@
+2013-07-23  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [CSS Shapes] New positioning model: support for rounded rectangle shape-outside
+        https://bugs.webkit.org/show_bug.cgi?id=118081
+
+        Reviewed by Dean Jackson.
+
+        Update the shape-outside rounded rectangle tests and import them from
+        the CSS WG's repository. They have been moved to the CSS WG repository
+        so they can be part of the spec test suite for CSS Shapes.
+
+        * TestExpectations: Remove skipping for tests that have been replaced.
+        * csswg/submitted/shapes/shape-outside/resources/rounded-rectangle.js: Added.
+        (ellipseXIntercept):
+        (scanConvertRoundedRectangleOutside):
+        (genLeftRightRoundedRectFloatShapeOutsideRefTest):
+        (genLeftRoundedRectFloatShapeOutsideRefTest):
+        (genRightRoundedRectFloatShapeOutsideRefTest):
+        * csswg/submitted/shapes/shape-outside/resources/subpixel-utils.js: Added.
+        (SubPixelLayout):
+        (SubPixelLayout.):
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001-expected.html.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001.html.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002-expected.html.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002.html.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003-expected.html.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003.html.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html: Added.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html: Added.
+        * csswg/submitted/shapes/shape-outside/w3c-import.log:
+
 2013-07-23  Zalan Bujtas  <zalan@apple.com>
 
         REGRESSION(r152313): Links in certain twitter postings don't warp correctly on page
index 82906a0..100a580 100644 (file)
@@ -37,11 +37,6 @@ webkit.org/b/118086 fast/shapes/shape-outside-floats/shape-outside-floats-simple
 webkit.org/b/118083 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-inset-rectangle.html [ Skip ]
 webkit.org/b/118083 fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle.html [ Skip ]
 
-webkit.org/b/118081 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001.html [ Skip ]
-webkit.org/b/118081 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002.html [ Skip ]
-webkit.org/b/118081 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003.html [ Skip ]
-webkit.org/b/118081 fast/shapes/shape-outside-floats/shape-outside-floats-rounded-rectangle-large-radius.html [ Skip ]
-
 webkit.org/b/118087 fast/shapes/shape-outside-floats/shape-outside-floats-stacked.html [ Skip ]
 webkit.org/b/118087 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html [ Skip ]
 
diff --git a/LayoutTests/csswg/submitted/shapes/shape-outside/resources/rounded-rectangle.js b/LayoutTests/csswg/submitted/shapes/shape-outside/resources/rounded-rectangle.js
new file mode 100644 (file)
index 0000000..0dd3563
--- /dev/null
@@ -0,0 +1,60 @@
+function ellipseXIntercept(yi, rx, ry) 
+{
+    return rx * Math.sqrt(1 - (yi * yi) / (ry * ry));
+}
+
+function scanConvertRoundedRectangleOutside(r, height, lineHeight)
+{
+    var intervals = [];
+
+    for (var y = 0; y < height; y += lineHeight) {
+        if (y + lineHeight <= r.y || y >= r.y + r.height)
+            continue;
+
+        if (y + lineHeight < r.y + r.ry) {
+            // within the upper rounded corner of the rectangle
+            var dx = ellipseXIntercept(y + lineHeight - r.y - r.ry, r.rx, r.ry);
+            intervals.push( { y: y, left: r.x + r.rx - dx, right: r.x + r.width - r.rx + dx} );
+        }
+        else if (y > r.y + r.height - r.ry) {
+            // within the lower rounded corner of the rectangle
+            var dx = ellipseXIntercept(y - (r.y + r.height - r.ry), r.rx, r.ry);
+            intervals.push( { y: y, left: r.x + r.rx - dx, right: r.x + r.width - r.rx + dx} );
+        }
+        else // within the rectangle's vertical edges
+            intervals.push( {y: y, left: r.x, right: r.x + r.width} );
+    }
+
+    return intervals;
+}
+
+function genLeftRightRoundedRectFloatShapeOutsideRefTest(args)
+{
+    genLeftRoundedRectFloatShapeOutsideRefTest(args);
+    genRightRoundedRectFloatShapeOutsideRefTest(args);
+}
+
+function genLeftRoundedRectFloatShapeOutsideRefTest(args)
+{
+    var leftRoundedRect = args.roundedRect;
+    var leftRoundedRectIntervals = scanConvertRoundedRectangleOutside(leftRoundedRect, args.containerHeight, args.lineHeight);
+    var leftFloatDivs = leftRoundedRectIntervals.map(function(interval) { 
+        var width = SubPixelLayout.snapToLayoutUnit(interval.right);
+        var cls = "left-" + args.floatElementClassSuffix;
+        return '<div class="' + cls + '" style="width:' + width + 'px"></div>'; 
+    });
+    document.getElementById("left-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', leftFloatDivs.join("\n"));
+}
+
+function genRightRoundedRectFloatShapeOutsideRefTest(args)
+{
+    var rightRoundedRect = Object.create(args.roundedRect);
+    rightRoundedRect.x = args.containerWidth - args.roundedRect.width;
+    var rightRoundedRectIntervals = scanConvertRoundedRectangleOutside(rightRoundedRect, args.containerHeight, args.lineHeight);
+    var rightFloatDivs = rightRoundedRectIntervals.map(function(interval) { 
+        var width = args.containerWidth - SubPixelLayout.snapToLayoutUnit(interval.left);
+        var cls = "right-" + args.floatElementClassSuffix;
+        return '<div class="' + cls + '" style="width:' + width + 'px"></div>'; 
+    });
+    document.getElementById("right-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', rightFloatDivs.join("\n"));
+}
diff --git a/LayoutTests/csswg/submitted/shapes/shape-outside/resources/subpixel-utils.js b/LayoutTests/csswg/submitted/shapes/shape-outside/resources/subpixel-utils.js
new file mode 100644 (file)
index 0000000..50bf098
--- /dev/null
@@ -0,0 +1,26 @@
+var SubPixelLayout = (function() {
+    var enabled = undefined;
+
+    function isEnabled()
+    {
+        if (enabled === undefined) {
+            var elem = document.createElement('div');
+            elem.style.setProperty('width', '4.5px');
+            document.body.appendChild(elem);
+            var bounds = elem.getBoundingClientRect();
+            enabled = (bounds.width != Math.floor(bounds.width));
+            document.body.removeChild(elem);
+        }
+        return enabled;
+    }
+
+    return {
+        isEnabled: isEnabled,
+        snapToLayoutUnit: function(f) {
+            return isEnabled() ? Math.floor(f * 64) / 64 : Math.floor(f); // as in LayoutUnit(f).toFloat()
+        },
+        ceilSnapToLayoutUnit: function(f) {
+            return isEnabled() ? Math.ceil(f * 64) / 64 : Math.ceil(f); // see ceiledLayoutUnit(), LayoutUnit.h
+        }
+    }
+}());
\ No newline at end of file
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html>
-<head>
+<title>shape-outside-floats-rounded-rectangle-001-reference.html</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<meta name="flags" content="ahem dom">
 <style>
 .container {
     position: relative;
     font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
     width: 500px;
     height: 200px; 
     border: 1px solid black;    
@@ -15,7 +17,6 @@
     height: 160px;
     border-radius: 60px;
     border: 1px solid blue;
-    margin: -1px; /* shape-outside layout is unaffected by the border */
 }
 
 #left-rounded-rect-outline {
@@ -27,7 +28,7 @@
 #right-rounded-rect-outline {
     position: absolute;
     top: 20px;
-    left: 180px;
+    right: 0px;
 }
 
 .left-rounded-rect-float-line {
@@ -43,7 +44,7 @@
 }
 </style>
 
-<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
+<body>
 <p>The black squares should trace the right side of the rounded rectangle's blue outline.</p>
 <div class="container">
 X<br/>
@@ -77,11 +78,13 @@ X
 </div>
 </body>
 
-<script src="../resources/rounded-rectangle.js"></script>
-<script src="../resources/subpixel-utils.js"></script>
+<script src="resources/rounded-rectangle.js"></script>
+<script src="resources/subpixel-utils.js"></script>
 <script>
+// Note that the border must be added into the width to account for its affect
+// on float positioning.
 genLeftRightRoundedRectFloatShapeOutsideRefTest({
-    roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 60, ry: 60},
+    roundedRect: {x: 0, y: 20, width: 321, height: 160, rx: 60, ry: 60},
     containerWidth: 500, 
     containerHeight: 200,
     lineHeight: 20,
@@ -89,7 +92,3 @@ genLeftRightRoundedRectFloatShapeOutsideRefTest({
     insertElementIdSuffix: "rounded-rect-outline"
 });
 </script>
-
-</html>
-
-
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
-<html>
-<head>
+<title>shape-outside-floats-rounded-rectangle-001.html</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
+<link rel="match" href="shape-outside-floats-rounded-rectangle-001-reference.html">
+<meta name="flags" content="ahem">
 <script>
     if (window.internals)
         window.internals.settings.setCSSShapesEnabled(true);
@@ -8,6 +11,7 @@
 <style>
 .container {
     font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
     width: 500px;
     height: 200px; 
     border: 1px solid black;
@@ -22,7 +26,7 @@
 }
 </style>
 
-<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
+<body>
 <p>The black squares should trace the right side of the rounded rectangle's blue outline.</p>
 <div class="container">
 X<br/>
@@ -53,6 +57,3 @@ X<br/>
 X
 </div>
 </body>
-</html>
-
-
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html>
-<head>
+<title>shape-outside-floats-rounded-rectangle-002-reference.html</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<meta name="flags" content="ahem dom">
 <style>
 .container {
     position: relative;
     font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
     width: 500px;
     height: 200px; 
     border: 1px solid black;    
@@ -15,7 +17,6 @@
     height: 160px;
     border-radius: 80px;
     border: 1px solid blue;
-    margin: -1px; /* shape-outside layout is unaffected by the border */
 }
 
 #left-rounded-rect-circle-outline {
@@ -27,7 +28,7 @@
 #right-rounded-rect-circle-outline {
     position: absolute;
     top: 20px;
-    left: 340px;
+    right: 0px;
 }
 
 .left-rounded-rect-circle-float-line {
@@ -43,7 +44,7 @@
 }
 </style>
 
-<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
+<body>
 <p>The black squares should trace the right side of the circle's blue outline.</p>
 <div class="container">
 X<br/>
@@ -77,11 +78,13 @@ X
 </div>
 </body>
 
-<script src="../resources/rounded-rectangle.js"></script>
-<script src="../resources/subpixel-utils.js"></script>
+<script src="resources/rounded-rectangle.js"></script>
+<script src="resources/subpixel-utils.js"></script>
 <script>
+// Note that the border must be added into the width to account for its affect
+// on float positioning.
 genLeftRightRoundedRectFloatShapeOutsideRefTest({
-    roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
+    roundedRect: {x: 0, y: 20, width: 161, height: 160, rx: 80, ry: 80},
     containerWidth: 500, 
     containerHeight: 200,
     lineHeight: 20,
@@ -89,7 +92,3 @@ genLeftRightRoundedRectFloatShapeOutsideRefTest({
     insertElementIdSuffix: "rounded-rect-circle-outline"
 });
 </script>
-
-</html>
-
-
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
-<html>
-<head>
+<title>shape-outside-floats-rounded-rectangle-002.html</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
+<link rel="match" href="shape-outside-floats-rounded-rectangle-002-reference.html">
+<meta name="flags" content="ahem">
 <script>
     if (window.internals)
         window.internals.settings.setCSSShapesEnabled(true);
@@ -8,6 +11,7 @@
 <style>
 .container {
     font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
     width: 500px;
     height: 200px; 
     border: 1px solid black;
@@ -22,7 +26,7 @@
 }
 </style>
 
-<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
+<body>
 <p>The black squares should trace the right side of the circle's blue outline.</p>
 <div class="container">
 X<br/>
@@ -53,4 +57,3 @@ X<br/>
 X
 </div>
 </body>
-</html>
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html>
-<head>
+<title>shape-outside-floats-rounded-rectangle-003-reference.html</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<meta name="flags" content="ahem dom">
 <style>
 .container {
     position: relative;
     font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
     width: 500px;
     height: 200px; 
     border: 1px solid black;    
@@ -15,7 +17,6 @@
     height: 160px;
     border-radius: 160px / 80px;
     border: 1px solid blue;
-    margin: -1px; /* shape-outside layout is unaffected by the border */
 }
 
 #left-rounded-rect-ellipse-outline {
@@ -27,7 +28,7 @@
 #right-rounded-rect-ellipse-outline {
     position: absolute;
     top: 20px;
-    left: 180px;
+    right: 0px;
 }
 
 .left-rounded-rect-ellipse-float-line {
@@ -43,7 +44,7 @@
 }
 </style>
 
-<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
+<body>
 <p>The black squares should trace the right side of the ellipse's blue outline.</p>
 <div class="container">
 X<br/>
@@ -77,11 +78,13 @@ X
 </div>
 </body>
 
-<script src="../resources/rounded-rectangle.js"></script>
-<script src="../resources/subpixel-utils.js"></script>
+<script src="resources/rounded-rectangle.js"></script>
+<script src="resources/subpixel-utils.js"></script>
 <script>
+// Note that the border must be added into the width to account for its affect
+// on float positioning.
 genLeftRightRoundedRectFloatShapeOutsideRefTest({
-    roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80},
+    roundedRect: {x: 0, y: 20, width: 321, height: 160, rx: 160, ry: 80},
     containerWidth: 500, 
     containerHeight: 200,
     lineHeight: 20,
@@ -89,7 +92,3 @@ genLeftRightRoundedRectFloatShapeOutsideRefTest({
     insertElementIdSuffix: "rounded-rect-ellipse-outline"
 });
 </script>
-
-</html>
-
-
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
-<html>
-<head>
+<title>shape-outside-floats-rounded-rectangle-003.html</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
+<link rel="match" href="shape-outside-floats-rounded-rectangle-003-reference.html">
+<meta name="flags" content="ahem">
 <script>
     if (window.internals)
         window.internals.settings.setCSSShapesEnabled(true);
@@ -8,6 +11,7 @@
 <style>
 .container {
     font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
     width: 500px;
     height: 200px; 
     border: 1px solid black;
@@ -22,7 +26,7 @@
 }
 </style>
 
-<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
+<body>
 <p>The black squares should trace the right side of the ellipse's blue outline.</p>
 <div class="container">
 X<br/>
@@ -53,4 +57,3 @@ X<br/>
 X
 </div>
 </body>
-</html>
diff --git a/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html b/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html
new file mode 100644 (file)
index 0000000..d00b524
--- /dev/null
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<title>shape-outside-floats-rounded-rectangle-004-reference.html</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<meta name="flags" content="ahem dom">
+<style>
+.container {
+    position: relative;
+    font: 10px/1 Ahem, sans-serif;
+    width: 80px;
+    height: 40px;
+    border: 1px solid black;
+    margin: 5px;
+}
+.rounded-rect {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 40px;
+    height: 40px;
+    border: 1px solid blue;
+    border-radius: 50%;
+}
+.left-rounded-rect-float-line {
+    float: left;
+    clear: left;
+    height: 10px;
+}
+</style>
+<body>
+    <div class="container">
+        <div id="left-fixed-units" class="rounded-rect"></div>
+        X<br/>
+        X<br/>
+        X<br/>
+        X
+    </div>
+    <div class="container">
+        <div id="left-relative-units" class="rounded-rect"></div>
+        X<br/>
+        X<br/>
+        X<br/>
+        X
+    </div>
+    <div class="container">
+        <div id="left-different-units" class="rounded-rect"></div>
+        X<br/>
+        X<br/>
+        X<br/>
+        X
+    </div>
+    <div class="container">
+        <div id="left-edge-case" class="rounded-rect"></div>
+        X<br/>
+        X<br/>
+        X<br/>
+        X
+    </div>
+    <script src="resources/rounded-rectangle.js"></script>
+    <script src="resources/subpixel-utils.js"></script>
+    <script>
+    // Note that the border must be added into the width to account for its
+    // affect on float positioning.
+    genLeftRoundedRectFloatShapeOutsideRefTest({
+        roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
+        containerWidth: 80, 
+        containerHeight: 40,
+        lineHeight: 10,
+        floatElementClassSuffix: "rounded-rect-float-line",
+        insertElementIdSuffix: "fixed-units"
+    });
+    genLeftRoundedRectFloatShapeOutsideRefTest({
+        roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
+        containerWidth: 80, 
+        containerHeight: 40,
+        lineHeight: 10,
+        floatElementClassSuffix: "rounded-rect-float-line",
+        insertElementIdSuffix: "relative-units"
+    });
+    genLeftRoundedRectFloatShapeOutsideRefTest({
+        roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
+        containerWidth: 80, 
+        containerHeight: 40,
+        lineHeight: 10,
+        floatElementClassSuffix: "rounded-rect-float-line",
+        insertElementIdSuffix: "different-units"
+    });
+    genLeftRoundedRectFloatShapeOutsideRefTest({
+        roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
+        containerWidth: 80, 
+        containerHeight: 40,
+        lineHeight: 10,
+        floatElementClassSuffix: "rounded-rect-float-line",
+        insertElementIdSuffix: "edge-case"
+    });
+    </script>
+</body>
diff --git a/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html b/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html
new file mode 100644 (file)
index 0000000..45d0a74
--- /dev/null
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<title>CSS Test: rounded rectangle shape-outside on floats with clamped radii values</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
+<link rel="match" href="shape-outside-floats-rounded-rectangle-004-reference.html">
+<meta name="flags" content="ahem">
+<script>
+// This is required to run the tests in WebKit's test infrastructure.
+if (window.internals)
+    window.internals.settings.setCSSShapesEnabled(true);
+</script>
+<style>
+.container {
+    font: 10px/1 Ahem, sans-serif;
+    width: 80px;
+    height: 40px;
+    border: 1px solid black;
+    margin: 5px;
+}
+.float {
+    float: left;
+    width: 40px;
+    height: 40px;
+    border: 1px solid blue;
+    border-radius: 50%;
+}
+.fixed-units {
+    -webkit-shape-outside: rectangle(0px, 0px, 40px, 40px, 40px, 40px);
+}
+.different-units {
+    -webkit-shape-outside: rectangle(0px, 0px, 40px, 40px, 100%, 100%);
+}
+.relative-units {
+    -webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 700em, 700em);
+}
+.edge-case {
+    -webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 50%, 50%);
+}
+</style>
+<body>
+    <div class="container">
+        <div class="float fixed-units"></div>
+        X<br/>
+        X<br/>
+        X<br/>
+        X
+    </div>
+    <div class="container">
+        <div class="float relative-units"></div>
+        X<br/>
+        X<br/>
+        X<br/>
+        X
+    </div>
+    <div class="container">
+        <div class="float different-units"></div>
+        X<br/>
+        X<br/>
+        X<br/>
+        X
+    </div>
+    <div class="container">
+        <div class="float edge-case"></div>
+        X<br/>
+        X<br/>
+        X<br/>
+        X
+    </div>
+</body>
index 9c0cd6a..46097ad 100644 (file)
@@ -8,7 +8,7 @@ Then run the Tools/Scripts/import-w3c-tests in Webkit to reimport
 Do NOT modify or remove this file
 
 ------------------------------------------------------------------------
-Last Import: 2013-07-17 17:23
+Last Import: 2013-07-23 13:57
 W3C Mercurial changeset: Not Available
 Test status at time of import: unknown
 ------------------------------------------------------------------------
@@ -17,19 +17,29 @@ Properties requiring vendor prefixes:
 -webkit-writing-mode
 ------------------------------------------------------------------------
 List of files:
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-000-expected.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-000.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-001-expected.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-001.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-002-expected.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-002.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-square-000-expected.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-square-000.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-square-border-000-expected.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-square-border-000.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-000-expected.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-000.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-001-expected.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-001.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-002-expected.html
-/LayoutTests/w3c/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-002.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-000-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-000.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-001-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-001.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-002-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-002.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-square-000-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-square-000.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-square-border-000-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-square-border-000.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-000-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-000.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-001-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-001.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-002-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-vertical-rectangle-002.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/resources/rounded-rectangle.js
+/LayoutTests/csswg/submitted/shapes/shape-outside/resources/subpixel-utils.js
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-rounded-rectangle-large-radius-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-rounded-rectangle-large-radius-expected.html
deleted file mode 100644 (file)
index 322d36e..0000000
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <style>
-        .container {
-            position: relative;
-            font: 10px/1 Ahem, sans-serif;
-            width: 80px;
-            height: 40px;
-            border: 1px solid black;
-        }
-        .rounded-rect {
-            position: absolute;
-            top: 0px;
-            left: 0px;
-            width: 40px;
-            height: 40px;
-            border: 1px solid blue;
-            border-radius: 50%;
-            margin: -1px; /* shape-outside layout is unaffected by the border */
-        }
-        .left-rounded-rect-float-line {
-            float: left;
-            clear: left;
-            height: 10px;
-        }
-        </style>
-    </head>
-    <body>
-        <h1>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=116745">116745</a>: [CSS Shapes] rectangle and inset-rectangle do not properly handle rx and ry</h1>
-        <h2>Test that if rx > 50% width and ry > %50 height, they are properly clamped to 50% of the respective dimension when doing layout on the shape. All of the following tests should look identical, and the black blocks should wrap around the blue circle.</h2>
-        <div class="container">
-            <div id="left-fixed-units" class="rounded-rect"></div>
-            X<br/>
-            X<br/>
-            X<br/>
-            X
-        </div>
-        <div class="container">
-            <div id="left-relative-units" class="rounded-rect"></div>
-            X<br/>
-            X<br/>
-            X<br/>
-            X
-        </div>
-        <div class="container">
-            <div id="left-different-units" class="rounded-rect"></div>
-            X<br/>
-            X<br/>
-            X<br/>
-            X
-        </div>
-        <div class="container">
-            <div id="left-edge-case" class="rounded-rect"></div>
-            X<br/>
-            X<br/>
-            X<br/>
-            X
-        </div>
-        <script src="../resources/rounded-rectangle.js"></script>
-        <script src="../resources/subpixel-utils.js"></script>
-        <script>
-        genLeftRoundedRectFloatShapeOutsideRefTest({
-            roundedRect: {x: 0, y: 0, width: 40, height: 40, rx: 20, ry: 20},
-            containerWidth: 80, 
-            containerHeight: 40,
-            lineHeight: 10,
-            floatElementClassSuffix: "rounded-rect-float-line",
-            insertElementIdSuffix: "fixed-units"
-        });
-        genLeftRoundedRectFloatShapeOutsideRefTest({
-            roundedRect: {x: 0, y: 0, width: 40, height: 40, rx: 20, ry: 20},
-            containerWidth: 80, 
-            containerHeight: 40,
-            lineHeight: 10,
-            floatElementClassSuffix: "rounded-rect-float-line",
-            insertElementIdSuffix: "relative-units"
-        });
-        genLeftRoundedRectFloatShapeOutsideRefTest({
-            roundedRect: {x: 0, y: 0, width: 40, height: 40, rx: 20, ry: 20},
-            containerWidth: 80, 
-            containerHeight: 40,
-            lineHeight: 10,
-            floatElementClassSuffix: "rounded-rect-float-line",
-            insertElementIdSuffix: "different-units"
-        });
-        genLeftRoundedRectFloatShapeOutsideRefTest({
-            roundedRect: {x: 0, y: 0, width: 40, height: 40, rx: 20, ry: 20},
-            containerWidth: 80, 
-            containerHeight: 40,
-            lineHeight: 10,
-            floatElementClassSuffix: "rounded-rect-float-line",
-            insertElementIdSuffix: "edge-case"
-        });
-        </script>
-    </body>
-</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-rounded-rectangle-large-radius.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-rounded-rectangle-large-radius.html
deleted file mode 100644 (file)
index e31bb82..0000000
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <script>
-            if (window.internals)
-                window.internals.settings.setCSSExclusionsEnabled(true);
-        </script>
-        <style>
-        .container {
-            font: 10px/1 Ahem, sans-serif;
-            width: 80px;
-            height: 40px;
-            border: 1px solid black;
-        }
-        .float {
-            float: left;
-            width: 40px;
-            height: 40px;
-            border: 1px solid blue;
-            border-radius: 50%;
-        }
-        .fixed-units {
-            -webkit-shape-outside: rectangle(0px, 0px, 40px, 40px, 40px, 40px);
-        }
-        .different-units {
-            -webkit-shape-outside: rectangle(0px, 0px, 40px, 40px, 100%, 100%);
-        }
-        .relative-units {
-            -webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 700em, 700em);
-        }
-        .edge-case {
-            -webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 50%, 50%);
-        }
-        </style>
-    </head>
-    <body>
-        <h1>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=116745">116745</a>: [CSS Shapes] rectangle and inset-rectangle do not properly handle rx and ry</h1>
-        <h2>Test that if rx > 50% width and ry > %50 height, they are properly clamped to 50% of the respective dimension when doing layout on the shape. All of the following tests should look identical, and the black blocks should wrap around the blue circle.</h2>
-        <div class="container">
-            <div class="float fixed-units"></div>
-            X<br/>
-            X<br/>
-            X<br/>
-            X
-        </div>
-        <div class="container">
-            <div class="float relative-units"></div>
-            X<br/>
-            X<br/>
-            X<br/>
-            X
-        </div>
-        <div class="container">
-            <div class="float different-units"></div>
-            X<br/>
-            X<br/>
-            X<br/>
-            X
-        </div>
-        <div class="container">
-            <div class="float edge-case"></div>
-            X<br/>
-            X<br/>
-            X<br/>
-            X
-        </div>
-    </body>
-</html>
\ No newline at end of file