LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html - Issue 196723010: [CSS Shapes] inset corner radii are not flipped for vertical writing modes

Side by Side Diff: LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html

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

Patch Set: Try with 0.5 tolerance Created 6 years, 9 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left-expected.txt ('k') | LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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 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 n ot 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>

OLD	NEW