third_party/WebKit/LayoutTests/http/tests/shapes/shape-outside-image-shape-margin.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Test: Image shape with margin-right + shape-margin on a left float</title>
   5     <script src="/js-test-resources/ahem.js"></script>
   6     <link rel="author" title="Rebecca Hauck" href="rhauck@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     <link rel="help" href="http://www.w3.org/TR/css-shapes/#shape-margin-property"/>
  10     <meta name="flags" content="ahem image"/>
  11     <meta name="assert" content="This test verifies that the image shape that defines the float
  12                                  area is clipped to the float's margin box and respects the
  13                                  shape-margin extending beyond the margin-left, causing the
  14                                  text to be pushed below the defined shape."/>
  15     <style type="text/css">
  16         #outer {
  17             position: relative;
  18             width: 100px;
  19             height: 250px;
  20         }
  21         .container {
  22               position: relative;
  23               font-family: Ahem;
  24               font-size: 50px;
  25               line-height: 50px;
  26         }
  27         #test {
  28             width: 100px;
  29             height: 100px;
  30             color: rgb(0, 100, 0);
  31         }
  32         #shape-div {
  33             float: left;
  34             width: 50px;
  35             height: 180px;
  36             shape-margin: 20px;
  37             shape-outside: url(../resources/square.png);
  38             margin-right: 10px;
  39         }
  40         #ref {
  41             position: absolute;
  42             top: 120px;
  43         }
  44         #line {
  45             width: 100px;
  46             height: 1px;
  47             background-color: black;
  48         }
  49          #failure {
  50             width: 50px;
  51             height: 99px;
  52             background-color: red;
  53             z-index: -1;
  54         }
  55     </style>
  56 </head>
  57 <body>
  58     <p>
  59         The test passes if the green rectangle is below the line. There should be no red.
  60     </p>
  61     <div id="outer">
  62         <div id="ref">
  63             <div id="line"></div>
  64             <div id="failure"></div>
  65         </div>
  66         <div id="test" class="container">
  67             <div id="shape-div"></div>
  68             x x
  69         </div>
  70     </div>
  71 </body>
  72 </html>