LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-right.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-right.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-ellipse-margin-left-expected.txt ('k') | LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-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
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 35 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
46 <div id="container">	46 <div id="container">

47 <div id="float-right">	47 <div id="float-right">

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

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

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

51 </svg>	51 </svg>

52 </div>	52 </div>

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

54 </div>	54 </div>

55 </div>	55 </div>

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

56 </body>	57 </body>

57 <script>	58 <script>

58 function elementRect(elementId)	59 function elementRect(elementId)

59 {	60 {

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

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

62 return {right: (r.left - s.left) + r.width, top: r.top - s.top, width: r.wid th, height: r.height};	63 return {right: (r.left - s.left) + r.width, top: r.top - s.top, width: r.wid th, height: r.height};

63 }	64 }

64	65

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

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

67	68

68 function marginEllipseRightXIntercept(y, cx, rx, ry)	69 function marginEllipseRightXIntercept(y, cx, rx, ry)

69 {	70 {

70 var containerWidth = document.getElementById("container").getBoundingClientR ect().width;	71 var containerWidth = document.getElementById("container").getBoundingClientR ect().width;

71 return String( SubPixelLayout.roundLineRight(containerWidth - (cx + rx * Mat h.sqrt(1 - Math.pow((ry - y) / ry, 2)))) );	72 var f = SubPixelLayout.snapToLayoutUnit(containerWidth - (cx + rx * Math.sqr t(1 - Math.pow((ry - y) / ry, 2))));

	73 return String( Math.floor(f) );

72 }	74 }

73	75

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

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

76	78

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

78	80

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

80 shouldBe("elementRect('s1').right", marginEllipseRightXIntercept(20, 225, 225, 1 25));	82 shouldBe("elementRect('s1').right", marginEllipseRightXIntercept(20, 225, 225, 1 25), quiet);

81	83

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

83 shouldBe("elementRect('s2').right", marginEllipseRightXIntercept(40, 225, 225, 1 25));	85 shouldBe("elementRect('s2').right", marginEllipseRightXIntercept(40, 225, 225, 1 25), quiet);

84	86

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

86 shouldBe("elementRect('s3').right", marginEllipseRightXIntercept(60, 225, 225, 1 25));	88 shouldBe("elementRect('s3').right", marginEllipseRightXIntercept(60, 225, 225, 1 25), quiet);

87	89

88 </script>	90 </script>

89 </html>	91 </html>

90	92

OLD	NEW