LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.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-left.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: 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 | « no previous file | LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left-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 }

	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.1);
	Bem Jones-Bey (adobe) 2014/03/12 19:06:18 I'd just make the epsilon in the tests 0.5 instead I'd just make the epsilon in the tests 0.5 instead of 0.1. When writing the test in WebKit, I didn't see any fractions even though AFAIK they've turned on subpixel layout. 0.5 should nicely account for rounding (or the lack thereof)
	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.1);

	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.1);

	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.1);

	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.1);

	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.1);

	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.1);

	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.1);

	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.1);

	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.1);

	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