third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-polygon-002.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-002-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     -webkit-writing-mode: vertical-rl;
  16 }
  17 .float-left {
  18     width: 200px;
  19     height: 200px;
  20     shape-outside: polygon(0px 0px, 200px 200px, 200px 0px);
  21     float: left;
  22 }
  23 .float-right {
  24     margin-top: 100px;
  25     width: 200px;
  26     height: 100px;
  27     shape-outside: polygon(0px 100px, 0px -100px, 200px 100px) content-box;
  28     float: right;
  29 }
  30 </style>
  31 <body>
  32   <div class="container">
  33     <div class="float-left"></div>
  34     XXXXXXXXXX
  35     XXXXXXXXXXX
  36     XXXXXXXXXXXX
  37     XXXXXXXXXXXXX
  38     XXXXXXXXXXXXXX
  39     XXXXXXXXXXXXXXX
  40     XXXXXXXXXXXXXXXX
  41     XXXXXXXXXXXXXXXXX
  42     XXXXXXXXXXXXXXXXXX
  43     XXXXXXXXXXXXXXXXXXX
  44     <div class="float-right"></div>
  45     XXXXXXXXXXXXXXXXXXX
  46     XXXXXXXXXXXXXXXXXX
  47     XXXXXXXXXXXXXXXXX
  48     XXXXXXXXXXXXXXXX
  49     XXXXXXXXXXXXXXX
  50     XXXXXXXXXXXXXX
  51     XXXXXXXXXXXXX
  52     XXXXXXXXXXXX
  53     XXXXXXXXXXX
  54     XXXXXXXXXX
  55   </div>
  56 </body>