--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -127340,16 +127340,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",
        "=="
       ]
@@ -127832,16 +127844,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",
        "=="
       ]
@@ -172808,16 +172832,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",
        "=="
       ]
@@ -173096,16 +173132,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",
        "=="
       ]
@@ -173576,16 +173624,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",
        "=="
       ]
@@ -270373,16 +270433,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": [
     [
      {}
@@ -270483,16 +270548,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": [
     [
      {}
@@ -270673,16 +270743,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": [
     [
      {}
@@ -515918,16 +515993,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"
   ],
@@ -516182,16 +516261,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"
   ],
@@ -550251,17 +550334,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",
@@ -550534,16 +550617,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"
   ],
@@ -550718,16 +550809,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"
   ],
@@ -551030,16 +551129,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>