LayoutTests/fast/replaced/table-percent-height.html - WebKit - Git at Google

 <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 getHeight(id)
 {
     return getComputedStyleForElement(document.getElementById(id), 'height');
 }

 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 is75PercentOf(expression75, expression100, hasSubpixelSupport)
 {
     var str75 = eval(expression75);
     var str100 = eval(expression100);
     var num75 = parsePixelValue(str75);
     var num100 = parsePixelValue(str100);
     if (num75 < 0 || num100 < 0)
         return;
     var expectedValue = num100 * 75 / 100;
     if (!hasSubpixelSupport)
         expectedValue = Math.floor(expectedValue);
     if (num75 == expectedValue)
         testPassed(expression75 + " is 75% of " + expression100 + ".");
     else
         testFailed(expression75 + " [" + str75 + "] is not 75% of " + expression100 + " [" + str100 + "].");
 }

 function test()
 {
     description("This test checks that replaced elements with percentage heights within table cells have the correct height.<br>Note, some of the button height tests fail on the Windows ports. See bug #34071.");

     var hasSubpixelSupport = getWidth('canvas-75') == '225px';

     shouldBe("getWidth('canvas-75')", hasSubpixelSupport ? "'225px'" : "'224px'");
     shouldBe("getHeight('canvas-75')", hasSubpixelSupport ? "'112.5px'" : "'112px'");
     shouldBe("getWidth('canvas-100')", "'300px'");
     shouldBe("getHeight('canvas-100')", "'150px'");

     shouldBe("getWidth('embed-75')", "'300px'");
     shouldBe("getHeight('embed-75')", hasSubpixelSupport ? "'112.5px'" : "'112px'");
     shouldBe("getWidth('embed-100')", "'300px'");
     shouldBe("getHeight('embed-100')", "'150px'");

     shouldBe("getWidth('img-75')", "'75px'");
     shouldBe("getHeight('img-75')", "'75px'");
     shouldBe("getWidth('img-100')", "'100px'");
     shouldBe("getHeight('img-100')", "'100px'");

     shouldBe("getWidth('img-75-nested')", "'75px'");
     shouldBe("getHeight('img-75-nested')", "'75px'");
     shouldBe("getWidth('img-100-nested')", "'100px'");
     shouldBe("getHeight('img-100-nested')", "'100px'");

     shouldBe("getWidth('object-75')", "'300px'");
     shouldBe("getHeight('object-75')", hasSubpixelSupport ? "'112.5px'" : "'112px'");
     shouldBe("getWidth('object-100')", "'300px'");
     shouldBe("getHeight('object-100')", "'150px'");

     shouldBe("getWidth('button-75')", "getWidth('button-100')");
     shouldBeTrue("getHeight('button-75') != '0px'");
     shouldBe("getHeight('button-75')", "getHeight('button-100')");

     shouldBe("getWidth('input-button-75')", "getWidth('input-button-100')");
     shouldBeTrue("getHeight('input-button-75') != '0px'");
     shouldBe("getHeight('input-button-75')", "getHeight('input-button-100')");

     shouldBe("getWidth('input-checkbox-75')", "getWidth('input-checkbox-100')");
     shouldBeFalse("getHeight('input-checkbox-75') != '0px'");
     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
     is75PercentOf("getHeight('input-checkbox-75')", "getHeight('input-checkbox-100')", hasSubpixelSupport);

     shouldBe("getWidth('input-file-75')", "getWidth('input-file-100')");
     shouldBeTrue("getHeight('input-file-75') != '0px'");

     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
     shouldBe("getWidth('input-image-75')", "'75px'");
     shouldBe("getHeight('input-image-75')", "'75px'");
     shouldBe("getWidth('input-image-100')", "'100px'");
     shouldBe("getHeight('input-image-100')", "'100px'");

     shouldBe("getWidth('input-radio-75')", "getWidth('input-radio-100')");
     shouldBeFalse("getHeight('input-radio-75') != '0px'");
     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
     is75PercentOf("getHeight('input-radio-75')", "getHeight('input-radio-100')", hasSubpixelSupport);

     shouldBe("getWidth('input-reset-75')", "getWidth('input-reset-100')");
     shouldBeTrue("getHeight('input-reset-75') != '0px'");
     shouldBe("getHeight('input-reset-75')", "getHeight('input-reset-100')");

     shouldBe("getWidth('input-submit-75')", "getWidth('input-submit-100')");
     shouldBeTrue("getHeight('input-submit-75') != '0px'");
     shouldBe("getHeight('input-submit-75')", "getHeight('input-submit-100')");

     shouldBe("getWidth('select-75')", "getWidth('select-100')");
     shouldBeTrue("getHeight('select-75') != '0px'");
     shouldBe("getHeight('select-75')", "getHeight('select-100')");

     isSuccessfullyParsed();

     if (window.testRunner) {
         testRunner.notifyDone();
     }
 }
 </script>
 </head>
 <body onload="test()">

 <table><tr><td><canvas id="canvas-75" style="background-color: #00ff00; height: 75%;"></canvas></td></tr></table>
 <table><tr><td><canvas id="canvas-100" style="background-color: #00ff00; height: 100%;"></canvas></td></tr></table>

 <table><tr><td><embed id="embed-75" type="video/quicktime" style="background-color: #00ff00; height: 75%;"></embed></td></tr></table>
 <table><tr><td><embed id="embed-100" type="video/quicktime" style="background-color: #00ff00; height: 100%;"></embed></td></tr></table>

 <table><tr><td><img id="img-75" src="resources/square-blue-100x100.png" style="height: 75%;"></td></tr></table>
 <table><tr><td><img id="img-100" src="resources/square-blue-100x100.png" style="height: 100%;"></td></tr></table>

 <table><tr><td><div><img id="img-75-nested" src="resources/square-blue-100x100.png" style="height: 75%;"></div></td></tr></table>
 <table><tr><td><div><img id="img-100-nested" src="resources/square-blue-100x100.png" style="height: 100%;"></div></td></tr></table>

 <table><tr><td><object id="object-75" style="background-color: #00ff00; height: 75%;"></object></td></tr></table>
 <table><tr><td><object id="object-100" style="background-color: #00ff00; height: 100%;"></object></td></tr></table>

 <table><tr><td><button id="button-75" style="height: 75%;">Button</button></td></tr></table>
 <table><tr><td><button id="button-100" style="height: 100%;">Button</button></td></tr></table>

 <table><tr><td><input type="button" id="input-button-75" style="height: 75%;" value="Input"></td></tr></table>
 <table><tr><td><input type="button" id="input-button-100" style="height: 100%;" value="Input"></td></tr></table>

 <table><tr><td><input type="checkbox" id="input-checkbox-75" style="height: 75%;"></td></tr></table>
 <table><tr><td><input type="checkbox" id="input-checkbox-100" style="height: 100%;"></td></tr></table>

 <table><tr><td><input type="file" id="input-file-75" style="height: 75%;"></td></tr></table>
 <table><tr><td><input type="file" id="input-file-100" style="height: 100%;"></td></tr></table>

 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-75" style="height: 75%;"></td></tr></table>
 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-100" style="height: 100%;"></td></tr></table>

 <table><tr><td><input type="radio" id="input-radio-75" style="height: 75%;"></td></tr></table>
 <table><tr><td><input type="radio" id="input-radio-100" style="height: 100%;"></td></tr></table>

 <table><tr><td><input type="reset" id="input-reset-75" style="height: 75%;"></td></tr></table>
 <table><tr><td><input type="reset" id="input-reset-100" style="height: 100%;"></td></tr></table>

 <table><tr><td><input type="submit" id="input-submit-75" style="height: 75%;"></td></tr></table>
 <table><tr><td><input type="submit" id="input-submit-100" style="height: 100%;"></td></tr></table>

 <table><tr><td><select id="select-75" style="height: 75%;"><option>Option</option></select></td></tr></table>
 <table><tr><td><select id="select-100" style="height: 100%;"><option>Option</option></select></td></tr></table>

 <p id="description"></p>
 <div id="console"></div>
 </body>
 </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 getHeight(id)
	{
	return getComputedStyleForElement(document.getElementById(id), 'height');
	}

	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 is75PercentOf(expression75, expression100, hasSubpixelSupport)
	{
	var str75 = eval(expression75);
	var str100 = eval(expression100);
	var num75 = parsePixelValue(str75);
	var num100 = parsePixelValue(str100);
	if (num75 < 0 \|\| num100 < 0)
	return;
	var expectedValue = num100 * 75 / 100;
	if (!hasSubpixelSupport)
	expectedValue = Math.floor(expectedValue);
	if (num75 == expectedValue)
	testPassed(expression75 + " is 75% of " + expression100 + ".");
	else
	testFailed(expression75 + " [" + str75 + "] is not 75% of " + expression100 + " [" + str100 + "].");
	}

	function test()
	{
	description("This test checks that replaced elements with percentage heights within table cells have the correct height.<br>Note, some of the button height tests fail on the Windows ports. See bug #34071.");

	var hasSubpixelSupport = getWidth('canvas-75') == '225px';

	shouldBe("getWidth('canvas-75')", hasSubpixelSupport ? "'225px'" : "'224px'");
	shouldBe("getHeight('canvas-75')", hasSubpixelSupport ? "'112.5px'" : "'112px'");
	shouldBe("getWidth('canvas-100')", "'300px'");
	shouldBe("getHeight('canvas-100')", "'150px'");

	shouldBe("getWidth('embed-75')", "'300px'");
	shouldBe("getHeight('embed-75')", hasSubpixelSupport ? "'112.5px'" : "'112px'");
	shouldBe("getWidth('embed-100')", "'300px'");
	shouldBe("getHeight('embed-100')", "'150px'");

	shouldBe("getWidth('img-75')", "'75px'");
	shouldBe("getHeight('img-75')", "'75px'");
	shouldBe("getWidth('img-100')", "'100px'");
	shouldBe("getHeight('img-100')", "'100px'");

	shouldBe("getWidth('img-75-nested')", "'75px'");
	shouldBe("getHeight('img-75-nested')", "'75px'");
	shouldBe("getWidth('img-100-nested')", "'100px'");
	shouldBe("getHeight('img-100-nested')", "'100px'");

	shouldBe("getWidth('object-75')", "'300px'");
	shouldBe("getHeight('object-75')", hasSubpixelSupport ? "'112.5px'" : "'112px'");
	shouldBe("getWidth('object-100')", "'300px'");
	shouldBe("getHeight('object-100')", "'150px'");

	shouldBe("getWidth('button-75')", "getWidth('button-100')");
	shouldBeTrue("getHeight('button-75') != '0px'");
	shouldBe("getHeight('button-75')", "getHeight('button-100')");

	shouldBe("getWidth('input-button-75')", "getWidth('input-button-100')");
	shouldBeTrue("getHeight('input-button-75') != '0px'");
	shouldBe("getHeight('input-button-75')", "getHeight('input-button-100')");

	shouldBe("getWidth('input-checkbox-75')", "getWidth('input-checkbox-100')");
	shouldBeFalse("getHeight('input-checkbox-75') != '0px'");
	// Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
	is75PercentOf("getHeight('input-checkbox-75')", "getHeight('input-checkbox-100')", hasSubpixelSupport);

	shouldBe("getWidth('input-file-75')", "getWidth('input-file-100')");
	shouldBeTrue("getHeight('input-file-75') != '0px'");

	// Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
	shouldBe("getWidth('input-image-75')", "'75px'");
	shouldBe("getHeight('input-image-75')", "'75px'");
	shouldBe("getWidth('input-image-100')", "'100px'");
	shouldBe("getHeight('input-image-100')", "'100px'");

	shouldBe("getWidth('input-radio-75')", "getWidth('input-radio-100')");
	shouldBeFalse("getHeight('input-radio-75') != '0px'");
	// Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
	is75PercentOf("getHeight('input-radio-75')", "getHeight('input-radio-100')", hasSubpixelSupport);

	shouldBe("getWidth('input-reset-75')", "getWidth('input-reset-100')");
	shouldBeTrue("getHeight('input-reset-75') != '0px'");
	shouldBe("getHeight('input-reset-75')", "getHeight('input-reset-100')");

	shouldBe("getWidth('input-submit-75')", "getWidth('input-submit-100')");
	shouldBeTrue("getHeight('input-submit-75') != '0px'");
	shouldBe("getHeight('input-submit-75')", "getHeight('input-submit-100')");

	shouldBe("getWidth('select-75')", "getWidth('select-100')");
	shouldBeTrue("getHeight('select-75') != '0px'");
	shouldBe("getHeight('select-75')", "getHeight('select-100')");

	isSuccessfullyParsed();

	if (window.testRunner) {
	testRunner.notifyDone();
	}
	}
	</script>
	</head>
	<body onload="test()">

	<table><tr><td><canvas id="canvas-75" style="background-color: #00ff00; height: 75%;"></canvas></td></tr></table>
	<table><tr><td><canvas id="canvas-100" style="background-color: #00ff00; height: 100%;"></canvas></td></tr></table>

	<table><tr><td><embed id="embed-75" type="video/quicktime" style="background-color: #00ff00; height: 75%;"></embed></td></tr></table>
	<table><tr><td><embed id="embed-100" type="video/quicktime" style="background-color: #00ff00; height: 100%;"></embed></td></tr></table>

	<table><tr><td><img id="img-75" src="resources/square-blue-100x100.png" style="height: 75%;"></td></tr></table>
	<table><tr><td><img id="img-100" src="resources/square-blue-100x100.png" style="height: 100%;"></td></tr></table>

	<table><tr><td><div><img id="img-75-nested" src="resources/square-blue-100x100.png" style="height: 75%;"></div></td></tr></table>
	<table><tr><td><div><img id="img-100-nested" src="resources/square-blue-100x100.png" style="height: 100%;"></div></td></tr></table>

	<table><tr><td><object id="object-75" style="background-color: #00ff00; height: 75%;"></object></td></tr></table>
	<table><tr><td><object id="object-100" style="background-color: #00ff00; height: 100%;"></object></td></tr></table>

	<table><tr><td><button id="button-75" style="height: 75%;">Button</button></td></tr></table>
	<table><tr><td><button id="button-100" style="height: 100%;">Button</button></td></tr></table>

	<table><tr><td><input type="button" id="input-button-75" style="height: 75%;" value="Input"></td></tr></table>
	<table><tr><td><input type="button" id="input-button-100" style="height: 100%;" value="Input"></td></tr></table>

	<table><tr><td><input type="checkbox" id="input-checkbox-75" style="height: 75%;"></td></tr></table>
	<table><tr><td><input type="checkbox" id="input-checkbox-100" style="height: 100%;"></td></tr></table>

	<table><tr><td><input type="file" id="input-file-75" style="height: 75%;"></td></tr></table>
	<table><tr><td><input type="file" id="input-file-100" style="height: 100%;"></td></tr></table>

	<table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-75" style="height: 75%;"></td></tr></table>
	<table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-100" style="height: 100%;"></td></tr></table>

	<table><tr><td><input type="radio" id="input-radio-75" style="height: 75%;"></td></tr></table>
	<table><tr><td><input type="radio" id="input-radio-100" style="height: 100%;"></td></tr></table>

	<table><tr><td><input type="reset" id="input-reset-75" style="height: 75%;"></td></tr></table>
	<table><tr><td><input type="reset" id="input-reset-100" style="height: 100%;"></td></tr></table>

	<table><tr><td><input type="submit" id="input-submit-75" style="height: 75%;"></td></tr></table>
	<table><tr><td><input type="submit" id="input-submit-100" style="height: 100%;"></td></tr></table>

	<table><tr><td><select id="select-75" style="height: 75%;"><option>Option</option></select></td></tr></table>
	<table><tr><td><select id="select-100" style="height: 100%;"><option>Option</option></select></td></tr></table>

	<p id="description"></p>
	<div id="console"></div>
	</body>
	</html>