1 files changed, 58 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-011.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-011.html
new file mode 100644
index 0000000000..5f63c12cd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-011.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Test: Shape from image - url(), alpha channel, opacity > 0</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-image"/>
+    <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 the content flows around the
+                                 shape defined in the images alpha channel that has some
+                                 opacity."/>
+    <!-- This test is derived from Example 7 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">
+        .container {
+          width: 400px;
+          font-family: Ahem;
+          font-size: 20px;
+          line-height: 2em;
+        }
+        #test {
+            color: green;
+        }
+        #image {
+            float: left;
+            shape-outside: url("support/circle-shadow.png");
+        }
+    </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 });
+    function checkFloats() {
+      approxShapeTest('test', 'line-', 2, [218, 236, 238, 236, 218, 160]);
+      done();
+    }
+    </script>
+</head>
+<body onload="checkFloats();">
+    <p>
+        The test passes if the green horizontal bars are to the right of the circle,
+        and no bars intersect the circle's shadow. There should be no red.
+    </p>
+    <div id="test" class="container">
+        <img id="image" src="support/circle-shadow.png"/>
+        <span id="line-0">XXXXXX</span>
+        <span id="line-1">XXXXXX</span>
+        <span id="line-2">XXXXXX</span>
+        <span id="line-3">XXXXXX</span>
+        <span id="line-4">XXXXXX</span>
+        <span id="line-5">XXXXXX</span>
+    </div>
+    <div id="log"></div>
+</body>
+</html>