| Index: LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html
|
| diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..6b96fca877cd931bb66e4b2a60a7097c328e6926
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html
|
| @@ -0,0 +1,124 @@
|
| +<!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;
|
| + text-align: right;
|
| +}
|
| +
|
| +#rounded-rect {
|
| + float: right;
|
| + -webkit-writing-mode: horizontal-tb;
|
| + width: 100px;
|
| + height: 100px;
|
| + background-color: blue;
|
| + border-radius: 20px 30px 40px 50px / 50px 40px 30px 20px;
|
| + shape-outside: inset(0px round 20px 30px 40px 50px / 50px 40px 30px 20px);
|
| +}
|
| +</style>
|
| +
|
| +<body>
|
| +<p>The block squares should wrap around the top 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, 191);
|
| +}, "1st square doesn't overlap shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s2");
|
| + assert_equals(rect.left, 11);
|
| + assert_approx_equals(rect.top, 97, 0.5);
|
| +}, "2nd square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s3");
|
| + assert_equals(rect.left, 21);
|
| + assert_approx_equals(rect.top, 91, 0.5);
|
| +}, "3rd square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s4");
|
| + assert_equals(rect.left, 31);
|
| + assert_approx_equals(rect.top, 91, 0.5);
|
| +}, "4th square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s5");
|
| + assert_equals(rect.left, 41);
|
| + assert_approx_equals(rect.top, 91, 0.5);
|
| +}, "5th square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s6");
|
| + assert_equals(rect.left, 51);
|
| + assert_approx_equals(rect.top, 91, 0.5);
|
| +}, "6th square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s7");
|
| + assert_equals(rect.left, 61);
|
| + assert_approx_equals(rect.top, 91, 0.5);
|
| +}, "7th square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s8");
|
| + assert_equals(rect.left, 71);
|
| + assert_approx_equals(rect.top, 91, 0.5);
|
| +}, "8th square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s9");
|
| + assert_equals(rect.left, 81);
|
| + assert_approx_equals(rect.top, 92, 0.5);
|
| +}, "9th square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s10");
|
| + assert_equals(rect.left, 91);
|
| + assert_approx_equals(rect.top, 95, 0.5);
|
| +}, "10th square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s11");
|
| + assert_equals(rect.left, 101);
|
| + assert_approx_equals(rect.top, 99, 0.5);
|
| +}, "11th square is properly affected by shape.");
|
| +
|
| +test(function () {
|
| + var rect = elementRect("s12");
|
| + assert_equals(rect.left, 111);
|
| + assert_equals(rect.top, 191);
|
| +}, "12th square doesn't overlap shape.");
|
| +</script>
|
|
|
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