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