LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Test: left float, url(png), real negative offset image + shape-margin (px)</title>
   5     <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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                                  Additionally, the shape-outside: image element is given a negative
  14                                  left offset relative to its containing block."/>
  15     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
  16     <style type="text/css">
  17         body {
  18             margin: 0;
  19         }
  20         .container {
  21           left: 10px;
  22           font: 50px/1 Ahem;
  23         }
  24         #test {
  25             width: 200px;
  26             color: rgb(0,100,0);
  27         }
  28         #image {
  29             float: left;
  30             shape-outside: url("support/left-half-rectangle.png");
  31             shape-margin: 20px;
  32             margin-left: -10px;
  33             width: 100px;
  34             height: 100px;
  35         }
  36         .blue {
  37             width: 2px;
  38             height: 100px;
  39             background-color: blue;
  40         }
  41         .left-line { left: 65px; }
  42         .right-line { left: 125px; }
  43
  44         .failure {
  45             left: 70px;
  46             width: 50px;
  47             height: 100px;
  48             background-color: red;
  49             z-index: -1;
  50         }
  51         .container, .blue, .failure {
  52             position: absolute;
  53             top: 70px;
  54         }
  55     </style>
  56 </head>
  57 <body>
  58     <p>
  59         The test passes if the green rectangle on the right is completely between the two blue lines.
  60         There should be no red.
  61     </p>
  62     <div id="test" class="container">
  63         <div id="image"><img src="support/left-half-rectangle.png" style="margin-left: 10px"/></div>
  64         X<br/>X
  65     </div>
  66     <div class="blue left-line"></div>
  67     <div class="blue right-line"></div>
  68     <div class="failure"></div>
  69 </body>
  70 </html>