1 files changed, 66 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-018.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-018.html
new file mode 100644
index 0000000000..6c285e07f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-018.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Test: shape-margin offset from a polygonal shape-outside</title>
+    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/>
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+    <meta name="flags" content="ahem dom"/>
+    <meta name="assert" content="This test verifies that that content flows around the shape-margin
+                                 defined on a polygonal shape-outside."/>
+    <!-- This test is derived from Example 10 in this version of the spec:
+         http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ -->
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css">
+        #test {
+            position: relative;
+            color: green;
+            width: 300px;
+            font-family: Ahem;
+            font-size: 20px;
+            line-height: 2em;
+        }
+        #shape-box {
+            float: left;
+            width: 200px;
+            height: 200px;
+            shape-outside: polygon(20px 40px, 160px 180px, 20px 180px);
+            shape-margin: 20px;
+        }
+        img {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            z-index: -1;
+        }
+    </style>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/spec-example-utils.js"></script>
+    <script>
+    setup({single_test: true});
+    document.fonts.ready.then(()=> {
+      approxShapeTest('test', 'line-', 2, [48, 88, 128, 168, 180, 0]);
+      done();
+    });
+    </script>
+</head>
+<body>
+    <p>
+        The test passes if the longest green horizontal bar is beneath the triangle and the
+        rest of them are to its right and none intersect it. There should be no red.
+    </p>
+    <div id="test">
+        <div id="shape-box"></div>
+        <img src="support/rounded-triangle.svg">
+        <span id="line-0">XXXXXXXXXX</span>
+        <span id="line-1">XXXXXXXX</span>
+        <span id="line-2">XXXXXX</span>
+        <span id="line-3">XXXX</span>
+        <span id="line-4">XXX</span>
+        <span id="line-5">XXXXXXXXXXXX</span>
+    </div>
+    <div id="log"></div>
+</body>
+</html>