Bug 1328236 Part 1: Add a web-platform test that shows shape-outside: border-box float areas are correctly clipped to margin rects. r=dholbert
authorBrad Werth <bwerth@mozilla.com>
Fri, 06 Apr 2018 09:13:46 -0700
changeset 412217 b5bc270f37953f60d40f821b0593ff2e6200e343
parent 412216 3a5cfad58dd87cc8e9e95ec39d0fea137b3e09d9
child 412218 6b3cdc46167406019fc4a91046c784bef081b29d
push id33786
push usercbrindusan@mozilla.com
push dateSat, 07 Apr 2018 09:54:54 +0000
treeherdermozilla-central@2ae59181b9de [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1328236
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1328236 Part 1: Add a web-platform test that shows shape-outside: border-box float areas are correctly clipped to margin rects. r=dholbert MozReview-Commit-ID: JkIQqRhLNrs
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -125686,16 +125686,28 @@
       [
        "/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html",
+     [
+      [
+       "/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html": [
     [
      "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html",
      [
       [
        "/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html",
        "=="
       ]
@@ -506929,16 +506941,20 @@
   "css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html": [
    "57a0603f456ed1057074b5e65a6f2a46e4cb780a",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html": [
    "0db53921502e89cb89da1170087254c18f2b6339",
    "reftest"
   ],
+  "css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html": [
+   "dcbc65caff9f44278347a92148b79f2577f7a91f",
+   "reftest"
+  ],
   "css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html": [
    "95e219e19a947fd2e0d27d1a4c553ebae7fe3e71",
    "support"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html": [
    "27bdb72fba7d5f29df02b7a83c6fa16afaf0b419",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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:bwerth@mozilla.com">
+        <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>
+