[CSS Shapes] New positioning model: support for stacked floats with shape-outside
authorbjonesbe@adobe.com <bjonesbe@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Aug 2013 23:44:45 +0000 (23:44 +0000)
committerbjonesbe@adobe.com <bjonesbe@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Aug 2013 23:44:45 +0000 (23:44 +0000)
https://bugs.webkit.org/show_bug.cgi?id=118087

Reviewed by Alexandru Chiculita.

Import new test for stacked floats from the CSSWG's repository to
replace the old tests. The simple horizontal rectangle test is no
longer applicable now that float stacking ignores shapes, so it has
just been removed.

* TestExpectations: Remove skipping for replaced tests.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000-expected.html: Added.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple-expected.html: Removed.
* fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html: Removed.
* fast/shapes/shape-outside-floats/shape-outside-floats-stacked-expected.html: Removed.
* fast/shapes/shape-outside-floats/shape-outside-floats-stacked.html: Removed.

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

LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000-expected.html [new file with mode: 0644]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple-expected.html [deleted file]
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html [deleted file]
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-stacked-expected.html [deleted file]
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-stacked.html [deleted file]

index 4935955..412c643 100644 (file)
@@ -1,5 +1,25 @@
 2013-08-01  Bem Jones-Bey  <bjonesbe@adobe.com>
 
+        [CSS Shapes] New positioning model: support for stacked floats with shape-outside
+        https://bugs.webkit.org/show_bug.cgi?id=118087
+
+        Reviewed by Alexandru Chiculita.
+
+        Import new test for stacked floats from the CSSWG's repository to
+        replace the old tests. The simple horizontal rectangle test is no
+        longer applicable now that float stacking ignores shapes, so it has
+        just been removed.
+
+        * TestExpectations: Remove skipping for replaced tests.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000-expected.html: Added.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple-expected.html: Removed.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html: Removed.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-stacked-expected.html: Removed.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-stacked.html: Removed.
+
+2013-08-01  Bem Jones-Bey  <bjonesbe@adobe.com>
+
         Update polygon shape-outside tests for upstream changes
         https://bugs.webkit.org/show_bug.cgi?id=119414
 
index 1bc0724..7cecfac 100644 (file)
@@ -26,9 +26,6 @@ webkit.org/b/118088 fast/shapes/shape-outside-floats/shape-outside-floats-ellips
 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/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 ]
-
 webkit.org/b/118301 fast/dom/timer-throttling-hidden-page.html [ Skip ]
 
 webkit.org/b/119094 fast/forms/color/input-color-onchange-event.html [ Crash Pass ]
diff --git a/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000-expected.html b/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000-expected.html
new file mode 100644 (file)
index 0000000..7dd5631
--- /dev/null
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>CSS RefTest Reference</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<meta name="flags" content="ahem">
+<style>
+.container {
+    width: 300px;
+    height: 100px;
+    background-color: green;
+    margin-bottom: 50px;
+}
+</style>
+<body>
+    <p>You should see two green rectanges. There should be no red.</p>
+    <div class="container">
+    </div>
+    <div class="container">
+    </div>
+</body>
diff --git a/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000.html b/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-stacked-000.html
new file mode 100644 (file)
index 0000000..e76a1e5
--- /dev/null
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Test: stacked floats with shape-outside</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-stacked-000-ref.html">
+<meta name="flags" content="ahem">
+<style>
+.container {
+    width: 300px;
+    height: 100px;
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    background-color: red;
+    margin-bottom: 50px;
+    overflow: hidden;
+}
+.float-left {
+    width: 100px;
+    height: 100px;
+    float: left;
+    background-color: green;
+}
+.triangle-left {
+   -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%);
+}
+.float-right {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    float: right;
+    background-color: green;
+}
+.triangle-right {
+    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%);
+}
+.circle {
+    position: relative;
+    top: -50%;
+    -webkit-shape-outside: circle(50%, 50%, 50%);
+}
+</style>
+<body>
+    <p>You should see two green rectanges. There should be no red.</p>
+    <div class="container">
+        <div class="float-left triangle-left"></div>
+        <div class="float-right triangle-right"></div>
+        X<br/>
+        <div class="float-left circle"></div>
+    </div>
+    <div style="text-align: right" class="container">
+        <div class="float-right triangle-right"></div>
+        <div class="float-left triangle-left"></div>
+        X<br/>
+        <div class="float-right circle"></div>
+    </div>
+</body>
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple-expected.html
deleted file mode 100644 (file)
index b98b402..0000000
+++ /dev/null
@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<style>
-    .container {
-        font: 10px/1 Ahem, sans-serif;
-        height: 20px;
-        width: 40px;
-        border: 1px solid black;
-    }
-    .float-right {
-        float: right;
-        height: 20px;
-        width: 20px;
-        background-color: green;
-    }
-    .float-left {
-        float: left;
-        height: 20px;
-        width: 20px;
-        background-color: green;
-    }
-    .float-right-vertical {
-        float: right;
-        height: 20px;
-        width: 20px;
-        background-color: green;
-    }
-    .float-left-vertical {
-        float: left;
-        height: 20px;
-        width: 20px;
-        background-color: green;
-    }
-    .float-right-exclusion {
-        float: right;
-        height: 20px;
-        width: 10px;
-    }
-    .float-left-exclusion {
-        float: left;
-        height: 20px;
-        width: 10px;
-    }
-    .float-right-vertical-exclusion {
-        float: right;
-        height: 10px;
-        width: 20px;
-    }
-    .float-left-vertical-exclusion {
-        float: left;
-        height: 10px;
-        width: 20px;
-    }
-    .writing-mode-vertical-lr {
-        -webkit-writing-mode: vertical-lr;
-        height: 40px;
-        width: 20px;
-    }
-    .writing-mode-vertical-rl {
-        -webkit-writing-mode: vertical-rl;
-        height: 40px;
-        width: 20px;
-    }
-</style>
-</head>
-<body>
-    <h1><a href="https://bugs.webkit.org/show_bug.cgi?id=100398">Bug 100398</a>: [CSS Exclusions] shape-outside on floats for rectangle shapes height/width</h1>
-    <h2>These tests show that floats respect the shape outside on other floats. Each test should have a green square centegreen in a larger rectangle.</h2>
-    <div class="container">
-        <div class="float-right-exclusion"></div>
-        <div class="float-right"></div>
-    </div>
-    <p></p>
-    <div class="container">
-        <div class="float-left-exclusion"></div>
-        <div class="float-left"></div>
-    </div>
-    <p></p>
-    <div class="container writing-mode-vertical-lr">
-        <div class="float-right-vertical-exclusion"></div>
-        <div class="float-right-vertical"></div>
-
-    </div>
-    <p></p>
-    <div class="container writing-mode-vertical-lr">
-        <div class="float-left-vertical-exclusion"></div>
-        <div class="float-left-vertical"></div>
-
-    </div>
-    <p></p>
-    <div class="container writing-mode-vertical-rl">
-        <div class="float-right-vertical-exclusion"></div>
-        <div class="float-right-vertical"></div>
-
-    </div>
-    <p></p>
-    <div class="container writing-mode-vertical-rl">
-        <div class="float-left-vertical-exclusion"></div>
-        <div class="float-left-vertical"></div>
-
-    </div>
-</body>
-</html>
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html
deleted file mode 100644 (file)
index 8a1c49c..0000000
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<script>
-    if (window.internals)
-        window.internals.settings.setCSSShapesEnabled(true);
-</script>
-<style>
-    .container {
-        font: 10px/1 Ahem, sans-serif;
-        height: 20px;
-        width: 40px;
-        border: 1px solid black;
-    }
-    .float-right {
-        float: right;
-        height: 20px;
-        width: 20px;
-        background-color: green;
-    }
-    .float-left {
-        float: left;
-        height: 20px;
-        width: 20px;
-        background-color: green;
-    }
-    .float-right-vertical {
-        float: right;
-        height: 20px;
-        width: 20px;
-        background-color: green;
-    }
-    .float-left-vertical {
-        float: left;
-        height: 20px;
-        width: 20px;
-        background-color: green;
-    }
-    .float-right-exclusion {
-        -webkit-shape-outside: rectangle(0px, 0px, 10px, 20px);
-        float: right;
-        height: 20px;
-        width: 20px;
-    }
-    .float-left-exclusion {
-        -webkit-shape-outside: rectangle(0px, 0px, 10px, 20px);
-        float: left;
-        height: 20px;
-        width: 20px;
-    }
-    .float-right-vertical-exclusion {
-        -webkit-shape-outside: rectangle(0px, 0px, 20px, 10px);
-        float: right;
-        height: 20px;
-        width: 20px;
-    }
-    .float-left-vertical-exclusion {
-        -webkit-shape-outside: rectangle(0px, 0px, 20px, 10px);
-        float: left;
-        height: 20px;
-        width: 20px;
-    }
-    .writing-mode-vertical-lr {
-        -webkit-writing-mode: vertical-lr;
-        height: 40px;
-        width: 20px;
-    }
-    .writing-mode-vertical-rl {
-        -webkit-writing-mode: vertical-rl;
-        height: 40px;
-        width: 20px;
-    }
-</style>
-</head>
-<body>
-    <h1><a href="https://bugs.webkit.org/show_bug.cgi?id=100398">Bug 100398</a>: [CSS Exclusions] shape-outside on floats for rectangle shapes height/width</h1>
-    <h2>These tests show that floats respect the shape outside on other floats. Each test should have a green square centegreen in a larger rectangle.</h2>
-    <div class="container">
-        <div class="float-right-exclusion"></div>
-        <div class="float-right"></div>
-    </div>
-    <p></p>
-    <div class="container">
-        <div class="float-left-exclusion"></div>
-        <div class="float-left"></div>
-    </div>
-    <p></p>
-    <div class="container writing-mode-vertical-lr">
-        <div class="float-right-vertical-exclusion"></div>
-        <div class="float-right-vertical"></div>
-
-    </div>
-    <p></p>
-    <div class="container writing-mode-vertical-lr">
-        <div class="float-left-vertical-exclusion"></div>
-        <div class="float-left-vertical"></div>
-
-    </div>
-    <p></p>
-    <div class="container writing-mode-vertical-rl">
-        <div class="float-right-vertical-exclusion"></div>
-        <div class="float-right-vertical"></div>
-
-    </div>
-    <p></p>
-    <div class="container writing-mode-vertical-rl">
-        <div class="float-left-vertical-exclusion"></div>
-        <div class="float-left-vertical"></div>
-
-    </div>
-</body>
-</html>
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-stacked-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-stacked-expected.html
deleted file mode 100644 (file)
index c82e47c..0000000
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    .container {
-      width: 500px;
-      font: 40px/1 Ahem, sans-serif;
-    }
-    .left {
-      position: relative;
-      float: left;
-      clear: left;
-      height: 40px;
-    }
-    .triangle-left:before {
-      display: block;
-      position: absolute;
-      content: ' ';
-      z-index: -1;
-      top: 0px;
-      left: 0px;
-      width: 0; height: 0;
-      background-color: transparent;
-      border-top: 100px solid transparent;
-      border-left: 100px solid rgba(0, 0, 255, 0.5);
-    }
-    .triangle-left2:before {
-      display: block;
-      position: absolute;
-      content: ' ';
-      z-index: -1;
-      top: 0px;
-      left: 100px;
-      width: 0; height: 0;
-      background-color: transparent;
-      border-top: 100px solid transparent;
-      border-left: 100px solid rgba(0, 0, 255, 0.5);
-    }
-    .right {
-      position: relative;
-      float: right;
-      clear: right;
-      height: 40px;
-    }
-    .triangle-right:before {
-      display: block;
-      position: absolute;
-      content: ' ';
-      z-index: -1;
-      top: 0px;
-      right: 0px;
-      width: 0; height: 0;
-      background-color: transparent;
-      border-top: 100px solid transparent;
-      border-right: 100px solid rgba(0, 0, 255, 0.5);
-    }
-    .triangle-right2:before {
-      display: block;
-      position: absolute;
-      content: ' ';
-      z-index: -1;
-      top: 0px;
-      right: 100px;
-      width: 0; height: 0;
-      background-color: transparent;
-      border-top: 100px solid transparent;
-      border-right: 100px solid rgba(0, 0, 255, 0.5);
-    }
-  </style>
-</head>
-<body>
-  <h1>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=110372">110372</a> - [CSS Exclusions] Properly position multiple stacked floats with non rectangular shape outside</h1>
-  <h2>There should be two trianges on the left, and one on the right. None of
-    the triangles shoud overlap, and the black boxes should wrap around the triangles on the left.</h2>
-  <div class="container">
-    <div style="width:40px;" class="left triangle-left"></div>
-    X X X X
-    <div style="height: 100px; width: 100px;" class="right triangle-left"></div>
-    <div style="width:80px;" class="left"></div>
-    X X X X
-    <div style="width:140px;" class="left triangle-left2"></div>
-    <div style="width:180px;" class="left"></div>
-    <div style="width:200px;" class="left"></div>
-    X X X X
-    X X X X
-    X X X X
-    X X X X X X
-  </div>
-  <h2>There should be two trianges on the right, and one on the left. None of
-    the triangles shoud overlap, and the black boxes should wrap around the triangles on the right.</h2>
-  <div style="text-align: right" class="container">
-    <div style="width:40px;" class="right triangle-right"></div>
-    X X X X
-    <div style="height: 100px; width: 100px;" class="left triangle-right"></div>
-    <div style="width:80px;" class="right"></div>
-    X X X X
-    <div style="width:140px;" class="right triangle-right2"></div>
-    <div style="width:180px;" class="right"></div>
-    <div style="width:200px;" class="right"></div>
-    X X X X
-    X X X X
-    X X X X
-    X X X X X X
-  </div>
-</body>
-</html>
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-stacked.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-stacked.html
deleted file mode 100644 (file)
index 795d5ac..0000000
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <script>
-    if (window.internals)
-      window.internals.settings.setCSSShapesEnabled(true);
-  </script>
-  <style>
-    .container {
-      width: 500px;
-      font: 40px/1 Ahem, sans-serif;
-    }
-    .triangle-left {
-      position: relative;
-      width: 100px;
-      height: 100px;
-      float: left;
-      -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%);
-    }
-    .triangle-left:before {
-      display: block;
-      position: absolute;
-      content: ' ';
-      z-index: -1;
-      top: 0px;
-      left: 0px;
-      width: 0; height: 0;
-      background-color: transparent;
-      border-top: 100px solid transparent;
-      border-left: 100px solid rgba(0, 0, 255, 0.5);
-    }
-    .triangle-right {
-      position: relative;
-      width: 100px;
-      height: 100px;
-      float: right;
-      -webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%);
-    }
-    .triangle-right:before {
-      display: block;
-      position: absolute;
-      content: ' ';
-      z-index: -1;
-      top: 0px;
-      left: 0px;
-      width: 0; height: 0;
-      background-color: transparent;
-      border-top: 100px solid transparent;
-      border-right: 100px solid rgba(0, 0, 255, 0.5);
-    }
-  </style>
-</head>
-<body>
-  <h1>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=110372">110372</a> - [CSS Exclusions] Properly position multiple stacked floats with non rectangular shape outside</h1>
-  <h2>There should be two trianges on the left, and one on the right. None of
-    the triangles shoud overlap, and the black boxes should wrap around the triangles on the left.</h2>
-  <div class="container">
-    <div class="triangle-left"></div>
-    X X X X X
-    <div style="float:right" class="triangle-left"></div>
-    X X X X
-    <div class="triangle-left"></div>
-    X X X X
-    X X X X
-    X X X X
-    X X X X X
-  </div>
-  <h2>There should be two trianges on the right, and one on the left. None of
-    the triangles shoud overlap, and the black boxes should wrap around the triangles on the right.</h2>
-  <div style="text-align: right" class="container">
-    <div class="triangle-right"></div>
-    X X X X
-    <div style="float:left" class="triangle-right"></div>
-    X X X X
-    <div class="triangle-right"></div>
-    X X X X
-    X X X X
-    X X X X
-    X X X X X X
-  </div>
-</body>
-</html>