third_party/WebKit/LayoutTests/imported/csswg-test/css-shapes-1/spec-examples/shape-outside-011.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Test: Shape from image - url(), alpha channel, opacity > 0</title>
   5     <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
   6     <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
   7     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
   8     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
   9     <meta name="flags" content="ahem dom"/>
  10     <meta name="assert" content="This test verifies that the content flows around the
  11                                  shape defined in the images alpha channel that has some
  12                                  opacity."/>
  13     <!--  This test is derived from Example 7 in this version of the spec:
  14          http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/  -->
  15     <style type="text/css">
  16         .container {
  17           width: 400px;
  18           font-family: Ahem;
  19           font-size: 20px;
  20           line-height: 2em;
  21         }
  22         #test {
  23             color: green;
  24         }
  25         #image {
  26             float: left;
  27             shape-outside: url("support/circle-shadow.png");
  28         }
  29     </style>
  30     <script src="../../../../resources/testharness.js"></script>
  31     <script src="../../../../resources/testharnessreport.js"></script>
  32     <script src="support/spec-example-utils.js"></script>
  33 </head>
  34 <body>
  35     <p>
  36         The test passes if the green horizontal bars are to the right of the circle,
  37         and no bars intersect the circle's shadow. There should be no red.
  38     </p>
  39     <div id="test" class="container">
  40         <img id="image" src="support/circle-shadow.png"/>
  41         <span id="line-0">XXXXXX</span>
  42         <span id="line-1">XXXXXX</span>
  43         <span id="line-2">XXXXXX</span>
  44         <span id="line-3">XXXXXX</span>
  45         <span id="line-4">XXXXXX</span>
  46         <span id="line-5">XXXXXX</span>
  47     </div>
  48     <div id="log"></div>
  49     <script>
  50         approxShapeTest('test', 'line-', 2, [218, 236, 238, 236, 218, 160]);
  51     </script>
  52 </body>
  53 </html>