Chromium Code Reviews 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| Index: LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html |
| diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..562a76853a0392467686c49fd034bc085814f35e |
| --- /dev/null |
| +++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html |
| @@ -0,0 +1,123 @@ |
| +<!DOCTYPE html> |
| +<script src="../../../resources/testharness.js"></script> |
| +<script src="../../../resources/testharnessreport.js"></script> |
| +<script src="../resources/subpixel-utils.js"></script> |
| +<style> |
| +#container { |
| + font: 10px/1 Ahem, sans-serif; |
| + width: 200px; |
| + height: 200px; |
| + border: 1px solid black; |
| + -webkit-writing-mode: vertical-lr; |
| +} |
| + |
| +#rounded-rect { |
| + float: left; |
| + -webkit-writing-mode: horizontal-tb; |
| + width: 100px; |
| + height: 100px; |
| + background-color: blue; |
| + border-radius: 50px 40px 30px 20px / 20px 30px 40px 50px; |
| + shape-outside: inset(0px round 50px 40px 30px 20px / 20px 30px 40px 50px); |
| +} |
| +</style> |
| + |
| +<body> |
| +<p>The block squares should wrap around the bottom of the blue shape. They should not overlap the shape.</p> |
| +<div id="container"> |
| +<span id="s1">X</span><br/> |
| + <div id="rounded-rect"></div> |
| +<span id="s2">X</span><br/> |
| +<span id="s3">X</span><br/> |
| +<span id="s4">X</span><br/> |
| +<span id="s5">X</span><br/> |
| +<span id="s6">X</span><br/> |
| +<span id="s7">X</span><br/> |
| +<span id="s8">X</span><br/> |
| +<span id="s9">X</span><br/> |
| +<span id="s10">X</span><br/> |
| +<span id="s11">X</span><br/> |
| +<span id="s12">X</span> |
| +</div> |
| + |
| +</body> |
| +<script> |
| +function elementRect(elementId) |
| +{ |
| + var s = document.getElementById("container").getBoundingClientRect(); |
| + var r = document.getElementById(elementId).getBoundingClientRect(); |
| + return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r.height}; |
| +} |
| + |
| +test(function () { |
| + var rect = elementRect("s1"); |
| + assert_equals(rect.left, 1); |
| + assert_equals(rect.top, 1); |
| +}, "1st square doesn't overlap shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s2"); |
| + assert_equals(rect.left, 11); |
| + assert_approx_equals(rect.top, 91, 0.1); |
|
Bem Jones-Bey (adobe)
2014/03/12 19:06:18
I'd just make the epsilon in the tests 0.5 instead
|
| +}, "2nd square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s3"); |
| + assert_equals(rect.left, 21); |
| + assert_approx_equals(rect.top, 97, 0.1); |
| +}, "3rd square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s4"); |
| + assert_equals(rect.left, 31); |
| + assert_approx_equals(rect.top, 100, 0.1); |
| +}, "4th square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s5"); |
| + assert_equals(rect.left, 41); |
| + assert_approx_equals(rect.top, 101, 0.1); |
| +}, "5th square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s6"); |
| + assert_equals(rect.left, 51); |
| + assert_approx_equals(rect.top, 101, 0.1); |
| +}, "6th square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s7"); |
| + assert_equals(rect.left, 61); |
| + assert_approx_equals(rect.top, 101, 0.1); |
| +}, "7th square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s8"); |
| + assert_equals(rect.left, 71); |
| + assert_approx_equals(rect.top, 101, 0.1); |
| +}, "8th square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s9"); |
| + assert_equals(rect.left, 81); |
| + assert_approx_equals(rect.top, 101, 0.1); |
| +}, "9th square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s10"); |
| + assert_equals(rect.left, 91); |
| + assert_approx_equals(rect.top, 99, 0.1); |
| +}, "10th square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s11"); |
| + assert_equals(rect.left, 101); |
| + assert_approx_equals(rect.top, 91, 0.1); |
| +}, "11th square is properly affected by shape."); |
| + |
| +test(function () { |
| + var rect = elementRect("s12"); |
| + assert_equals(rect.left, 111); |
| + assert_equals(rect.top, 1); |
| +}, "12th square doesn't overlap shape."); |
| +</script> |
