css/css-shapes/spec-examples/shape-outside-011.html

<!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>