Diff
Modified: trunk/LayoutTests/ChangeLog (153336 => 153337)
--- trunk/LayoutTests/ChangeLog 2013-07-25 18:11:13 UTC (rev 153336)
+++ trunk/LayoutTests/ChangeLog 2013-07-25 18:20:50 UTC (rev 153337)
@@ -1,3 +1,21 @@
+2013-07-25 Bem Jones-Bey <[email protected]>
+
+ [CSS Shapes] New positioning model: support for circle and ellipse shape-outside
+ https://bugs.webkit.org/show_bug.cgi?id=118084
+
+ Reviewed by Dirk Schulze.
+
+ Update circle and ellipse tests to work with new positioning. These
+ have been rehomed as W3C spec tests, and thus are imported from the
+ CSSWG's repository.
+
+ * TestExpectations: Remove skip for updated tests.
+ * csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-000-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle-expected.html.
+ * csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle.html.
+ * csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html.
+ * csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse.html.
+ * csswg/submitted/shapes/shape-outside/w3c-import.log:
+
2013-07-19 Filip Pizlo <[email protected]>
fourthTier: String GetByVal out-of-bounds handling is so wrong
Modified: trunk/LayoutTests/TestExpectations (153336 => 153337)
--- trunk/LayoutTests/TestExpectations 2013-07-25 18:11:13 UTC (rev 153336)
+++ trunk/LayoutTests/TestExpectations 2013-07-25 18:20:50 UTC (rev 153337)
@@ -26,9 +26,6 @@
webkit.org/b/118088 fast/shapes/shape-outside-floats/shape-outside-floats-left-margin-polygon.html [ Skip ]
webkit.org/b/118088 fast/shapes/shape-outside-floats/shape-outside-floats-right-margin-polygon.html [ Skip ]
-webkit.org/b/118084 fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle.html [ Skip ]
-webkit.org/b/118084 fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse.html [ Skip ]
-
webkit.org/b/118085 fast/shapes/shape-outside-floats/shape-outside-floats-simple-polygon.html [ Skip ]
webkit.org/b/118086 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-percentage.html [ Skip ]
Copied: trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-000-expected.html (from rev 153336, trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle-expected.html) (0 => 153337)
--- trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-000-expected.html (rev 0)
+++ trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-000-expected.html 2013-07-25 18:20:50 UTC (rev 153337)
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<title>shape-outside-floats-circle-000-reference.html</title>
+<link rel="author" title="Bem Jones-Bey" href=""
+<meta name="flags" content="ahem dom">
+<style>
+.container {
+ position: relative;
+ font: 20px/1 Ahem, sans-serif;
+ width: 500px;
+ height: 200px;
+ border: 1px solid black;
+}
+
+.circle {
+ width: 160px;
+ height: 160px;
+ border-radius: 80px;
+ border: 1px solid blue;
+}
+
+#left-circle-outline {
+ position: absolute;
+ top: 20px;
+ left: 0px;
+}
+
+#right-circle-outline {
+ position: absolute;
+ top: 20px;
+ right: 0px;
+}
+
+.left-circle-float-line {
+ float: left;
+ clear: left;
+ height: 20px;
+}
+
+.right-circle-float-line {
+ float: right;
+ clear: right;
+ height: 20px;
+}
+</style>
+<body>
+<p>The black squares should trace the right side of the circle's blue outline.</p>
+<div class="container">
+X<br/>
+ <div id="left-circle-outline" class="circle"></div>
+ <!-- generated left-rounded-rect-float-line divs will be inserted here -->
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+
+<p>The black squares should trace the left side of the circle's blue outline.</p>
+<div class="container" style="text-align: right">
+X<br/>
+ <div id="right-circle-outline" class="circle"></div>
+ <!-- generated right-rounded-rect-float-line divs will be inserted here -->
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+
+<script src=""
+<script src=""
+<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: 161, height: 160, rx: 80, ry: 80},
+ containerWidth: 500,
+ containerHeight: 200,
+ lineHeight: 20,
+ floatElementClassSuffix: "circle-float-line",
+ insertElementIdSuffix: "circle-outline"
+});
+</script>
+
+</body>
Copied: trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html (from rev 153336, trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle.html) (0 => 153337)
--- trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html (rev 0)
+++ trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html 2013-07-25 18:20:50 UTC (rev 153337)
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<title>CSS Test: circle shape-outside on floats</title>
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<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: 20px/1 Ahem, sans-serif;
+ width: 500px;
+ height: 200px;
+ border: 1px solid black;
+}
+
+.circle {
+ width: 160px;
+ height: 160px;
+ border: 1px solid blue;
+ border-radius: 80px;
+ -webkit-shape-outside: circle(80px, 80px, 80px); /* cx,cy,radius */
+}
+</style>
+
+<body>
+<p>The black squares should trace the right side of the circle's blue outline.</p>
+<div class="container">
+X<br/>
+ <div style="float: left" class="circle"></div>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+
+<p>The black squares should trace the left side of the circle's blue outline.</p>
+<div class="container" style="text-align: right">
+X<br/>
+ <div style="float: right" class="circle"></div>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+</body>
Copied: trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html (from rev 153336, trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html) (0 => 153337)
--- trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html (rev 0)
+++ trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html 2013-07-25 18:20:50 UTC (rev 153337)
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<title>shape-outside-floats-ellipse-000-reference.html</title>
+<link rel="author" title="Bem Jones-Bey" href=""
+<meta name="flags" content="ahem dom">
+<style>
+.container {
+ position: relative;
+ font: 20px/1 Ahem, sans-serif;
+ width: 500px;
+ height: 200px;
+ border: 1px solid black;
+}
+
+.ellipse {
+ width: 320px;
+ height: 160px;
+ border-radius: 160px / 80px;
+ border: 1px solid blue;
+}
+
+#left-ellipse-outline {
+ position: absolute;
+ top: 20px;
+ left: 0px;
+}
+
+#right-ellipse-outline {
+ position: absolute;
+ top: 20px;
+ right: 0px;
+}
+
+.left-ellipse-float-line {
+ float: left;
+ clear: left;
+ height: 20px;
+}
+
+.right-ellipse-float-line {
+ float: right;
+ clear: right;
+ height: 20px;
+}
+</style>
+
+<body>
+<p>The black squares should trace the right side of the ellipse's blue outline.</p>
+<div class="container">
+X<br/>
+ <div id="left-ellipse-outline" class="ellipse"></div>
+ <!-- generated left-rounded-rect-float-line divs will be inserted here -->
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+
+<p>The black squares should trace the left side of the ellipse's blue outline.</p>
+<div class="container" style="text-align: right">
+X<br/>
+ <div id="right-ellipse-outline" class="ellipse"></div>
+ <!-- generated right-rounded-rect-float-line divs will be inserted here -->
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+</body>
+
+<script src=""
+<script src=""
+<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: 321, height: 160, rx: 160, ry: 80},
+ containerWidth: 500,
+ containerHeight: 200,
+ lineHeight: 20,
+ floatElementClassSuffix: "ellipse-float-line",
+ insertElementIdSuffix: "ellipse-outline"
+});
+</script>
+
+</html>
Copied: trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html (from rev 153336, trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse.html) (0 => 153337)
--- trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html (rev 0)
+++ trunk/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html 2013-07-25 18:20:50 UTC (rev 153337)
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<title>CSS Test: circle shape-outside on floats</title>
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="ahem">
+<style>
+.container {
+ font: 20px/1 Ahem, sans-serif;
+ width: 500px;
+ height: 200px;
+ border: 1px solid black;
+}
+
+.ellipse {
+ width: 320px;
+ height: 160px;
+ border: 1px solid blue;
+ border-radius: 160px / 80px;
+ -webkit-shape-outside: ellipse(160px, 80px, 160px, 80px); /* cx,cy,rx,ry */
+}
+</style>
+
+<body>
+<p>The black squares should trace the right side of the ellipse's blue outline.</p>
+<div class="container">
+X<br/>
+ <div style="float: left" class="ellipse"></div>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+
+<p>The black squares should trace the left side of the ellipse's blue outline.</p>
+<div class="container" style="text-align: right">
+X<br/>
+ <div style="float: right" class="ellipse"></div>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+</body>
Modified: trunk/LayoutTests/csswg/submitted/shapes/shape-outside/w3c-import.log (153336 => 153337)
--- trunk/LayoutTests/csswg/submitted/shapes/shape-outside/w3c-import.log 2013-07-25 18:11:13 UTC (rev 153336)
+++ trunk/LayoutTests/csswg/submitted/shapes/shape-outside/w3c-import.log 2013-07-25 18:20:50 UTC (rev 153337)
@@ -8,7 +8,7 @@
Do NOT modify or remove this file
------------------------------------------------------------------------
-Last Import: 2013-07-23 13:57
+Last Import: 2013-07-24 17:22
W3C Mercurial changeset: Not Available
Test status at time of import: unknown
------------------------------------------------------------------------
@@ -41,5 +41,9 @@
/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/shape-outside-floats-circle-000.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-000-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html
/LayoutTests/csswg/submitted/shapes/shape-outside/resources/rounded-rectangle.js
/LayoutTests/csswg/submitted/shapes/shape-outside/resources/subpixel-utils.js
Deleted: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle-expected.html (153336 => 153337)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle-expected.html 2013-07-25 18:11:13 UTC (rev 153336)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle-expected.html 2013-07-25 18:20:50 UTC (rev 153337)
@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<style>
-.container {
- position: relative;
- font: 20px/1 Ahem, sans-serif;
- width: 500px;
- height: 200px;
- border: 1px solid black;
-}
-
-.circle {
- width: 160px;
- height: 160px;
- border-radius: 80px;
- border: 1px solid blue;
- margin: -1px; /* shape-outside layout is unaffected by the border */
-}
-
-#left-circle-outline {
- position: absolute;
- top: 20px;
- left: 0px;
-}
-
-#right-circle-outline {
- position: absolute;
- top: 20px;
- left: 340px;
-}
-
-.left-circle-float-line {
- float: left;
- clear: left;
- height: 20px;
-}
-
-.right-circle-float-line {
- float: right;
- clear: right;
- height: 20px;
-}
-</style>
-
-<h2><a href="" 98673</a> - [CSS Exclusions] shape-outside on floats for circle and ellipse shapes</h2>
-<p>The black squares should trace the right side of the circle's blue outline.</p>
-<div class="container">
-X<br/>
- <div id="left-circle-outline" class="circle"></div>
- <!-- generated left-rounded-rect-float-line divs will be inserted here -->
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X
-</div>
-
-<p>The black squares should trace the left side of the circle's blue outline.</p>
-<div class="container" style="text-align: right">
-X<br/>
- <div id="right-circle-outline" class="circle"></div>
- <!-- generated right-rounded-rect-float-line divs will be inserted here -->
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X
-</div>
-</body>
-
-<script src=""
-<script src=""
-<script>
-genLeftRightRoundedRectFloatShapeOutsideRefTest({
- roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
- containerWidth: 500,
- containerHeight: 200,
- lineHeight: 20,
- floatElementClassSuffix: "circle-float-line",
- insertElementIdSuffix: "circle-outline"
-});
-</script>
-
-</html>
-
-
Deleted: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle.html (153336 => 153337)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle.html 2013-07-25 18:11:13 UTC (rev 153336)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-circle.html 2013-07-25 18:20:50 UTC (rev 153337)
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<script>
- if (window.internals)
- window.internals.settings.setCSSShapesEnabled(true);
-</script>
-<style>
-.container {
- font: 20px/1 Ahem, sans-serif;
- width: 500px;
- height: 200px;
- border: 1px solid black;
-}
-
-.circle {
- width: 160px;
- height: 160px;
- border: 1px solid blue;
- border-radius: 80px;
- -webkit-shape-outside: circle(80px, 80px, 80px); /* cx,cy,radius */
-}
-</style>
-
-<h2><a href="" 98673</a> - [CSS Exclusions] shape-outside on floats for circle and ellipse shapes</h2>
-<p>The black squares should trace the right side of the circle's blue outline.</p>
-<div class="container">
-X<br/>
- <div style="float: left" class="circle"></div>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X
-</div>
-
-<p>The black squares should trace the left side of the circle's blue outline.</p>
-<div class="container" style="text-align: right">
-X<br/>
- <div style="float: right" class="circle"></div>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X
-</div>
-</body>
-</html>
Deleted: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html (153336 => 153337)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html 2013-07-25 18:11:13 UTC (rev 153336)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html 2013-07-25 18:20:50 UTC (rev 153337)
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<style>
-.container {
- position: relative;
- font: 20px/1 Ahem, sans-serif;
- width: 500px;
- height: 200px;
- border: 1px solid black;
-}
-
-.ellipse {
- width: 320px;
- height: 160px;
- border-radius: 160px / 80px;
- border: 1px solid blue;
- margin: -1px; /* shape-outside layout is unaffected by the border */
-}
-
-#left-ellipse-outline {
- position: absolute;
- top: 20px;
- left: 0px;
-}
-
-#right-ellipse-outline {
- position: absolute;
- top: 20px;
- left: 180px;
-}
-
-.left-ellipse-float-line {
- float: left;
- clear: left;
- height: 20px;
-}
-
-.right-ellipse-float-line {
- float: right;
- clear: right;
- height: 20px;
-}
-</style>
-
-<h2><a href="" 98673</a> - [CSS Exclusions] shape-outside on floats for circle and ellipse shapes</h2>
-<p>The black squares should trace the right side of the ellipse's blue outline.</p>
-<div class="container">
-X<br/>
- <div id="left-ellipse-outline" class="ellipse"></div>
- <!-- generated left-rounded-rect-float-line divs will be inserted here -->
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X
-</div>
-
-<p>The black squares should trace the left side of the ellipse's blue outline.</p>
-<div class="container" style="text-align: right">
-X<br/>
- <div id="right-ellipse-outline" class="ellipse"></div>
- <!-- generated right-rounded-rect-float-line divs will be inserted here -->
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X
-</div>
-</body>
-
-<script src=""
-<script src=""
-<script>
-genLeftRightRoundedRectFloatShapeOutsideRefTest({
- roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80},
- containerWidth: 500,
- containerHeight: 200,
- lineHeight: 20,
- floatElementClassSuffix: "ellipse-float-line",
- insertElementIdSuffix: "ellipse-outline"
-});
-</script>
-
-</html>
Deleted: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse.html (153336 => 153337)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse.html 2013-07-25 18:11:13 UTC (rev 153336)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-ellipse.html 2013-07-25 18:20:50 UTC (rev 153337)
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<script>
- if (window.internals)
- window.internals.settings.setCSSShapesEnabled(true);
-</script>
-<style>
-.container {
- font: 20px/1 Ahem, sans-serif;
- width: 500px;
- height: 200px;
- border: 1px solid black;
-}
-
-.ellipse {
- width: 320px;
- height: 160px;
- border: 1px solid blue;
- border-radius: 160px / 80px;
- -webkit-shape-outside: ellipse(160px, 80px, 160px, 80px); /* cx,cy,rx,ry */
-}
-</style>
-
-<h2><a href="" 98673</a> - [CSS Exclusions] shape-outside on floats for circle and ellipse shapes</h2>
-<p>The black squares should trace the right side of the ellipse's blue outline.</p>
-<div class="container">
-X<br/>
- <div style="float: left" class="ellipse"></div>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X
-</div>
-
-<p>The black squares should trace the left side of the ellipse's blue outline.</p>
-<div class="container" style="text-align: right">
-X<br/>
- <div style="float: right" class="ellipse"></div>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X<br/>
-X
-</div>
-</body>
-</html>
