| OLD | NEW |
|---|
| (Empty) | |
| 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 shoul
d 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> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 196723010:
[CSS Shapes] inset corner radii are not flipped for vertical writing modes (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master