LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-circle-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-circle-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 .circle {
  17     width: 160px;
  18     height: 160px;
  19     border: 1px solid blue;
  20     border-radius: 80px;
  21     -webkit-shape-outside: circle(80px, 80px, 80px); /* cx,cy,radius */
  22 }
  23 </style>
  24
  25 <body>
  26 <p>The black squares should trace the right side of the circle's blue outline.</p>
  27 <div class="container">
  28 X<br/>
  29     <div style="float: left" class="circle"></div>
  30 X<br/>
  31 X<br/>
  32 X<br/>
  33 X<br/>
  34 X<br/>
  35 X<br/>
  36 X<br/>
  37 X<br/>
  38 X
  39 </div>
  40
  41 <p>The black squares should trace the left side of the circle's blue outline.</p>
  42 <div class="container" style="text-align: right">
  43 X<br/>
  44     <div style="float: right" class="circle"></div>
  45 X<br/>
  46 X<br/>
  47 X<br/>
  48 X<br/>
  49 X<br/>
  50 X<br/>
  51 X<br/>
  52 X<br/>
  53 X
  54 </div>
  55 </body>