Bug 1328236 Part 1: Add a web-platform test that shows shape-outside: border-box float areas are correctly clipped to margin rects. draft
authorBrad Werth <bwerth@mozilla.com>
Fri, 06 Apr 2018 09:13:46 -0700
changeset 778646 7ac2a3ead155e52b214681729ea0fb03f167447b
parent 777984 110f32790d38a258cab722064aae40736478ef51
push id105546
push userbwerth@mozilla.com
push dateFri, 06 Apr 2018 16:29:51 +0000
bugs1328236
milestone61.0a1
Bug 1328236 Part 1: Add a web-platform test that shows shape-outside: border-box float areas are correctly clipped to margin rects. 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
@@ -125674,16 +125674,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",
        "=="
       ]
@@ -506894,16 +506906,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"
   ],
@@ -506923,45 +506939,45 @@
    "7338abdd6edb1027dc2e12b001773ce5ad114286",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html": [
    "1e5377c120916557dc1525b38c9cf7eb86ae0151",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html": [
-   "dfbf4ad61f18ad05e243e58a2458b5b776ecf3fb",
+   "7d6563a162ba640b77801c5c8280078d4b087649",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html": [
-   "da35426f9ffc53101a053a61512c6928d140adff",
+   "72267d3bfbdbeb438f32266334bb5e4a9c91c1bf",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html": [
-   "03752707f61fbf16290b9733c280b79e00440b96",
+   "c1093645f439fc86272e7e5f71e62daf37240a3f",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html": [
-   "2ce6445aed0987c0ab7b83f614e9ceb8186fff7b",
+   "2f2b95904fad670919fae32cb94284118a45566c",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html": [
    "b13df2df3be12ac74a7933794d91558c416b412c",
    "testharness"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html": [
    "dbe8bd280e7f65fc5a1b43f4a211ca8e08a20d5e",
    "testharness"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html": [
    "80fd9390054506c5e7bd8a6e60c1e6156dd604ec",
    "testharness"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html": [
-   "fc47f277737dce4f7c6b08d0181355a810107c7b",
+   "67c3b8ea983da6b7d9b6b7e252b6415ebc7d1f9d",
    "testharness"
   ],
   "css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html": [
    "535d72bd77ac04e8e1accaa36edc6077baed17f3",
    "support"
   ],
   "css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html": [
    "5f5ed24372bdb45721dcb3befac0e5a0d3bb4091",
@@ -507123,17 +507139,17 @@
    "a68bf761c1ee6ab00432036b773b70ae6ba7b7c0",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-025.html": [
    "c20645a47561cfa655b759d20f52d22536776893",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/support/animated.gif": [
-   "d7fa8b47fef48732b1e01143a714409443ff307f",
+   "c5252926d8dbf82c06cdb615fda708ca7728f0bb",
    "support"
   ],
   "css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png": [
    "d366673197353a2b32aee7befa9bab425d4a7be1",
    "support"
   ],
   "css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg": [
    "3cdddaa71eb80bd275c01470bc7e85694b0d5c98",
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>
+