third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-margin-bottom-expected.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 }
  24
  25 #svg-shape-ellipse {
  26     position: absolute;
  27     display:block;
  28     top: 0px;
  29     left: 0px;
  30     width: 500px;
  31     height: 300px;
  32 }
  33 </style>
  34 <body>
  35 <p>The five square grey Ahem-font characters should appear below outermost ellipse boundary, which is defined by the shape-margin.</p>
  36 <div id="container-border">
  37     <div id="container">
  38         <div id="float-left">
  39             <svg id="svg-shape-ellipse" xmlns="http://www.w3.org/2000/">
  40                 <ellipse cx="225" cy="125" rx="200" ry="100" fill="green"></ellipse>
  41                 <ellipse cx="225" cy="125" rx="225" ry="125" fill="none" stroke="green"></ellipse>
  42             </svg>
  43         </div>
  44         <br/>
  45         <br/>
  46         <br/>
  47         <br/>
  48         <br/>
  49         X X X X X
  50     </div>
  51 </body>
  52 </html>
  53