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

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