Part 1: Add a web-platform test that shows shape-outside: border-box …

…float areas are correctly clipped to margin rects. bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1328236 gecko-commit: b5bc270f37953f60d40f821b0593ff2e6200e343 gecko-integration-branch: central gecko-reviewers: dholbert
web-platform-tests · Apr 9, 2018 · 85191e1 · 85191e1
1 parent 8c503e7
commit 85191e1
Showing 1 changed file with 71 additions and 0 deletions.
diff --git a/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html b/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Test: right float, shape-outside: border-box</title>
+        <link rel="author" title="Brad Werth" href="mailto:[email protected]">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+        <link rel="match" href="reference/shape-outside-box-005-ref.html">
+        <meta name="flags" content="ahem" />
+        <meta name="assert" content="The test verifies that text wraps around a
+                                     right float with a shape-outside defined as
+                                     the border box, with negative margins.
+                                     The float area is clipped to the margin box.">
+    </head>
+    <style>
+    body {
+        margin: 0;
+    }
+    #container {
+        position: relative;
+    }
+    #test-container {
+        font: 40px/1 Ahem, sans-serif;
+        text-align: right;
+        width: 250px;
+        height: 200px;
+        color: green;
+    }
+    #test-shape {
+        float: right;
+        width: 150px;
+        height: 150px;
+        margin: -20px;
+        padding: 10px;
+        border: 10px solid transparent;
+        shape-outside: border-box;
+    }
+    #line {
+        position: absolute;
+        top: 0px;
+        left: 100px;
+        width: 2px;
+        height: 200px;
+        border-left: 2px solid blue;
+    }
+    #failure {
+        position: absolute;
+        top: 80px;
+        left: 60px;
+        width: 40px;
+        height: 40px;
+        background-color: red;
+        z-index: -1;
+    }
+    </style>
+    <body>
+    <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+    <div id="container">
+        <div id="test-container">
+            <div id="test-shape"></div>
+            <br/>
+            <br/>
+            X
+        </div>
+        <div id="line"></div>
+        <div id="failure"></div>
+    </div>
+    </body>
+</html>
+