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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Test: right float, url(png), real image + shape-image-threshold + shape-margin (%)</title>
   5     <link rel="author" title="Hans Muller" href="hmuller@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-021-ref.html"/>
   9     <meta name="flags" content="ahem"/>
  10     <meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a PNG image file and shape-margin is correct."/>
  11     <style type="text/css">
  12         #container {
  13           position: relative;
  14           width: 200px;
  15           font-family: Ahem;
  16           font-size: 40px;
  17           text-align: right;
  18           color: green;
  19         }
  20         #image {
  21           float: right;
  22           margin-left: 100px;
  23           shape-outside: url("support/right-half-rectangle.png"); /* size: 100x100, only the right 50x100 half is opaque */
  24           shape-margin: 10%; /* overall shape is 120x90 rectangle with corner radii = 20px */
  25           shape-image-threshold: 0.5;
  26         }
  27         #failure {
  28           position: absolute;
  29           top: 0px;
  30           left: 90px; /* container.width - shape-outside+margin.width - font-size */
  31           width: 200px;
  32           text-align: left;
  33           color: red;
  34           z-index: -1;
  35         }
  36     </style>
  37 </head>
  38 <body>
  39     <p>The test passes if no red is visible.</p>
  40     <div id="container">
  41         <img id="image" src="support/right-half-rectangle.png"/>
  42         X<br>X<br>X<br>X
  43         <div id="failure">
  44             X<br>X<br>X<br><span style="margin-left: 70px">X</span>
  45         </div>
  46     </div>
  47 </body>
  48 </html>