third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-edge-case.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #content {
   6         font: 50px/1 Ahem, sans-serif;
   7         -webkit-font-smoothing: antialiased;
   8         color: green;
   9         width: 300px;
  10         border: 1px solid black;
  11     }
  12     #right-shape {
  13         float: right;
  14         width: 50px;
  15         height: 50px;
  16         background-color: blue;
  17         margin-left: 50px; /* effectively overridden by shape-outside */
  18         shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
  19     }
  20     #left-shape {
  21         float: left;
  22         width: 50px;
  23         height: 50px;
  24         background-color: blue;
  25         margin-right: 50px; /* effectively overridden by shape-outside */
  26         shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
  27     }
  28 </style>
  29 </head>
  30 <body>
  31   <p>The blue squares on the left and right should be surrounded by three green squares.</p>
  32   <div id="content">
  33       <div style="text-align: right">
  34         X<br>
  35         <div id="right-shape"></div>
  36         X<br>X
  37       </div>
  38       X<br>
  39       <div id="left-shape"></div>
  40       X<br>X
  41   </div>
  42 </body>
  43 </html>