third_party/WebKit/LayoutTests/imported/csswg-test/css-shapes-1/shape-outside/shape-image/shape-image-025.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Test: shape-outside from first frame of animated gif</title>
   5     <link rel="author" title="Rebecca Hauck" href="rhauck@adobe.com"/>
   6     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
   7     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
   8     <link rel="match" href="reference/shape-image-025-ref.html"/>
   9     <meta name="flags" content="ahem"/>
  10     <meta name="assert" content="This test verifies that shape-outside is extracted from the
  11                                  first frame of an animated gif."/>
  12     <style type="text/css">
  13         body { margin: 0; }
  14         .container {
  15           left: 10px;
  16           width: 200px;
  17           font: 50px/1 Ahem;
  18           color: rgb(0,100,0);
  19         }
  20         #image {
  21             float: left;
  22             shape-outside: url("support/animated.gif");
  23         }
  24         .blue-line {
  25             top: 50px;
  26             left: 60px;
  27             width: 2px;
  28             height: 140px;
  29             background-color: blue;
  30         }
  31         .square {
  32             width: 50px;
  33             height: 50px;
  34         }
  35         .green {
  36             left: 10px;
  37             background-color: rgb(0,100,0);
  38         }
  39         .failure {
  40             left: 60px;
  41             background-color: red;
  42             z-index: -1;
  43         }
  44         .container, .blue-line, .square, .failure { position: absolute; }
  45         .container, .square, .failure { top: 70px; }
  46     </style>
  47 </head>
  48 <body>
  49     <p>
  50         The test passes if there are two identical green rectangles on either side of the blue line.
  51         There should be no red.
  52     </p>
  53     <div class="container">
  54         <img id="image" src="support/animated.gif"/>
  55        X<br/>X
  56     </div>
  57     <div class="green square"></div>
  58     <div class="blue-line"></div>
  59     <div class="failure square"></div>
  60 </body>
  61 </html>
  62