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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 #container-border {
   6     border: 1px solid black;
   7     margin: 10px;
   8     width: 500px;
   9 }
  10
  11 #container {
  12     font: 50px/1 Ahem, sans-serif;
  13     color: grey;
  14     width: 500px;
  15     height: 300px;
  16     overflow: hidden;
  17   }
  18
  19 #float-left {
  20     float: left;
  21     position: relative;
  22     overflow: visible;
  23     shape-outside: ellipse(200px 100px at 225px 125px);
  24     shape-margin: 25px;
  25     width: 450px;
  26     height: 250px;
  27 }
  28
  29 #svg-shape-ellipse {
  30     position: absolute;
  31     display:block;
  32     top: 0px;
  33     left: 0px;
  34     width: 500px;
  35     height: 300px;
  36 }
  37 </style>
  38 <body>
  39 <p>The five square grey Ahem-font characters should appear below outermost ellipse boundary, which is defined by the shape-margin.</p>
  40 <div id="container-border">
  41     <div id="container">
  42         <div id="float-left">
  43             <svg id="svg-shape-ellipse" xmlns="http://www.w3.org/2000/">
  44                 <ellipse cx="225" cy="125" rx="200" ry="100" fill="green"></ellipse>
  45                 <ellipse cx="225" cy="125" rx="225" ry="125" fill="none" stroke="green"></ellipse>
  46             </svg>
  47         </div>
  48         <br/>
  49         <br/>
  50         <br/>
  51         <br/>
  52         <br/>
  53         X X X X X
  54     </div>
  55 </body>
  56 </html>
  57