[CSS Shapes] New positioning model: support for inset rectangle shape-outside
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 26 Jul 2013 01:24:13 +0000 (01:24 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 26 Jul 2013 01:24:13 +0000 (01:24 +0000)
https://bugs.webkit.org/show_bug.cgi?id=118083

Patch by Bem Jones-Bey <bjonesbe@adobe.com> on 2013-07-25
Reviewed by Dirk Schulze.

Update inset-rectangle tests to work with new positioning model.
Removed some test cases that aren't really needed or aren't applicable
with the new model. These test cases live in the CSS WG's repo now, so
they've been imported here.

* TestExpectations: Remove skip lines for replaced tests.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000-expected.html: Added.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000.html: Added.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-inset-rectangle-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-inset-rectangle.html.
* csswg/submitted/shapes/shape-outside/w3c-import.log:
* fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle-expected.html: Removed.
* fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle.html: Removed.

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

LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000-expected.html [new file with mode: 0644]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000.html [new file with mode: 0644]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001-expected.html [moved from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-inset-rectangle-expected.html with 78% similarity]
LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html [moved from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-inset-rectangle.html with 64% similarity]
LayoutTests/csswg/submitted/shapes/shape-outside/w3c-import.log
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle-expected.html [deleted file]
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle.html [deleted file]

index 082a2b8..1ef595b 100644 (file)
@@ -1,3 +1,24 @@
+2013-07-25  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [CSS Shapes] New positioning model: support for inset rectangle shape-outside
+        https://bugs.webkit.org/show_bug.cgi?id=118083
+
+        Reviewed by Dirk Schulze.
+
+        Update inset-rectangle tests to work with new positioning model.
+        Removed some test cases that aren't really needed or aren't applicable
+        with the new model. These test cases live in the CSS WG's repo now, so
+        they've been imported here.
+
+        * TestExpectations: Remove skip lines for replaced tests.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000-expected.html: Added.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000.html: Added.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-inset-rectangle-expected.html.
+        * csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-inset-rectangle.html.
+        * csswg/submitted/shapes/shape-outside/w3c-import.log:
+        * fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle-expected.html: Removed.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle.html: Removed.
+
 2013-07-25  Zoltan Horvath  <zoltan@webkit.org>
 
         [CSS Shapes] Add missing includes to shape-inside polygon tests
index b3dd8e1..ff848a3 100644 (file)
@@ -31,9 +31,6 @@ webkit.org/b/118085 fast/shapes/shape-outside-floats/shape-outside-floats-simple
 webkit.org/b/118086 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-percentage.html [ Skip ]
 webkit.org/b/118086 fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle-percentage.html [ Skip ]
 
-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/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/shape-outside-floats-inset-rectangle-000-expected.html b/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000-expected.html
new file mode 100644 (file)
index 0000000..4fe920d
--- /dev/null
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<title>shape-outside-floats-inset-rectangle-000-reference.html</title>
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<meta name="flags" content="ahem">
+<head>
+    <style>
+        .test {
+            font: 20px/1 Ahem, sans-serif;
+            border: 1px solid black;
+            line-height: 20px;
+        }
+        .vertical-lr {
+            -webkit-writing-mode: vertical-lr;
+        }
+        .vertical-rl {
+            -webkit-writing-mode: vertical-rl;
+        }
+        .container {
+            width: 60px;
+            height: 60px;
+            display: inline-block;
+        }
+        .float {
+            width: 40px;
+            height: 40px;
+        }
+        .exclusion-top {
+            height: 20px;
+        }
+        .exclusion-right {
+            width: 20px;
+        }
+        .exclusion-bottom {
+            height: 20px;
+        }
+        .exclusion-left {
+            width: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="test container">
+      XXX
+      <div style="float: left" class="float exclusion-top"></div>
+      X
+      XXX
+    </div>
+    <div class="test container">
+      XXX
+      <div style="float: right" class="float exclusion-top"></div>
+      X
+      XXX
+    </div>
+    <div class="test container">
+      <div style="float: left" class="float exclusion-right"></div>
+      XX
+      XX
+      XXX
+    </div>
+    <div class="test container">
+      <div style="float: left" class="float exclusion-bottom"></div>
+      X
+      XXX
+      XXX
+    </div>
+    <div class="test container">
+      <div style="float: right" class="float exclusion-bottom"></div>
+      X
+      XXX
+      XXX
+    </div>
+    <div class="test container">
+      <div style="float: right" class="float exclusion-left"></div>
+      XX
+      XX
+      XXX
+    </div>
+</body>
diff --git a/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000.html b/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000.html
new file mode 100644 (file)
index 0000000..31d5d53
--- /dev/null
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<title>CSS Test: inset rectangle shape-outside on floats</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-inset-rectangle-000-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>
+    .test {
+        font: 20px/1 Ahem, sans-serif;
+        border: 1px solid black;
+        line-height: 20px;
+    }
+    .container {
+        width: 60px;
+        height: 60px;
+        display: inline-block;
+    }
+    .float {
+        width: 40px;
+        height: 40px;
+    }
+    .exclusion-top {
+        -webkit-shape-outside: inset-rectangle(21px, 0, 0, 0);
+    }
+    .exclusion-right {
+        -webkit-shape-outside: inset-rectangle(0, 20px, 0, 0);
+    }
+    .exclusion-bottom {
+        -webkit-shape-outside: inset-rectangle(0, 0, 20px, 0);
+    }
+    .exclusion-left {
+        -webkit-shape-outside: inset-rectangle(0, 0, 0, 20px);
+    }
+</style>
+<body>
+    <div class="test container">
+      <div style="float: left" class="float exclusion-top"></div>
+      XXX
+      X
+      XXX
+    </div>
+    <div class="test container">
+      <div style="float: right" class="float exclusion-top"></div>
+      XXX
+      X
+      XXX
+    </div>
+    <div class="test container">
+      <div style="float: left" class="float exclusion-right"></div>
+      XX
+      XX
+      XXX
+    </div>
+    <div class="test container">
+      <div style="float: left" class="float exclusion-bottom"></div>
+      X
+      XXX
+      XXX
+    </div>
+    <div class="test container">
+      <div style="float: right" class="float exclusion-bottom"></div>
+      X
+      XXX
+      XXX
+    </div>
+    <div class="test container">
+      <div style="float: right" class="float exclusion-left"></div>
+      XX
+      XX
+      XXX
+    </div>
+</body>
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
-<head>
+<title>shape-outside-floats-inset-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;
@@ -15,7 +16,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 +27,7 @@
 #right-rounded-rect-outline {
     position: absolute;
     top: 20px;
-    left: 180px;
+    right: 0px;
 }
 
 .left-rounded-rect-float-line {
@@ -42,8 +42,7 @@
     height: 20px;
 }
 </style>
-
-<h1><a href="https://bugs.webkit.org/show_bug.cgi?id=116641">Bug 116641</a> - [CSS Shapes] inset-rectangle support for shape-outside</h1>
+<body>
 <p>The black squares should trace the right side of the rounded rectangle's blue outline.</p>
 <div class="container">
 X<br/>
@@ -75,13 +74,11 @@ X<br/>
 X<br/>
 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>
 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 +86,4 @@ genLeftRightRoundedRectFloatShapeOutsideRefTest({
     insertElementIdSuffix: "rounded-rect-outline"
 });
 </script>
-
-</html>
-
-
+</body>
@@ -1,9 +1,13 @@
 <!DOCTYPE html>
-<html>
-<head>
+<title>CSS Test: inset rectangle shape-outside on floats</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-inset-rectangle-001-reference.html">
+<meta name="flags" content="ahem">
 <script>
-    if (window.internals)
-        window.internals.settings.setCSSShapesEnabled(true);
+// This is required to run the tests in WebKit's test infrastructure.
+if (window.internals)
+    window.internals.settings.setCSSShapesEnabled(true);
 </script>
 <style>
 .container {
@@ -21,8 +25,7 @@
     -webkit-shape-outside: inset-rectangle(0px, 0px, 0px, 0px, 60px, 60px); /* top,right,bottom,left,rx,ry */
 }
 </style>
-
-<h1><a href="https://bugs.webkit.org/show_bug.cgi?id=116641">Bug 116641</a> - [CSS Shapes] inset-rectangle support for shape-outside</h1>
+<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 +56,3 @@ X<br/>
 X
 </div>
 </body>
-</html>
-
-
index 836abb7..8e1ec32 100644 (file)
@@ -45,5 +45,9 @@ List of files:
 /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/shape-outside-floats-inset-rectangle-000-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-000.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001-expected.html
+/LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.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-simple-inset-rectangle-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle-expected.html
deleted file mode 100644 (file)
index 3b2d884..0000000
+++ /dev/null
@@ -1,189 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <style>
-        .test {
-            font: 10px/1 Ahem, sans-serif;
-            border: 1px solid black;
-        }
-        .vertical-lr {
-            -webkit-writing-mode: vertical-lr;
-        }
-        .vertical-rl {
-            -webkit-writing-mode: vertical-rl;
-        }
-        .container {
-            width: 30px;
-            height: 30px;
-            display: inline-block;
-        }
-        .float {
-            width: 20px;
-            height: 20px;
-        }
-        .exclusion-top {
-            height: 10px;
-        }
-        .exclusion-right {
-            width: 10px;
-        }
-        .exclusion-bottom {
-            height: 10px;
-        }
-        .exclusion-left {
-            width: 10px;
-        }
-    </style>
-</head>
-<body>
-    <h1><a href="https://bugs.webkit.org/show_bug.cgi?id=116641">Bug 116641</a> - [CSS Shapes] inset-rectangle support for shape-outside</h1>
-    <h2>The following tests all should have a white rectangle in one corner of a black square.</h2>
-    <h3>top offset: left, right, left vertical-lr, right vertical-lr, left vertical-rl, right vertical-rl</h3>
-    <div class="test container">
-      <div style="float: left" class="float exclusion-top"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container">
-      <div style="float: right" class="float exclusion-top"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: left" class="float exclusion-top"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: right" class="float exclusion-top"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: left" class="float exclusion-top"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: right" class="float exclusion-top"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <h3>right offset: left, right, left vertical-lr, right vertical-lr, left vertical-rl, right vertical-rl</h3>
-    <div class="test container">
-      <div style="float: left" class="float exclusion-right"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container">
-      <div style="float: right" class="float exclusion-right"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: left" class="float exclusion-right"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: right" class="float exclusion-right"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: left" class="float exclusion-right"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: right" class="float exclusion-right"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <h3>bottom offset: left, right, left vertical-lr, right vertical-lr, left vertical-rl, right vertical-rl</h3>
-    <div class="test container">
-      <div style="float: left" class="float exclusion-bottom"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container">
-      <div style="float: right" class="float exclusion-bottom"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: left" class="float exclusion-bottom"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: right" class="float exclusion-bottom"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: left" class="float exclusion-bottom"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: right" class="float exclusion-bottom"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <h3>left offset: left, right, left vertical-lr, right vertical-lr, left vertical-rl, right vertical-rl</h3>
-    <div class="test container">
-      <div style="float: left" class="float exclusion-left"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container">
-      <div style="float: right" class="float exclusion-left"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: left" class="float exclusion-left"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: right" class="float exclusion-left"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: left" class="float exclusion-left"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: right" class="float exclusion-left"></div>
-      X
-      XXX
-      XXX
-    </div>
-</body>
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle.html
deleted file mode 100644 (file)
index 07f35d7..0000000
+++ /dev/null
@@ -1,193 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <script>
-        if (window.internals)
-            window.internals.settings.setCSSShapesEnabled(true);
-    </script>
-    <style>
-        .test {
-            font: 10px/1 Ahem, sans-serif;
-            border: 1px solid black;
-        }
-        .vertical-lr {
-            -webkit-writing-mode: vertical-lr;
-        }
-        .vertical-rl {
-            -webkit-writing-mode: vertical-rl;
-        }
-        .container {
-            width: 30px;
-            height: 30px;
-            display: inline-block;
-        }
-        .float {
-            width: 20px;
-            height: 20px;
-        }
-        .exclusion-top {
-            -webkit-shape-outside: inset-rectangle(10px, 0, 0, 0);
-        }
-        .exclusion-right {
-            -webkit-shape-outside: inset-rectangle(0, 10px, 0, 0);
-        }
-        .exclusion-bottom {
-            -webkit-shape-outside: inset-rectangle(0, 0, 10px, 0);
-        }
-        .exclusion-left {
-            -webkit-shape-outside: inset-rectangle(0, 0, 0, 10px);
-        }
-    </style>
-</head>
-<body>
-    <h1><a href="https://bugs.webkit.org/show_bug.cgi?id=116641">Bug 116641</a> - [CSS Shapes] inset-rectangle support for shape-outside</h1>
-    <h2>The following tests all should have a white rectangle in one corner of a black square.</h2>
-    <h3>top offset: left, right, left vertical-lr, right vertical-lr, left vertical-rl, right vertical-rl</h3>
-    <div class="test container">
-      <div style="float: left" class="float exclusion-top"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container">
-      <div style="float: right" class="float exclusion-top"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: left" class="float exclusion-top"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: right" class="float exclusion-top"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: left" class="float exclusion-top"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: right" class="float exclusion-top"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <h3>right offset: left, right, left vertical-lr, right vertical-lr, left vertical-rl, right vertical-rl</h3>
-    <div class="test container">
-      <div style="float: left" class="float exclusion-right"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container">
-      <div style="float: right" class="float exclusion-right"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: left" class="float exclusion-right"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: right" class="float exclusion-right"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: left" class="float exclusion-right"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: right" class="float exclusion-right"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <h3>bottom offset: left, right, left vertical-lr, right vertical-lr, left vertical-rl, right vertical-rl</h3>
-    <div class="test container">
-      <div style="float: left" class="float exclusion-bottom"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container">
-      <div style="float: right" class="float exclusion-bottom"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: left" class="float exclusion-bottom"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: right" class="float exclusion-bottom"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: left" class="float exclusion-bottom"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: right" class="float exclusion-bottom"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <h3>left offset: left, right, left vertical-lr, right vertical-lr, left vertical-rl, right vertical-rl</h3>
-    <div class="test container">
-      <div style="float: left" class="float exclusion-left"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container">
-      <div style="float: right" class="float exclusion-left"></div>
-      XX
-      XX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: left" class="float exclusion-left"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-lr">
-      <div style="float: right" class="float exclusion-left"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: left" class="float exclusion-left"></div>
-      X
-      XXX
-      XXX
-    </div>
-    <div class="test container vertical-rl">
-      <div style="float: right" class="float exclusion-left"></div>
-      X
-      XXX
-      XXX
-    </div>
-</body>