third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-polygon-000.html

   1 <!DOCTYPE html>
   2 <title>CSS Test: polygon shape-outside on floats</title>
   3 <link rel="author" title="Adobe" href="http://html.adobe.com/">
   4 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
   5 <link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
   6 <link rel="match" href="shape-outside-floats-polygon-000-ref.html">
   7 <meta name="flags" content="ahem">
   8 <style>
   9 .container {
  10     font: 20px/1 Ahem, sans-serif;
  11     line-height: 20px;
  12     width: 400px;
  13     height: 400px;
  14     background: blue;
  15 }
  16 .float-left {
  17     width: 200px;
  18     height: 200px;
  19     shape-outside: polygon(0px 0px, 200px 0px, 0px 200px);
  20     float: left;
  21 }
  22 .float-right {
  23     margin-left: 100px;
  24     width: 100px;
  25     height: 200px;
  26     shape-outside: polygon(100px 0px, -100px 200px, 100px 200px) content-box;
  27     float: right;
  28 }
  29 </style>
  30 <body>
  31   <div class="container">
  32     <div class="float-left"></div>
  33     XXXXXXXXXX
  34     XXXXXXXXXXX
  35     XXXXXXXXXXXX
  36     XXXXXXXXXXXXX
  37     XXXXXXXXXXXXXX
  38     XXXXXXXXXXXXXXX
  39     XXXXXXXXXXXXXXXX
  40     XXXXXXXXXXXXXXXXX
  41     XXXXXXXXXXXXXXXXXX
  42     XXXXXXXXXXXXXXXXXXX
  43     <div class="float-right"></div>
  44     XXXXXXXXXXXXXXXXXXX
  45     XXXXXXXXXXXXXXXXXX
  46     XXXXXXXXXXXXXXXXX
  47     XXXXXXXXXXXXXXXX
  48     XXXXXXXXXXXXXXX
  49     XXXXXXXXXXXXXX
  50     XXXXXXXXXXXXX
  51     XXXXXXXXXXXX
  52     XXXXXXXXXXX
  53     XXXXXXXXXX
  54   </div>
  55 </body>