LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-left.html - Issue 14959014: [CSS Exclusions] Programmatic layout tests fail when subpixel layout is disabled

Side by Side Diff: LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-left.html

Issue 14959014: [CSS Exclusions] Programmatic layout tests fail when subpixel layout is disabled (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Updated per review feedback. Created 7 years, 7 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/exclusions/shape-outside-floats/shape-outside-floats-diamond-margin-polygon-expected.txt ('k') | LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-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
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <head>	3 <head>

4 <script src="../../js/resources/js-test-pre.js"></script>	4 <script src="../../js/resources/js-test-pre.js"></script>

5 <script src="../resources/subpixel-utils.js"></script>	5 <script src="../resources/subpixel-utils.js"></script>

6 <script>	6 <script>

7 if (window.internals)	7 if (window.internals)

8 window.internals.settings.setCSSExclusionsEnabled(true);	8 window.internals.settings.setCSSExclusionsEnabled(true);

9 </script>	9 </script>

10	10

(...skipping 34 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
45 <div id="container">	45 <div id="container">

46 <div id="float-left">	46 <div id="float-left">

47 <svg id="svg-shape-ellipse" xmlns="http://www.w3.org/2000/">	47 <svg id="svg-shape-ellipse" xmlns="http://www.w3.org/2000/">

48 <ellipse cx="225" cy="125" rx="200" ry="100" fill="green"></elli pse>	48 <ellipse cx="225" cy="125" rx="200" ry="100" fill="green"></elli pse>

49 <ellipse cx="225" cy="125" rx="225" ry="125" fill="none" stroke= "green"></ellipse>	49 <ellipse cx="225" cy="125" rx="225" ry="125" fill="none" stroke= "green"></ellipse>

50 </svg>	50 </svg>

51 </div>	51 </div>

52 <span id="s1">X</span></br><span id="s2">X</span><br/><span id="s3">X</s pan>	52 <span id="s1">X</span></br><span id="s2">X</span><br/><span id="s3">X</s pan>

53 </div>	53 </div>

54 </div>	54 </div>

	55 <div id="console"></div>

55 </body>	56 </body>

56 <script>	57 <script>

57 function elementRect(elementId)	58 function elementRect(elementId)

58 {	59 {

59 var s = document.getElementById("container").getBoundingClientRect();	60 var s = document.getElementById("container").getBoundingClientRect();

60 var r = document.getElementById(elementId).getBoundingClientRect();	61 var r = document.getElementById(elementId).getBoundingClientRect();

61 return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r .height};	62 return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r .height};

62 }	63 }

63	64

64 // You'll find the equation for the X intercept of an elliptical arc here (among other places):	65 // You'll find the equation for the X intercept of an elliptical arc here (among other places):

65 // http://hansmuller-webkit.blogspot.com/2012/07/computing-horizonal-rounded-rec tangle.html	66 // http://hansmuller-webkit.blogspot.com/2012/07/computing-horizonal-rounded-rec tangle.html

66	67

67 function marginEllipseLeftXIntercept(y, cx, rx, ry)	68 function marginEllipseLeftXIntercept(y, cx, rx, ry)

68 {	69 {

69 return String( SubPixelLayout.roundLineLeft(cx + rx * Math.sqrt(1 - Math.pow ((ry - y) / ry, 2))) );	70 var f = SubPixelLayout.snapToLayoutUnit(cx + rx * Math.sqrt(1 - Math.pow((ry - y) / ry, 2)));

	71 return String( Math.round(f) );

70 }	72 }

71	73

72 // In the ".left" tests below, it's the lower edge of the 20px Ahem glyph that t hat defines the element rect's left edge.	74 // In the ".left" tests below, it's the lower edge of the 20px Ahem glyph that t hat defines the element rect's left edge.

73 // That's why the Y coordinate in each of those tests is 20 greater than the ".t op" test.	75 // That's why the Y coordinate in each of those tests is 20 greater than the ".t op" test.

74	76

75 SubPixelLayout.initSubPixelLayout();	77 var quiet = true; // PASS output depends on SubPixelLayout.isEnabled()

76	78

77 shouldBe("elementRect('s1').top", "0");	79 shouldBe("elementRect('s1').top", "0");

78 shouldBe("elementRect('s1').left", marginEllipseLeftXIntercept(20, 225, 225, 125 ));	80 shouldBe("elementRect('s1').left", marginEllipseLeftXIntercept(20, 225, 225, 125 ), quiet);

79	81

80 shouldBe("elementRect('s2').top", "20");	82 shouldBe("elementRect('s2').top", "20");

81 shouldBe("elementRect('s2').left", marginEllipseLeftXIntercept(40, 225, 225, 125 ));	83 shouldBe("elementRect('s2').left", marginEllipseLeftXIntercept(40, 225, 225, 125 ), quiet);

82	84

83 shouldBe("elementRect('s3').top", "40");	85 shouldBe("elementRect('s3').top", "40");

84 shouldBe("elementRect('s3').left", marginEllipseLeftXIntercept(60, 225, 225, 125 ));	86 shouldBe("elementRect('s3').left", marginEllipseLeftXIntercept(60, 225, 225, 125 ), quiet);

85	87

86 </script>	88 </script>

87 </html>	89 </html>

88	90

OLD	NEW