third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-edge-case-expected.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     }
  18     #left-shape {
  19         float: left;
  20         width: 50px;
  21         height: 50px;
  22         background-color: blue;
  23     }
  24 </style>
  25 </head>
  26 <body>
  27   <p>The blue squares on the left and right should be surrounded by three green squares.</p>
  28   <div id="content">
  29       <div style="text-align: right">
  30         X<br>
  31         <div id="right-shape"></div>
  32         X<br>X
  33       </div>
  34       X<br>
  35       <div id="left-shape"></div>
  36       X<br>X
  37   </div>
  38 </body>
  39 </html>