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