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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Test: left float, url(png), real image + shape-margin (px)</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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
   9     <link rel="match" href="reference/shape-image-006-ref.html"/>
  10     <meta name="flags" content="ahem"/>
  11     <meta name="assert" content="This test verifies that content wraps around all the image pixels
  12                                  + the shape-margin when shape-outside is given a png file."/>
  13     <style type="text/css">
  14         body {
  15             margin: 0;
  16         }
  17         .container {
  18           left: 10px;
  19           font: 50px/1 Ahem;
  20         }
  21         #test {
  22             width: 200px;
  23             color: rgb(0,100,0);
  24         }
  25         #image {
  26             float: left;
  27             shape-outside: url("support/left-half-rectangle.png");
  28             shape-margin: 10px;
  29         }
  30         .blue {
  31             width: 2px;
  32             height: 100px;
  33             background-color: blue;
  34         }
  35         .left-line { left: 65px; }
  36         .right-line { left: 125px; }
  37
  38         .failure {
  39             left: 70px;
  40             width: 50px;
  41             height: 100px;
  42             background-color: red;
  43             z-index: -1;
  44         }
  45         .container, .blue, .failure {
  46             position: absolute;
  47             top: 70px;
  48         }
  49     </style>
  50 </head>
  51 <body>
  52     <p>
  53         The test passes if the green rectangle on the right is completely between the two blue lines.
  54         There should be no red.
  55     </p>
  56     <div id="test" class="container">
  57         <img id="image" src="support/left-half-rectangle.png"/>
  58         X<br/>X
  59     </div>
  60     <div class="blue left-line"></div>
  61     <div class="blue right-line"></div>
  62     <div class="failure"></div>
  63 </body>
  64 </html>