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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/replaced/table-percent-height-text-controls.html

Issue 2535173006: Percent height border-box content should get correct height in percent height cells (Closed)
Patch Set: bug 669867 Created 4 years 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 | « third_party/WebKit/LayoutTests/fast/replaced/table-percent-height.html ('k') | third_party/WebKit/LayoutTests/fast/table/percent-height-border-box-content-in-cell.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <title>Test for Buzilla Bug 15359: JPEG image not shown when height is specified as percentage inside a table</title> 3 <title>Test for Buzilla Bug 15359: JPEG image not shown when height is specified as percentage inside a table</title>
4 <script src="../../resources/js-test.js"></script> 4 <script src="../../resources/js-test.js"></script>
5 <script> 5 <script>
6 if (window.testRunner) { 6 if (window.testRunner) {
7 testRunner.waitUntilDone(); 7 testRunner.waitUntilDone();
8 testRunner.dumpAsText(); 8 testRunner.dumpAsText();
9 } 9 }
10 10
(...skipping 12 matching lines...) Expand all
23 } 23 }
24 24
25 function getWidth(id) 25 function getWidth(id)
26 { 26 {
27 return getComputedStyleForElement(document.getElementById(id), 'width'); 27 return getComputedStyleForElement(document.getElementById(id), 'width');
28 } 28 }
29 29
30 function getFullHeight(id) 30 function getFullHeight(id)
31 { 31 {
32 var element = document.getElementById(id); 32 var element = document.getElementById(id);
33 var h = parseFloat(getComputedStyleForElement(element, 'border-top-width')); 33 var h = parseFloat(getComputedStyleForElement(element, 'height'));
34 h += parseFloat(getComputedStyleForElement(element, 'padding-top'));
35 h += parseFloat(getComputedStyleForElement(element, 'height'));
36 h += parseFloat(getComputedStyleForElement(element, 'padding-bottom'));
37 h += parseFloat(getComputedStyleForElement(element, 'border-bottom-width'));
38 return h + 'px'; 34 return h + 'px';
39 } 35 }
40 36
41 function parsePixelValue(str) 37 function parsePixelValue(str)
42 { 38 {
43 if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) ! = "px") { 39 if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) ! = "px") {
44 testFailed(str + " is unparsable."); 40 testFailed(str + " is unparsable.");
45 return -1; 41 return -1;
46 } 42 }
47 return parseFloat(str); 43 return parseFloat(str);
48 } 44 }
49 45
50 function is75PercentOf(expression75, expression100)
51 {
52 var str75 = eval(expression75);
53 var str100 = eval(expression100);
54 var num75 = parsePixelValue(str75);
55 var num100 = parsePixelValue(str100);
56 if (num75 < 0 || num100 < 0)
57 return;
58 if (num75 == Math.floor(num100 * 75 / 100))
59 testPassed(expression75 + " is 75% of " + expression100 + ".");
60 else
61 testFailed(expression75 + " [" + str75 + "] is not 75% of " + expression 100 + " [" + str100 + "].");
62 }
63
64 function test() 46 function test()
65 { 47 {
66 description("This test checks that text controls with percentage heights wit hin table cells have the correct height." + 48 description("This test checks that text controls with percentage heights wit hin table cells have the correct height." +
67 "Text controls are in a different test than other replaced elements beca use their metrics are platform-specific."); 49 "Text controls are in a different test than other replaced elements beca use their metrics are platform-specific." +
50 "The reason a 75% control is the same height as a 100% control is becaus e a replaced element that depends on the" +
51 "height of its parent cell is treated as auto. So by itself it will set the height of the row. See https://drafts.csswg.org/css-tables-3/#row-layout");
68 52
69 shouldBe("getWidth('input-password-75')", "getWidth('input-password-100')"); 53 shouldBe("getWidth('input-password-75')", "getWidth('input-password-100')");
70 shouldBeTrue("getFullHeight('input-password-75') != '0px'"); 54 shouldBeTrue("getFullHeight('input-password-75') != '0px'");
71 // Note: This behavior doesn't match to IE 8, Firefox 3.5 and Opera 10. 55 shouldBe("getFullHeight('input-password-75')", "getFullHeight('input-passwor d-100')");
72 is75PercentOf("getFullHeight('input-password-75')", "getFullHeight('input-pa ssword-100')");
73 56
74 shouldBe("getWidth('input-text-75')", "getWidth('input-text-100')"); 57 shouldBe("getWidth('input-text-75')", "getWidth('input-text-100')");
75 shouldBeTrue("getFullHeight('input-text-75') != '0px'"); 58 shouldBeTrue("getFullHeight('input-text-75') != '0px'");
76 // Note: This behavior doesn't match to IE 8, Firefox 3.5 and Opera 10. 59 shouldBe("getFullHeight('input-text-75')", "getFullHeight('input-text-100')" );
77 is75PercentOf("getFullHeight('input-text-75')", "getFullHeight('input-text-1 00')");
78 60
79 shouldBe("getWidth('textarea-75')", "getWidth('textarea-100')"); 61 shouldBe("getWidth('textarea-75')", "getWidth('textarea-100')");
80 shouldBeTrue("getFullHeight('textarea-75') != '0px'"); 62 shouldBeTrue("getFullHeight('textarea-75') != '0px'");
81 // Note: This behavior doesn't match to IE 8, Firefox 3.5 and Opera 10. 63 shouldBe("getFullHeight('textarea-75')", "getFullHeight('textarea-100')");
82 is75PercentOf("getFullHeight('textarea-75')", "getFullHeight('textarea-100') ");
83 64
84 isSuccessfullyParsed(); 65 isSuccessfullyParsed();
85 66
86 if (window.testRunner) { 67 if (window.testRunner) {
87 testRunner.notifyDone(); 68 testRunner.notifyDone();
88 } 69 }
89 } 70 }
90 </script> 71 </script>
91 </head> 72 </head>
92 <body onload="test()"> 73 <body onload="test()">
93 74
94 <table><tr><td><input type="password" id="input-password-75" style="height: 75%; "></td></tr></table> 75 <table><tr><td><input type="password" id="input-password-75" style="height: 75%; "></td></tr></table>
95 <table><tr><td><input type="password" id="input-password-100" style="height: 100 %;"></td></tr></table> 76 <table><tr><td><input type="password" id="input-password-100" style="height: 100 %;"></td></tr></table>
96 77
97 <table><tr><td><input type="text" id="input-text-75" style="height: 75%;"></td>< /tr></table> 78 <table><tr><td><input type="text" id="input-text-75" style="height: 75%;"></td>< /tr></table>
98 <table><tr><td><input type="text" id="input-text-100" style="height: 100%;"></td ></tr></table> 79 <table><tr><td><input type="text" id="input-text-100" style="height: 100%;"></td ></tr></table>
99 80
100 <table><tr><td><textarea id="textarea-75" style="height: 75%;"></textarea></td>< /tr></table> 81 <table><tr><td><textarea id="textarea-75" style="height: 75%;"></textarea></td>< /tr></table>
101 <table><tr><td><textarea id="textarea-100" style="height: 100%;"></textarea></td ></tr></table> 82 <table><tr><td><textarea id="textarea-100" style="height: 100%;"></textarea></td ></tr></table>
102 83
103 <p id="description"></p> 84 <p id="description"></p>
104 <div id="console"></div> 85 <div id="console"></div>
105 </body> 86 </body>
106 </html> 87 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/replaced/table-percent-height.html ('k') | third_party/WebKit/LayoutTests/fast/table/percent-height-border-box-content-in-cell.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698