Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(72)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-diamond-margin-polygon.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-inside/shape-inside-rounded-rectangle-fit-002-expected.html ('k') | LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-diamond-margin-polygon-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <script> 4 <script>
5 if (window.internals) 5 if (window.internals)
6 window.internals.settings.setCSSExclusionsEnabled(true); 6 window.internals.settings.setCSSExclusionsEnabled(true);
7 </script> 7 </script>
8 <script src="../../js/resources/js-test-pre.js"></script> 8 <script src="../../js/resources/js-test-pre.js"></script>
9 <script src="../resources/subpixel-utils.js"></script> 9 <script src="../resources/subpixel-utils.js"></script>
10 10
11 <style> 11 <style>
12 #container { 12 #container {
13 font: 20px/1 Ahem, sans-serif; 13 font: 20px/1 Ahem, sans-serif;
14 width: 200px; 14 width: 200px;
15 height: 300px; 15 height: 150px;
16 } 16 }
17 17
18 #float-left { 18 #float-left {
19 float: left; 19 float: left;
20 position: relative; 20 position: relative;
21 overflow: visible; 21 overflow: visible;
22 -webkit-shape-outside: polygon(50px 0px, 100px 50px, 50px 100px, 0px 50px); 22 -webkit-shape-outside: polygon(50px 0px, 100px 50px, 50px 100px, 0px 50px);
23 -webkit-shape-margin: 20px; 23 -webkit-shape-margin: 20px;
24 } 24 }
25 25
26 #svg-shape { 26 #svg-shape {
27 position: absolute; 27 position: absolute;
28 display:block; 28 display: block;
29 top: 0px;
30 left: 0px;
29 width: 100px; 31 width: 100px;
30 height: 100px; 32 height: 100px;
31 } 33 }
32 </style> 34 </style>
33
34 <body> 35 <body>
35 <p></p>
36 <div id="container"> 36 <div id="container">
37 <div id="float-left"> 37 <div id="float-left">
38 <svg id="svg-shape" xmlns="http://www.w3.org/2000/"> 38 <svg id="svg-shape" xmlns="http://www.w3.org/2000/">
39 <polygon points="50,0 100,50 50,100 0,50" fill="rgba(0,150,0, 0.5)"/ > 39 <polygon points="50,0 100,50 50,100 0,50" fill="rgba(0,150,0, 0.5)"/ >
40 </svg> 40 </svg>
41 </div> 41 </div>
42 <span id="l1">X</span></br><span id="l2">X</span><br/><span id="l3">X</span> <br/><br/><span id="l4">X</span><br/><span id="l5">X</span><br/><span id="l6">X< /span> 42 <span id="l1">X</span></br><span id="l2">X</span><br/><span id="l3">X</span> <br/><br/><span id="l4">X</span><br/><span id="l5">X</span><br/><span id="l6">X< /span>
43 </div> 43 </div>
44 <div id="console"></div>
44 </body> 45 </body>
45 <script> 46 <script>
46 function elementRect(elementId) 47 function elementRect(elementId)
47 { 48 {
48 var s = document.getElementById("container").getBoundingClientRect(); 49 var s = document.getElementById("container").getBoundingClientRect();
49 var r = document.getElementById(elementId).getBoundingClientRect(); 50 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 return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r .height};
51 } 52 }
52 53
53 // The polygon's X coordinates are 0, 50, 100, specified relative to the "float- left" element. Its shape-marign is 20px. 54 // The polygon's X coordinates are 0, 50, 100, specified relative to the "float- left" element. Its shape-marign is 20px.
54 // The horizontal center of the margin polygon, relative to the container elemen t is 20*sqrt(2) + 50. So the left 55 // The horizontal center of the margin polygon, relative to the container elemen t is 20*sqrt(2) + 50. So the left
55 // edge of the (20px square) Ahem character on the first "l1" line (y == 20) is: 20 + (20*sqrt(2) + 50) = 98.28. 56 // edge of the (20px square) Ahem character on the first "l1" line (y == 20) is: 20 + (20*sqrt(2) + 50) = 98.28.
56 // The second and third lines, "l2" and "l3" are similar, each one begins 20 pix els farther to the right. 57 // The second and third lines, "l2" and "l3" are similar, each one begins 20 pix els farther to the right.
57 // The left edges of "l4-l6" are the same as the first three, just in reverse or der. 58 // The left edges of "l4-l6" are the same as the first three, just in reverse or der.
58 59
59 function marginLeftXIntercept(lineNumber) 60 function marginLeftXIntercept(lineNumber)
60 { 61 {
61 return SubPixelLayout.roundLineLeft(lineNumber * 20 + 20 * Math.sqrt(2) + 50 ); 62 var f = SubPixelLayout.snapToLayoutUnit(lineNumber * 20 + 20 * Math.sqrt(2) + 50);
63 return Math.round(f);
62 } 64 }
63 65
66 var quiet = true; // PASS output depends on SubPixelLayout.isEnabled()
67
64 shouldBe("elementRect('l1').top", "0"); 68 shouldBe("elementRect('l1').top", "0");
65 shouldBeCloseTo("elementRect('l1').left", marginLeftXIntercept(1), 1); 69 shouldBeCloseTo("elementRect('l1').left", marginLeftXIntercept(1), 1, quiet);
66 70
67 shouldBe("elementRect('l2').top", "20"); 71 shouldBe("elementRect('l2').top", "20");
68 shouldBeCloseTo("elementRect('l2').left", marginLeftXIntercept(2), 1); 72 shouldBeCloseTo("elementRect('l2').left", marginLeftXIntercept(2), 1, quiet);
69 73
70 shouldBe("elementRect('l3').top", "40"); 74 shouldBe("elementRect('l3').top", "40");
71 shouldBeCloseTo("elementRect('l3').left", marginLeftXIntercept(3), 1); 75 shouldBeCloseTo("elementRect('l3').left", marginLeftXIntercept(3), 1, quiet);
72 76
73 shouldBe("elementRect('l4').top", "80"); 77 shouldBe("elementRect('l4').top", "80");
74 shouldBeCloseTo("elementRect('l4').left", marginLeftXIntercept(3), 1); 78 shouldBeCloseTo("elementRect('l4').left", marginLeftXIntercept(3), 1, quiet);
75 79
76 shouldBe("elementRect('l5').top", "100"); 80 shouldBe("elementRect('l5').top", "100");
77 shouldBeCloseTo("elementRect('l5').left", marginLeftXIntercept(2), 1); 81 shouldBeCloseTo("elementRect('l5').left", marginLeftXIntercept(2), 1, quiet);
78 82
79 shouldBe("elementRect('l6').top", "120"); 83 shouldBe("elementRect('l6').top", "120");
80 shouldBeCloseTo("elementRect('l6').left", marginLeftXIntercept(1), 1); 84 shouldBeCloseTo("elementRect('l6').left", marginLeftXIntercept(1), 1, quiet);
81 85
82 </script> 86 </script>
83 </html> 87 </html>
84
OLDNEW
« no previous file with comments | « LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-fit-002-expected.html ('k') | LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-diamond-margin-polygon-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698