third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/testharness.js"></script>
   3 <script src="../../../resources/testharnessreport.js"></script>
   4 <script src="../resources/subpixel-utils.js"></script>
   5 <style>
   6 #container {
   7     font: 10px/1 Ahem, sans-serif;
   8     width: 200px;
   9     height: 200px;
  10     border: 1px solid black;
  11     -webkit-writing-mode: vertical-lr;
  12 }
  13
  14 #rounded-rect {
  15     float: left;
  16     -webkit-writing-mode: horizontal-tb;
  17     width: 100px;
  18     height: 100px;
  19     background-color: blue;
  20     border-radius: 50px 40px 30px 20px / 20px 30px 40px 50px;
  21     shape-outside: inset(0px round 50px 40px 30px 20px / 20px 30px 40px 50px);
  22 }
  23 </style>
  24
  25 <body>
  26 <p>The block squares should wrap around the bottom of the blue shape. They should not overlap the shape.</p>
  27 <div id="container">
  28 <span id="s1">X</span><br/>
  29     <div id="rounded-rect"></div>
  30 <span id="s2">X</span><br/>
  31 <span id="s3">X</span><br/>
  32 <span id="s4">X</span><br/>
  33 <span id="s5">X</span><br/>
  34 <span id="s6">X</span><br/>
  35 <span id="s7">X</span><br/>
  36 <span id="s8">X</span><br/>
  37 <span id="s9">X</span><br/>
  38 <span id="s10">X</span><br/>
  39 <span id="s11">X</span><br/>
  40 <span id="s12">X</span>
  41 </div>
  42
  43 </body>
  44 <script>
  45 function elementRect(elementId)
  46 {
  47     var s = document.getElementById("container").getBoundingClientRect();
  48     var r = document.getElementById(elementId).getBoundingClientRect();
  49     return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r.height};
  50 }
  51
  52 test(function () {
  53     var rect = elementRect("s1");
  54     assert_equals(rect.left, 1);
  55     assert_equals(rect.top, 1);
  56 }, "1st square doesn't overlap shape.");
  57
  58 test(function () {
  59     var rect = elementRect("s2");
  60     assert_equals(rect.left, 11);
  61     assert_approx_equals(rect.top, 91, 0.5);
  62 }, "2nd square is properly affected by shape.");
  63
  64 test(function () {
  65     var rect = elementRect("s3");
  66     assert_equals(rect.left, 21);
  67     assert_approx_equals(rect.top, 97, 0.5);
  68 }, "3rd square is properly affected by shape.");
  69
  70 test(function () {
  71     var rect = elementRect("s4");
  72     assert_equals(rect.left, 31);
  73     assert_approx_equals(rect.top, 100, 0.5);
  74 }, "4th square is properly affected by shape.");
  75
  76 test(function () {
  77     var rect = elementRect("s5");
  78     assert_equals(rect.left, 41);
  79     assert_approx_equals(rect.top, 101, 0.5);
  80 }, "5th square is properly affected by shape.");
  81
  82 test(function () {
  83     var rect = elementRect("s6");
  84     assert_equals(rect.left, 51);
  85     assert_approx_equals(rect.top, 101, 0.5);
  86 }, "6th square is properly affected by shape.");
  87
  88 test(function () {
  89     var rect = elementRect("s7");
  90     assert_equals(rect.left, 61);
  91     assert_approx_equals(rect.top, 101, 0.5);
  92 }, "7th square is properly affected by shape.");
  93
  94 test(function () {
  95     var rect = elementRect("s8");
  96     assert_equals(rect.left, 71);
  97     assert_approx_equals(rect.top, 101, 0.5);
  98 }, "8th square is properly affected by shape.");
  99
 100 test(function () {
 101     var rect = elementRect("s9");
 102     assert_equals(rect.left, 81);
 103     assert_approx_equals(rect.top, 101, 0.5);
 104 }, "9th square is properly affected by shape.");
 105
 106 test(function () {
 107     var rect = elementRect("s10");
 108     assert_equals(rect.left, 91);
 109     assert_approx_equals(rect.top, 99, 0.5);
 110 }, "10th square is properly affected by shape.");
 111
 112 test(function () {
 113     var rect = elementRect("s11");
 114     assert_equals(rect.left, 101);
 115     assert_approx_equals(rect.top, 91, 0.5);
 116 }, "11th square is properly affected by shape.");
 117
 118 test(function () {
 119     var rect = elementRect("s12");
 120     assert_equals(rect.left, 111);
 121     assert_equals(rect.top, 1);
 122 }, "12th square doesn't overlap shape.");
 123 </script>