af0a91d74a7b5c3a0490a75da1f19ef9588d34c1
[WebKit-https.git] / LayoutTests / fast / replaced / table-percent-height-text-controls.html
1 <html>
2 <head>
3 <title>Test for Buzilla Bug 15359: JPEG image not shown when height is specified as percentage inside a table</title>
4 <link rel="stylesheet" href="../js/resources/js-test-style.css">
5 <script src="../js/resources/js-test-pre.js"></script>
6 <script src="../js/resources/js-test-post-function.js"></script>
7 <script>
8 if (window.layoutTestController) {
9     layoutTestController.waitUntilDone();
10     layoutTestController.dumpAsText();
11 }
12
13 function getComputedStyleForElement(element, cssPropertyName)
14 {
15     if (!element)
16         return null;
17
18     if (window.getComputedStyle)
19         return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
20
21     if (element.currentStyle)
22         return element.currentStyle[cssPropertyName];
23
24     return null;
25 }
26
27 function getWidth(id)
28 {
29     return getComputedStyleForElement(document.getElementById(id), 'width');
30 }
31
32 function getFullHeight(id)
33 {
34     var element = document.getElementById(id);
35     var h = parseFloat(getComputedStyleForElement(element, 'border-top-width'));
36     h += parseFloat(getComputedStyleForElement(element, 'padding-top'));
37     h += parseFloat(getComputedStyleForElement(element, 'height'));
38     h += parseFloat(getComputedStyleForElement(element, 'padding-bottom'));
39     h += parseFloat(getComputedStyleForElement(element, 'border-bottom-width'));
40     return h + 'px';
41 }
42
43 function parsePixelValue(str)
44 {
45     if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
46         testFailed(str + " is unparsable.");
47         return -1;
48     }
49     return parseFloat(str);
50 }
51
52 function is75PercentOf(expression75, expression100)
53 {
54     var str75 = eval(expression75);
55     var str100 = eval(expression100);
56     var num75 = parsePixelValue(str75);
57     var num100 = parsePixelValue(str100);
58     if (num75 < 0 || num100 < 0)
59         return;
60     if (num75 == Math.floor(num100 * 75 / 100))
61         testPassed(expression75 + " is 75% of " + expression100 + ".");
62     else
63         testFailed(expression75 + " [" + str75 + "] is not 75% of " + expression100 + " [" + str100 + "].");
64 }
65
66 function test()
67 {
68     description("This test checks that text controls with percentage heights within table cells have the correct height." +
69         "Text controls are in a different test than other replaced elements because their metrics are platform-specific.");
70
71     shouldBe("getWidth('input-password-75')", "getWidth('input-password-100')");
72     shouldBeTrue("getFullHeight('input-password-75') != '0px'");
73     // Note: This behavior doesn't match to IE 8, Firefox 3.5 and Opera 10.
74     is75PercentOf("getFullHeight('input-password-75')", "getFullHeight('input-password-100')");
75
76     shouldBe("getWidth('input-text-75')", "getWidth('input-text-100')");
77     shouldBeTrue("getFullHeight('input-text-75') != '0px'");
78     // Note: This behavior doesn't match to IE 8, Firefox 3.5 and Opera 10.
79     is75PercentOf("getFullHeight('input-text-75')", "getFullHeight('input-text-100')");
80
81     shouldBe("getWidth('isindex-75')", "getWidth('isindex-100')");
82     shouldBeTrue("getFullHeight('isindex-75') != '0px'");
83     shouldBe("getFullHeight('isindex-75')", "getFullHeight('isindex-100')");
84
85     shouldBe("getWidth('textarea-75')", "getWidth('textarea-100')");
86     shouldBeTrue("getFullHeight('textarea-75') != '0px'");
87     // Note: This behavior doesn't match to IE 8, Firefox 3.5 and Opera 10.
88     is75PercentOf("getFullHeight('textarea-75')", "getFullHeight('textarea-100')");
89
90     isSuccessfullyParsed();
91
92     if (window.layoutTestController) { 
93         layoutTestController.notifyDone();
94     }
95 }
96
97 var successfullyParsed = true;
98 </script>
99 </head>
100 <body onload="test()">
101
102 <table><tr><td><input type="password" id="input-password-75" style="height: 75%;"></td></tr></table>
103 <table><tr><td><input type="password" id="input-password-100" style="height: 100%;"></td></tr></table>
104
105 <table><tr><td><input type="text" id="input-text-75" style="height: 75%;"></td></tr></table>
106 <table><tr><td><input type="text" id="input-text-100" style="height: 100%;"></td></tr></table>
107
108 <table><tr><td><isindex id="isindex-75" style="height: 75%;"></td></tr></table>
109 <table><tr><td><isindex id="isindex-100" style="height: 100%;"></td></tr></table>
110
111 <table><tr><td><textarea id="textarea-75" style="height: 75%;"></textarea></td></tr></table>
112 <table><tr><td><textarea id="textarea-100" style="height: 100%;"></textarea></td></tr></table>
113
114 <p id="description"></p>
115 <div id="console"></div>
116 </body>
117 </html>