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

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