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

   1 <!DOCTYPE html>
   2 <style>
   3 .container {
   4     position: relative;
   5     font: 20px/1 Ahem, sans-serif;
   6     width: 500px;
   7     height: 200px;
   8     border: 1px solid black;
   9 }
  10
  11 .ellipse {
  12     z-index: -1;
  13     width: 320px;
  14     height: 160px;
  15     border-radius: 160px / 80px;
  16     background-color: blue;
  17     overflow: hidden;
  18 }
  19
  20 #left-ellipse-outline {
  21     position: absolute;
  22     top: 20px;
  23     left: 0px;
  24 }
  25
  26 #right-ellipse-outline {
  27     position: absolute;
  28     top: 20px;
  29     right: 0px;
  30 }
  31
  32 .left-ellipse-float-line {
  33     float: left;
  34     clear: left;
  35     height: 20px;
  36 }
  37
  38 .right-ellipse-float-line {
  39     float: right;
  40     clear: right;
  41     height: 20px;
  42 }
  43 </style>
  44 <body>
  45 <p>The black squares should trace the right side of the ellipse's blue outline.</p>
  46 <div class="container">
  47 X<br/>
  48     <div id="left-ellipse-outline" class="ellipse"></div>
  49     <!--  generated left-rounded-rect-float-line divs will be inserted here  -->
  50 X<br/>
  51 X<br/>
  52 X<br/>
  53 X<br/>
  54 X<br/>
  55 X<br/>
  56 X<br/>
  57 X<br/>
  58 X
  59 </div>
  60
  61 <p>The black squares should trace the left side of the ellipse's blue outline.</p>
  62 <div class="container" style="text-align: right">
  63 X<br/>
  64     <div id="right-ellipse-outline" class="ellipse"></div>
  65     <!--  generated right-rounded-rect-float-line divs will be inserted here  -->
  66 X<br/>
  67 X<br/>
  68 X<br/>
  69 X<br/>
  70 X<br/>
  71 X<br/>
  72 X<br/>
  73 X<br/>
  74 X
  75 </div>
  76
  77 <script src="../resources/rounded-rectangle.js"></script>
  78 <script src="../resources/subpixel-utils.js"></script>
  79 <script>
  80 genLeftRightRoundedRectFloatShapeOutsideRefTest({
  81     roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80},
  82     containerWidth: 500,
  83     containerHeight: 200,
  84     lineHeight: 20,
  85     floatElementClassSuffix: "ellipse-float-line",
  86     insertElementIdSuffix: "ellipse-outline"
  87 });
  88 </script>
  89
  90 </body>