diff --git a/testing/web-platform/meta/MANIFEST.json b/testing/web-platform/meta/MANIFEST.json
index b7005adff889..737e9330d248 100644
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -127357,6 +127357,18 @@
      {}
     ]
    ],
+   "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",
@@ -127849,6 +127861,18 @@
      {}
     ]
    ],
+   "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",
@@ -172825,6 +172849,18 @@
      {}
     ]
    ],
+   "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",
@@ -173113,6 +173149,18 @@
      {}
     ]
    ],
+   "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",
@@ -173593,6 +173641,18 @@
      {}
     ]
    ],
+   "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",
@@ -270390,6 +270450,11 @@
      {}
     ]
    ],
+   "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": [
     [
      {}
@@ -270500,6 +270565,11 @@
      {}
     ]
    ],
+   "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": [
     [
      {}
@@ -270690,6 +270760,11 @@
      {}
     ]
    ],
+   "css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
     [
      {}
@@ -515990,6 +516065,10 @@
    "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"
@@ -516254,6 +516333,10 @@
    "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"
@@ -550331,7 +550414,7 @@
    "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": [
@@ -550614,6 +550697,14 @@
    "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"
@@ -550798,6 +550889,14 @@
    "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"
@@ -551110,6 +551209,14 @@
    "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"
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html
new file mode 100644
index 000000000000..40482f8b9702
--- /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>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html
new file mode 100644
index 000000000000..0daa382f1544
--- /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>
diff --git 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
index eb4d7f498156..fbee28923a48 100644
--- 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
@@ -60,6 +60,7 @@
 == 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
@@ -82,6 +83,7 @@
 == 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
@@ -112,3 +114,4 @@
 == 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
diff --git a/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html
new file mode 100644
index 000000000000..f4f21058a666
--- /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>
+
diff --git a/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html
new file mode 100644
index 000000000000..056d40b257e0
--- /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>
+
diff --git a/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html
new file mode 100644
index 000000000000..f4f21058a666
--- /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>
+
diff --git a/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html
new file mode 100644
index 000000000000..831b10168a4d
--- /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>
+
diff --git a/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html
new file mode 100644
index 000000000000..f1fcdf40d719
--- /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
diff --git a/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html b/testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html
new file mode 100644
index 000000000000..126e0b90ae1b
--- /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>