Bug 1460041 Part 2: Add WPT reftests for many shape-outside shapes that use an element offset from its container. r=jfkthame
authorBrad Werth <bwerth@mozilla.com>
Wed, 09 May 2018 12:50:25 -0700
changeset 417849 05f625985b7ff72b09db1244ccc1af172b13f199
parent 417848 e1754110f8a687420e9196b7f6166129631335c9
child 417850 fd3cab8c506a65faf17c6080bc4b7dadf6c928a5
push id103165
push userebalazs@mozilla.com
push dateFri, 11 May 2018 09:45:25 +0000
treeherdermozilla-inbound@59a49b12b268 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjfkthame
bugs1460041
milestone62.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 1460041 Part 2: Add WPT reftests for many shape-outside shapes that use an element offset from its container. r=jfkthame This adds several tests to ensure that computation of float areas for shape-outside shapes works for elements that are offset from their containing block. MozReview-Commit-ID: FWUfCb9Evhl
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html
testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html
testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list
testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html
testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html
testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html
testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html
testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html
testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -127352,16 +127352,28 @@
       [
        "/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-shapes/shape-outside/shape-image/shape-image-026.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/shape-image-026.html",
+     [
+      [
+       "/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html": [
     [
      "/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html",
      [
       [
        "/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-013-ref.html",
        "=="
       ]
@@ -127844,16 +127856,28 @@
       [
        "/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html": [
+    [
+     "/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html",
+     [
+      [
+       "/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html": [
     [
      "/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html",
      [
       [
        "/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html",
        "=="
       ]
@@ -172820,16 +172844,28 @@
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-055-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001.html": [
     [
      "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001.html",
      [
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001-ref.html",
        "=="
       ]
@@ -173108,16 +173144,28 @@
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-051-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016.html": [
     [
      "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016.html",
      [
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016-ref.html",
        "=="
       ]
@@ -173588,16 +173636,28 @@
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html": [
+    [
+     "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html",
+     [
+      [
+       "/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html": [
     [
      "/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html",
      [
       [
        "/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01-ref.html",
        "=="
       ]
@@ -270385,16 +270445,21 @@
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-055-ref.html": [
     [
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001-ref.html": [
     [
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-002-ref.html": [
     [
      {}
@@ -270495,16 +270560,21 @@
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-051-ref.html": [
     [
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016-ref.html": [
     [
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-017-ref.html": [
     [
      {}
@@ -270685,16 +270755,21 @@
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html": [
     [
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
     [
      {}
     ]
    ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests.sh": [
     [
      {}
@@ -515985,16 +516060,20 @@
   "css/css-shapes/shape-outside/shape-image/shape-image-024.html": [
    "a68bf761c1ee6ab00432036b773b70ae6ba7b7c0",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-025.html": [
    "c20645a47561cfa655b759d20f52d22536776893",
    "reftest"
   ],
+  "css/css-shapes/shape-outside/shape-image/shape-image-026.html": [
+   "a7cbad00762e590050f118a84ef5d6a6fbbb3db3",
+   "reftest"
+  ],
   "css/css-shapes/shape-outside/shape-image/support/animated.gif": [
    "c5252926d8dbf82c06cdb615fda708ca7728f0bb",
    "support"
   ],
   "css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png": [
    "d366673197353a2b32aee7befa9bab425d4a7be1",
    "support"
   ],
@@ -516249,16 +516328,20 @@
   "css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-028.html": [
    "cafd680e210a6d677bde00ae4c5f9263c1e7b48e",
    "reftest"
   ],
   "css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-029.html": [
    "67161f08b8aec3fe9bd94e14cbe865dd4c9d3664",
    "reftest"
   ],
+  "css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html": [
+   "e5b82f3b41a856a34152af46c9cc659202c61843",
+   "reftest"
+  ],
   "css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html": [
    "3ee945e85e3c2a9b502e93c04ed53966551e7df1",
    "support"
   ],
   "css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-010-ref.html": [
    "890dd0754f2c985719c75200dd9ef70e8c1abe14",
    "support"
   ],
@@ -550326,17 +550409,17 @@
    "77a40c794be3488c77edc9528d53755dfc7214b5",
    "reftest"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/selectors4/reftest.list": [
    "76c907a127aec740e17d009a517acccd5d3e9fd4",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list": [
-   "cf1af7daefe2db67dedf186e44744bbb03e537c3",
+   "dd45c0949b1301d526a2ea5b66684e1c7a8b812c",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-border-box-001-ref.html": [
    "f60b429f37b066f9a16dceeb19bfa8ed4f2b0623",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-border-box-001.html": [
    "633f57d18aa6315c4073ecfefb9d6ab2220e0fc1",
@@ -550609,16 +550692,24 @@
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-055-ref.html": [
    "d257a98d01e6225df871e3117273d533e0f51066",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-055.html": [
    "3fa72763f5861efda170bc258a152b9d36c16877",
    "reftest"
   ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html": [
+   "2d26e3249f3fff3ab6b81016784068f6433b1c6e",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html": [
+   "923c596ff05fd5546847db4a3676cc51122681e1",
+   "reftest"
+  ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001-ref.html": [
    "dbd151f3c71007b3788fe86ca245405c8f479325",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001.html": [
    "7b4fec91767c7e9be2d3a5c9fc610af444d48930",
    "reftest"
   ],
@@ -550793,16 +550884,24 @@
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-051-ref.html": [
    "1a417d04b206680ab33f866e82bc91f8ee14d67b",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-051.html": [
    "74cc5ab0e72399c572059bdb0fc29bc743a93e35",
    "reftest"
   ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html": [
+   "2d26e3249f3fff3ab6b81016784068f6433b1c6e",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html": [
+   "ead96f4fca2d3b31049362702df96ef63da83a2b",
+   "reftest"
+  ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016-ref.html": [
    "e6cb3ee3eb3d0c521303b6010546e0b743a4090c",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016.html": [
    "9ff9f0e34c5c77188e3c7709c751d4aeaa20ff25",
    "reftest"
   ],
@@ -551105,16 +551204,24 @@
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html": [
    "7bbccdb15fdf67a67bbc243c342c668fbef23af8",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html": [
    "217e140bdd429d6889102e43253e6fb64dca4705",
    "reftest"
   ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html": [
+   "890dd0754f2c985719c75200dd9ef70e8c1abe14",
+   "support"
+  ],
+  "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html": [
+   "bc5ea0a69154ce2cc4d08ea3b5d48b62a6c7fedc",
+   "reftest"
+  ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
    "2c4512ec008c997d1254b5822ade227c057b7e24",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests.sh": [
    "1c18dc5fdcddbbd08dbdc812f538a175e58892d7",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Test: left float, url(png), real offset image + shape-margin (px)</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-image"/>
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+    <link rel="match" href="reference/shape-image-006-ref.html"/>
+    <meta name="flags" content="ahem"/>
+    <meta name="assert" content="This test verifies that content wraps around all the image pixels
+                                 + the shape-margin when shape-outside is given a png file.
+                                 Additionally, the shape-outside: image element is offset from its
+                                 containing block."/>
+    <style type="text/css">
+        body {
+            margin: 0;
+        }
+        .container {
+          font: 50px/1 Ahem;
+          padding: 50px;
+          position: absolute;
+          top: 20px;
+          left: -40px;
+        }
+        #test {
+            width: 200px;
+            color: rgb(0,100,0);
+        }
+        #image {
+            float: left;
+            shape-outside: url("support/left-half-rectangle.png");
+            shape-margin: 10px;
+        }
+        .blue {
+            width: 2px;
+            height: 100px;
+            background-color: blue;
+        }
+        .left-line { left: 65px; }
+        .right-line { left: 125px; }
+
+        .failure {
+            left: 70px;
+            width: 50px;
+            height: 100px;
+            background-color: red;
+            z-index: -1;
+        }
+        .blue, .failure {
+            position: absolute;
+            top: 70px;
+        }
+    </style>
+</head>
+<body>
+    <p>
+        The test passes if the green rectangle on the right is completely between the two blue lines.
+        There should be no red.
+    </p>
+    <div id="test" class="container">
+        <img id="image" src="support/left-half-rectangle.png"/>
+        X<br/>X
+    </div>
+    <div class="blue left-line"></div>
+    <div class="blue right-line"></div>
+    <div class="failure"></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Test: left float, offset inset, px units</title>
+        <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+        <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+        <meta name="flags" content="ahem" />
+        <meta name="assert" content="The test verfies that text flows around a
+                                     right float with a shape-outside defined as
+                                     an inset irregular elliptically rounded
+                                     rectangle in px units with a shape-margin.
+                                     Additionally, the shape-outside: inset element is
+                                     offset from its containing block.">
+    </head>
+    <style>
+        #container {
+            position: relative;
+            margin-left: 25px;
+        }
+        #red {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            background-color: red;
+        }
+        #test-container {
+            width: 200px;
+            height: 200px;
+            font: 25px/1 Ahem;
+            color: green;
+            text-align: right;
+            padding: 50px;
+            position: absolute;
+            top: -50px;
+            left: -50px;
+        }
+        #test-shape {
+            float: right;
+            width: 200px;
+            height: 200px;
+            shape-margin: 10px;
+            shape-outside: inset(60px 10px 60px 110px round 70px 0px 0px 10px / 10px 0px 0px 20px);
+        }
+        #static-shape {
+            position: absolute;
+            left: 100px;
+            width: 100px;
+            height: 100px;
+            top: 50px;
+            background-color: green;
+        }
+    </style>
+    <body>
+        <p>The test passes if there is a green square and no red.</p>
+        <div id="container">
+            <div id="red"></div>
+            <div id="test-container">
+                <div id="test-shape"></div>
+                XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+            </div>
+            <div id="static-shape"></div>
+        </div>
+    </body>
+</html>
--- a/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list
@@ -55,16 +55,17 @@
 == shape-outside-circle-048.html shape-outside-circle-048-ref.html
 == shape-outside-circle-049.html shape-outside-circle-049-ref.html
 == shape-outside-circle-050.html shape-outside-circle-050-ref.html
 == shape-outside-circle-051.html shape-outside-circle-051-ref.html
 == shape-outside-circle-052.html shape-outside-circle-052-ref.html
 == shape-outside-circle-053.html shape-outside-circle-053-ref.html
 == shape-outside-circle-054.html shape-outside-circle-054-ref.html
 == shape-outside-circle-055.html shape-outside-circle-055-ref.html
+== shape-outside-circle-056.html shape-outside-circle-056-ref.html
 
 # Basic shape: ellipse()
 == shape-outside-ellipse-032.html shape-outside-ellipse-032-ref.html
 == shape-outside-ellipse-033.html shape-outside-ellipse-033-ref.html
 == shape-outside-ellipse-034.html shape-outside-ellipse-034-ref.html
 == shape-outside-ellipse-035.html shape-outside-ellipse-035-ref.html
 == shape-outside-ellipse-036.html shape-outside-ellipse-036-ref.html
 == shape-outside-ellipse-037.html shape-outside-ellipse-037-ref.html
@@ -77,16 +78,17 @@
 == shape-outside-ellipse-044.html shape-outside-ellipse-044-ref.html
 == shape-outside-ellipse-045.html shape-outside-ellipse-045-ref.html
 == shape-outside-ellipse-046.html shape-outside-ellipse-046-ref.html
 == shape-outside-ellipse-047.html shape-outside-ellipse-047-ref.html
 == shape-outside-ellipse-048.html shape-outside-ellipse-048-ref.html
 == shape-outside-ellipse-049.html shape-outside-ellipse-049-ref.html
 == shape-outside-ellipse-050.html shape-outside-ellipse-050-ref.html
 == shape-outside-ellipse-051.html shape-outside-ellipse-051-ref.html
+== shape-outside-ellipse-052.html shape-outside-ellipse-052-ref.html
 
 # Basic shape: inset()
 == shape-outside-inset-016.html shape-outside-inset-016-ref.html
 == shape-outside-inset-017.html shape-outside-inset-017-ref.html
 == shape-outside-inset-018.html shape-outside-inset-018-ref.html
 == shape-outside-inset-019.html shape-outside-inset-019-ref.html
 == shape-outside-inset-020.html shape-outside-inset-020-ref.html
 == shape-outside-inset-021.html shape-outside-inset-021-ref.html
@@ -107,8 +109,9 @@
 == shape-outside-polygon-024.html shape-outside-polygon-024-ref.html
 == shape-outside-polygon-025.html shape-outside-polygon-025-ref.html
 == shape-outside-polygon-026.html shape-outside-polygon-026-ref.html
 == shape-outside-polygon-027.html shape-outside-polygon-027-ref.html
 == shape-outside-polygon-028.html shape-outside-polygon-026-ref.html
 == shape-outside-polygon-029.html shape-outside-polygon-027-ref.html
 == shape-outside-polygon-030.html shape-outside-polygon-030-ref.html
 == shape-outside-polygon-031.html shape-outside-polygon-031-ref.html
+== shape-outside-polygon-032.html shape-outside-polygon-032-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Reference File</title>
+        <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    </head>
+    <style>
+       body {
+           margin: 0;
+       }
+       #container {
+           position: relative;
+       }
+       #line {
+           position: absolute;
+           top: 0px;
+           left: 168px;
+           width: 2px;
+           height: 200px;
+           border-left: 2px solid blue;
+       }
+       #square {
+           position: absolute;
+           top: 80px;
+           left: 170px;
+           width: 40px;
+           height: 40px;
+           background-color: green;
+       }
+    </style>
+    <body>
+        <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+        <div id="container">
+            <div id="line"></div>
+            <div id="square"></div>
+        </div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Test: left float, offset circle at top left + margin-box + shape-margin</title>
+        <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
+        <link rel="match" href="shape-outside-circle-056-ref.html">
+        <meta name="flags" content="ahem" />
+        <meta name="assert" content="The test verifies that text wraps around a
+                                     left float with a shape-outside defined as
+                                     a circle from the margin box and is positioned
+                                     top left with a shape-margin. Additionally, the
+                                     shape-outside: circle element is offset from
+                                     its containing block.">
+    </head>
+    <style>
+    body {
+        margin: 0;
+    }
+    #container {
+        position: relative;
+    }
+    #test-container {
+        font: 40px/1 Ahem, sans-serif;
+        width: 300px;
+        height: 200px;
+        padding: 50px;
+        position: absolute;
+        top: -50px;
+        left: -50px;
+        color: green;
+    }
+    #test-shape {
+        float: left;
+        width: 120px;
+        height: 120px;
+        margin: 10px;
+        padding: 10px;
+        border: 10px solid transparent;
+        shape-margin: 10px;
+        shape-outside: margin-box circle(99% at top left);
+    }
+    #line {
+        position: absolute;
+        top: 0px;
+        left: 168px;
+        width: 2px;
+        height: 200px;
+        border-left: 2px solid blue;
+    }
+    #failure {
+        position: absolute;
+        top: 80px;
+        left: 170px;
+        width: 40px;
+        height: 40px;
+        background-color: red;
+        z-index: -1;
+    }
+    </style>
+    <body>
+    <p>The test passes if there is a green square to the right 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>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Reference File</title>
+        <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    </head>
+    <style>
+       body {
+           margin: 0;
+       }
+       #container {
+           position: relative;
+       }
+       #line {
+           position: absolute;
+           top: 0px;
+           left: 168px;
+           width: 2px;
+           height: 200px;
+           border-left: 2px solid blue;
+       }
+       #square {
+           position: absolute;
+           top: 80px;
+           left: 170px;
+           width: 40px;
+           height: 40px;
+           background-color: green;
+       }
+    </style>
+    <body>
+        <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+        <div id="container">
+            <div id="line"></div>
+            <div id="square"></div>
+        </div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Test: left float, offset ellipse + shape-margin in % units</title>
+        <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+        <link rel="match" href="shape-outside-ellipse-052-ref.html">
+        <meta name="flags" content="ahem" />
+        <meta name="assert" content="The test verifies that text wraps around a
+                                     left float with a shape-outside defined as
+                                     a ellipse with a shape-margin in pixel units.
+                                     Additionally, the shape-outside: ellipse element
+                                     is offset from its containing block.">
+    </head>
+    <style>
+    body {
+        margin: 0;
+    }
+    #container {
+        position: relative;
+    }
+    #test-container {
+        font: 40px/1 Ahem, sans-serif;
+        width: 300px;
+        height: 200px;
+        color: green;
+        padding: 50px;
+        position: absolute;
+        top: -50px;
+        left: -50px;
+    }
+    #test-shape {
+        float: left;
+        width: 140px;
+        height: 140px;
+        margin: 10px;
+        padding: 10px;
+        border: 10px solid transparent;
+        shape-margin: 30px;
+        shape-outside: ellipse(40px 28px);
+    }
+    #line {
+        position: absolute;
+        top: 0px;
+        left: 168px;
+        width: 2px;
+        height: 200px;
+        border-left: 2px solid blue;
+    }
+    #failure {
+        position: absolute;
+        top: 80px;
+        left: 170px;
+        width: 40px;
+        height: 40px;
+        background-color: red;
+        z-index: -1;
+    }
+    </style>
+    <body>
+    <p>The test passes if there is a green square to the right 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>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Reference File</title>
+        <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    </head>
+    <style>
+       body {
+            margin: 0;
+        }
+       #green-square {
+          position: absolute;
+          top: 50px;
+          left: 10px;
+          width: 240px;
+          height: 240px;
+          background-color: green;
+      }
+    </style>
+    <body>
+        <p>The test passes if there is green square and no red.</p>
+        <div id="green-square"></div>
+    </body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Test: right float, offset polygon + margin-box + shape-margin</title>
+        <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
+        <link rel="match" href="shape-outside-polygon-032-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
+                                     an polygon from the margin box with a shape margin.
+                                     Additionally, the shape-outside: polygon element is
+                                     offset from its containing block.">
+    </head>
+    <style>
+        body {
+            margin: 0;
+        }
+        #red {
+            position: absolute;
+            top: 50px;
+            left: 10px;
+            width: 240px;
+            height: 240px;
+            background-color: red;
+        }
+        #container {
+            position: absolute;
+            top: 0px;
+            left: -40px;
+            font-size: 20px;
+            font-family: Ahem;
+            line-height: 20px;
+            width: 240px;
+            height: 240px;
+            padding: 50px;
+            color: green;
+        }
+        #test-shape {
+            float: right;
+            width: 120px;
+            height: 120px;
+            margin: 10px;
+            border: 10px solid transparent;
+            padding: 10px;
+            shape-margin: 20px;
+            shape-outside: margin-box polygon(20% 20%, 90% 20%, 90% 80%, 50% 80%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
+        }
+        .ref-shape {
+            position: absolute;
+            background-color: green;
+        }
+        #ref-1 {
+            top: 70px;
+            left: 70px;
+            width: 180px;
+            height: 80px;
+        }
+        #ref-2 {
+            top: 150px;
+            left: 150px;
+            width: 100px;
+            height: 20px;
+        }
+        #ref-3 {
+            top: 170px;
+            left: 130px;
+            width: 120px;
+            height: 60px;
+        }
+    </style>
+    <body>
+    <p>The test passes if there is green square and no red.</p>
+    <div id="red"></div>
+    <div id="container">
+        <div id="test-shape"></div>
+        XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
+    </div>
+    <div id="ref-1" class="ref-shape"></div>
+    <div id="ref-2" class="ref-shape"></div>
+    <div id="ref-3" class="ref-shape"></div>
+    </body>
+</html>