third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-big-box-border-radius-002.html

   1 <!DOCTYPE html>
   2 <style>
   3 #container {
   4     width: 300px;
   5     font: 40px/1 Ahem;
   6     color: green;
   7     text-align: right;
   8 }
   9
  10 #float {
  11     float: right;
  12     width: 240px;
  13     height: 120px;
  14     border-top-left-radius: 60px;
  15     border-bottom-left-radius: 60px;
  16     border-top-right-radius: 0px;
  17     border-bottom-right-radius: 120px;
  18     background-color: blue;
  19     background-clip: border-box;
  20     shape-outside: border-box;
  21     margin-left: 20px; /* demonstrate that the shape defines the char's position */
  22 }
  23 </style>
  24 <body>
  25     <p>The green square should apear to the left of the blue rounded shape.
  26     <div id="container">
  27         <div id="float"></div>
  28         <br>X
  29     </div>
  30 </body>