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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Test: Wrapping content around right floating actual jpg image</title>
   5     <link rel="author" title="Zoltan Horvath" href="zoltan@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-012-ref.html"/>
   9     <meta name="flags" content="ahem"/>
  10     <meta name="assert" content="This test verifies that content wraps around all the image pixels when shape-outside is given a jpg."/>
  11     <style type="text/css">
  12         .container {
  13             position: absolute;
  14             top: 70px;
  15             left: 8px;
  16             font-family: Ahem;
  17             font-size: 20px;
  18             color: green;
  19             line-height: 20px;
  20         }
  21         #test {
  22             width: 200px;
  23             height: 200px;
  24             text-align: right;
  25             background-color: red;
  26         }
  27         #image {
  28             float: right;
  29             margin-left: 10px;
  30             shape-outside: url("support/right-half-rectangle.jpg");
  31         }
  32     </style>
  33 </head>
  34 <body>
  35     <p>
  36         The test passes if there's a green square with an image at top right with vertical white and green stripes.
  37         There should be no red.
  38     </p>
  39     <div id="test" class="container">
  40         <img id="image" src="support/right-half-rectangle.jpg"/>
  41         XXXXX XXXXX XXXXX XXXXX XXXXX
  42         XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
  43     </div>
  44 </body>
  45 </html>