104 lines
3.6 KiB
HTML
104 lines
3.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>Test for Buzilla Bug 15359: JPEG image not shown when height is specified as percentage inside a table</title>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<script>
|
|
if (window.testRunner) {
|
|
testRunner.waitUntilDone();
|
|
testRunner.dumpAsText();
|
|
}
|
|
|
|
function getComputedStyleForElement(element, cssPropertyName)
|
|
{
|
|
if (!element)
|
|
return null;
|
|
|
|
if (window.getComputedStyle)
|
|
return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
|
|
|
|
if (element.currentStyle)
|
|
return element.currentStyle[cssPropertyName];
|
|
|
|
return null;
|
|
}
|
|
|
|
function getWidth(id)
|
|
{
|
|
return getComputedStyleForElement(document.getElementById(id), 'width');
|
|
}
|
|
|
|
function getFullHeight(id)
|
|
{
|
|
var element = document.getElementById(id);
|
|
var h = parseFloat(getComputedStyleForElement(element, 'border-top-width'));
|
|
h += parseFloat(getComputedStyleForElement(element, 'padding-top'));
|
|
h += parseFloat(getComputedStyleForElement(element, 'height'));
|
|
h += parseFloat(getComputedStyleForElement(element, 'padding-bottom'));
|
|
h += parseFloat(getComputedStyleForElement(element, 'border-bottom-width'));
|
|
return h + 'px';
|
|
}
|
|
|
|
function parsePixelValue(str)
|
|
{
|
|
if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
|
|
testFailed(str + " is unparsable.");
|
|
return -1;
|
|
}
|
|
return parseFloat(str);
|
|
}
|
|
|
|
function isEqual(expression75, expression100)
|
|
{
|
|
var str75 = eval(expression75);
|
|
var str100 = eval(expression100);
|
|
var num75 = parsePixelValue(str75);
|
|
var num100 = parsePixelValue(str100);
|
|
if (num75 < 0 || num100 < 0)
|
|
return;
|
|
if (num75 == num100)
|
|
testPassed(expression75 + " is equal to " + expression100 + ".");
|
|
else
|
|
testFailed(expression75 + " [" + str75 + "] is not equal to " + expression100 + " [" + str100 + "].");
|
|
}
|
|
|
|
function test()
|
|
{
|
|
description("This test checks that text controls with percentage heights within table cells have the correct height." +
|
|
"Text controls are in a different test than other replaced elements because their metrics are platform-specific.");
|
|
|
|
shouldBe("getWidth('input-password-75')", "getWidth('input-password-100')");
|
|
shouldBeTrue("getFullHeight('input-password-75') != '0px'");
|
|
isEqual("getFullHeight('input-password-75')", "getFullHeight('input-password-100')");
|
|
|
|
shouldBe("getWidth('input-text-75')", "getWidth('input-text-100')");
|
|
shouldBeTrue("getFullHeight('input-text-75') != '0px'");
|
|
isEqual("getFullHeight('input-text-75')", "getFullHeight('input-text-100')");
|
|
|
|
shouldBe("getWidth('textarea-75')", "getWidth('textarea-100')");
|
|
shouldBeTrue("getFullHeight('textarea-75') != '0px'");
|
|
isEqual("getFullHeight('textarea-75')", "getFullHeight('textarea-100')");
|
|
|
|
isSuccessfullyParsed();
|
|
|
|
if (window.testRunner) {
|
|
testRunner.notifyDone();
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="test()">
|
|
|
|
<table><tr><td><input type="password" id="input-password-75" style="height: 75%;"></td></tr></table>
|
|
<table><tr><td><input type="password" id="input-password-100" style="height: 100%;"></td></tr></table>
|
|
|
|
<table><tr><td><input type="text" id="input-text-75" style="height: 75%;"></td></tr></table>
|
|
<table><tr><td><input type="text" id="input-text-100" style="height: 100%;"></td></tr></table>
|
|
|
|
<table><tr><td><textarea id="textarea-75" style="height: 75%;"></textarea></td></tr></table>
|
|
<table><tr><td><textarea id="textarea-100" style="height: 100%;"></textarea></td></tr></table>
|
|
|
|
<p id="description"></p>
|
|
<div id="console"></div>
|
|
</body>
|
|
</html>
|