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

   1 <!DOCTYPE html>
   2 <title>CSS Test: circle 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-ellipse-000-ref.html">
   7 <meta name="flags" content="ahem">
   8 <style>
   9 .container {
  10     font: 20px/1 Ahem, sans-serif;
  11     width: 500px;
  12     height: 200px;
  13     border: 1px solid black;
  14 }
  15
  16 .ellipse {
  17     width: 320px;
  18     height: 160px;
  19     background-color: blue;
  20     overflow: hidden;
  21     border-radius: 160px / 80px;
  22     shape-outside: ellipse(160px 80px at 160px 80px);
  23 }
  24 </style>
  25
  26 <body>
  27 <p>The black squares should trace the right side of the ellipse's blue outline.</p>
  28 <div class="container">
  29 X<br/>
  30     <div style="float: left" class="ellipse"></div>
  31 X<br/>
  32 X<br/>
  33 X<br/>
  34 X<br/>
  35 X<br/>
  36 X<br/>
  37 X<br/>
  38 X<br/>
  39 X
  40 </div>
  41
  42 <p>The black squares should trace the left side of the ellipse's blue outline.</p>
  43 <div class="container" style="text-align: right">
  44 X<br/>
  45     <div style="float: right" class="ellipse"></div>
  46 X<br/>
  47 X<br/>
  48 X<br/>
  49 X<br/>
  50 X<br/>
  51 X<br/>
  52 X<br/>
  53 X<br/>
  54 X
  55 </div>
  56 </body>