f8166bf55a2a1de6d966c69ad4d9cd7e31cb91ce
[WebKit-https.git] / LayoutTests / fast / replaced / table-percent-height.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 getHeight(id)
33 {
34     return getComputedStyleForElement(document.getElementById(id), 'height');
35 }
36
37 function parsePixelValue(str)
38 {
39     if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
40         testFailed(str + " is unparsable.");
41         return -1;
42     }
43     return parseFloat(str);
44 }
45
46 function is75PercentOf(expression75, expression100)
47 {
48     var str75 = eval(expression75);
49     var str100 = eval(expression100);
50     var num75 = parsePixelValue(str75);
51     var num100 = parsePixelValue(str100);
52     if (num75 < 0 || num100 < 0)
53         return;
54     if (num75 == Math.floor(num100 * 75 / 100))
55         testPassed(expression75 + " [" + str75 + "] is 75% of " + expression100 + " [" + str100 + "].");
56     else
57         testFailed(expression75 + " [" + str75 + "] is not 75% of " + expression100 + " [" + str100 + "].");
58 }
59
60 function test()
61 {
62     description("This test checks that replaced elements with percentage heights within table cells have the correct height.");
63
64     shouldBe("getWidth('canvas-75')", "'300px'");
65     shouldBe("getHeight('canvas-75')", "'112px'");
66     shouldBe("getWidth('canvas-100')", "'300px'");
67     shouldBe("getHeight('canvas-100')", "'150px'");
68
69     shouldBe("getWidth('embed-75')", "'300px'");
70     shouldBe("getHeight('embed-75')", "'112px'");
71     shouldBe("getWidth('embed-100')", "'300px'");
72     shouldBe("getHeight('embed-100')", "'150px'");
73
74     shouldBe("getWidth('img-75')", "'75px'");
75     shouldBe("getHeight('img-75')", "'75px'");
76     shouldBe("getWidth('img-100')", "'100px'");
77     shouldBe("getHeight('img-100')", "'100px'");
78
79     shouldBe("getWidth('object-75')", "'300px'");
80     shouldBe("getHeight('object-75')", "'112px'");
81     shouldBe("getWidth('object-100')", "'300px'");
82     shouldBe("getHeight('object-100')", "'150px'");
83
84     shouldBe("getWidth('button-75')", "getWidth('button-100')");
85     shouldBeTrue("getHeight('button-75') != '0px'");
86     shouldBe("getHeight('button-75')", "getHeight('button-100')");
87
88     shouldBe("getWidth('input-button-75')", "getWidth('input-button-100')");
89     shouldBeTrue("getHeight('input-button-75') != '0px'");
90     shouldBe("getHeight('input-button-75')", "getHeight('input-button-100')");
91
92     shouldBe("getWidth('input-checkbox-75')", "getWidth('input-checkbox-100')");
93     shouldBeTrue("getHeight('input-checkbox-75') != '0px'");
94     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
95     is75PercentOf("getHeight('input-checkbox-75')", "getHeight('input-checkbox-100')");
96
97     shouldBe("getWidth('input-file-75')", "getWidth('input-file-100')");
98     shouldBeTrue("getHeight('input-file-75') != '0px'");
99     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
100     is75PercentOf("getHeight('input-file-75')", "getHeight('input-file-100')");
101
102     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
103     shouldBe("getWidth('input-image-75')", "'75px'");
104     shouldBe("getHeight('input-image-75')", "'75px'");
105     shouldBe("getWidth('input-image-100')", "'100px'");
106     shouldBe("getHeight('input-image-100')", "'100px'");
107
108     shouldBe("getWidth('input-radio-75')", "getWidth('input-radio-100')");
109     shouldBeTrue("getHeight('input-radio-75') != '0px'");
110     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
111     is75PercentOf("getHeight('input-radio-75')", "getHeight('input-radio-100')");
112
113     shouldBe("getWidth('input-reset-75')", "getWidth('input-reset-100')");
114     shouldBeTrue("getHeight('input-reset-75') != '0px'");
115     shouldBe("getHeight('input-reset-75')", "getHeight('input-reset-100')");
116
117     shouldBe("getWidth('input-submit-75')", "getWidth('input-submit-100')");
118     shouldBeTrue("getHeight('input-submit-75') != '0px'");
119     shouldBe("getHeight('input-submit-75')", "getHeight('input-submit-100')");
120
121     shouldBe("getWidth('select-75')", "getWidth('select-100')");
122     shouldBeTrue("getHeight('select-75') != '0px'");
123     shouldBe("getHeight('select-75')", "getHeight('select-100')");
124
125     isSuccessfullyParsed();
126
127     if (window.layoutTestController) { 
128         layoutTestController.notifyDone();
129     }
130 }
131
132 var successfullyParsed = true;
133 </script>
134 </head>
135 <body onload="test()">
136
137 <table><tr><td><canvas id="canvas-75" style="background-color: #00ff00; height: 75%;"></canvas></td></tr></table>
138 <table><tr><td><canvas id="canvas-100" style="background-color: #00ff00; height: 100%;"></canvas></td></tr></table>
139
140 <table><tr><td><embed id="embed-75" style="background-color: #00ff00; height: 75%;"></embed></td></tr></table>
141 <table><tr><td><embed id="embed-100" style="background-color: #00ff00; height: 100%;"></embed></td></tr></table>
142
143 <table><tr><td><img id="img-75" src="resources/square-blue-100x100.png" style="height: 75%;"></td></tr></table>
144 <table><tr><td><img id="img-100" src="resources/square-blue-100x100.png" style="height: 100%;"></td></tr></table>
145
146 <table><tr><td><object id="object-75" style="background-color: #00ff00; height: 75%;"></object></td></tr></table>
147 <table><tr><td><object id="object-100" style="background-color: #00ff00; height: 100%;"></object></td></tr></table>
148
149 <table><tr><td><button id="button-75" style="height: 75%;">Button</button></td></tr></table>
150 <table><tr><td><button id="button-100" style="height: 100%;">Button</button></td></tr></table>
151
152 <table><tr><td><input type="button" id="input-button-75" style="height: 75%;"></td></tr></table>
153 <table><tr><td><input type="button" id="input-button-100" style="height: 100%;"></td></tr></table>
154
155 <table><tr><td><input type="checkbox" id="input-checkbox-75" style="height: 75%;"></td></tr></table>
156 <table><tr><td><input type="checkbox" id="input-checkbox-100" style="height: 100%;"></td></tr></table>
157
158 <table><tr><td><input type="file" id="input-file-75" style="height: 75%;"></td></tr></table>
159 <table><tr><td><input type="file" id="input-file-100" style="height: 100%;"></td></tr></table>
160
161 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-75" style="height: 75%;"></td></tr></table>
162 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-100" style="height: 100%;"></td></tr></table>
163
164 <table><tr><td><input type="radio" id="input-radio-75" style="height: 75%;"></td></tr></table>
165 <table><tr><td><input type="radio" id="input-radio-100" style="height: 100%;"></td></tr></table>
166
167 <table><tr><td><input type="reset" id="input-reset-75" style="height: 75%;"></td></tr></table>
168 <table><tr><td><input type="reset" id="input-reset-100" style="height: 100%;"></td></tr></table>
169
170 <table><tr><td><input type="submit" id="input-submit-75" style="height: 75%;"></td></tr></table>
171 <table><tr><td><input type="submit" id="input-submit-100" style="height: 100%;"></td></tr></table>
172
173 <table><tr><td><select id="select-75" style="height: 75%;"><option>Option</option></select></td></tr></table>
174 <table><tr><td><select id="select-100" style="height: 100%;"><option>Option</option></select></td></tr></table>
175
176 <p id="description"></p>
177 <div id="console"></div>
178 </body>
179 </html>