169 lines
5.2 KiB
HTML
169 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<style>
|
|
* { font-size: 16px; }
|
|
svg, rect { font-family: 'Ahem'; }
|
|
div { font-size: 8px; }
|
|
</style>
|
|
<html>
|
|
<svg id="svg" width="0" height="0"></svg>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<script>
|
|
description("Test that 'width' presentation attribute is parsed with CSS presentation rules.");
|
|
|
|
function computedStyle(property, value) {
|
|
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
document.getElementById('svg').appendChild(rect);
|
|
rect.setAttribute(property, value);
|
|
var computedValue = getComputedStyle(rect).getPropertyValue(property);
|
|
document.getElementById('svg').removeChild(rect);
|
|
return computedValue;
|
|
}
|
|
|
|
function testComputed(property, value, expected) {
|
|
shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
|
|
}
|
|
|
|
function negativeTest(property, value) {
|
|
testComputed(property, value, "auto");
|
|
}
|
|
|
|
function negativeTestZero(property, value) {
|
|
testComputed(property, value, "0px");
|
|
}
|
|
|
|
// Test 'cx'.
|
|
testComputed("cx", " 100", "100px");
|
|
testComputed("cx", "100 ", "100px");
|
|
testComputed("cx", "100px", "100px");
|
|
testComputed("cx", "1em", "16px");
|
|
testComputed("cx", "1ex", "12.800000190734863px");
|
|
testComputed("cx", "20%", "20%");
|
|
testComputed("cx", "-200px", "-200px");
|
|
|
|
// Test 'cx'.
|
|
testComputed("cy", " 100", "100px");
|
|
testComputed("cy", "100 ", "100px");
|
|
testComputed("cy", "100px", "100px");
|
|
testComputed("cy", "1em", "16px");
|
|
testComputed("cy", "1ex", "12.800000190734863px");
|
|
testComputed("cy", "20%", "20%");
|
|
testComputed("cy", "-200px", "-200px");
|
|
|
|
// Test 'r'.
|
|
testComputed("r", " 100", "100px");
|
|
testComputed("r", "100 ", "100px");
|
|
testComputed("r", "100px", "100px");
|
|
testComputed("r", "1em", "16px");
|
|
testComputed("r", "1ex", "12.800000190734863px");
|
|
testComputed("r", "20%", "20%");
|
|
testComputed("r", "-200px", "0px");
|
|
|
|
// Test 'rx'.
|
|
testComputed("rx", " 100", "100px");
|
|
testComputed("rx", "100 ", "100px");
|
|
testComputed("rx", "100px", "100px");
|
|
testComputed("rx", "1em", "16px");
|
|
testComputed("rx", "1ex", "12.800000190734863px");
|
|
testComputed("rx", "20%", "20%");
|
|
testComputed("rx", "-200px", "auto");
|
|
|
|
// Test 'ry'.
|
|
testComputed("ry", " 100", "100px");
|
|
testComputed("ry", "100 ", "100px");
|
|
testComputed("ry", "100px", "100px");
|
|
testComputed("ry", "1em", "16px");
|
|
testComputed("ry", "1ex", "12.800000190734863px");
|
|
testComputed("ry", "20%", "20%");
|
|
testComputed("ry", "-200px", "auto");
|
|
|
|
// Test 'width'.
|
|
testComputed("width", "auto", "auto");
|
|
testComputed("width", " 100", "100px");
|
|
testComputed("width", "100 ", "100px");
|
|
testComputed("width", "100px", "100px");
|
|
testComputed("width", "1em", "16px");
|
|
testComputed("width", "1ex", "12.800000190734863px");
|
|
testComputed("width", "20%", "20%");
|
|
// FIXME: Vieport units not implemented for SVG at the moment.
|
|
// testComputed("width", "1vh", "7.869999885559082px");
|
|
// testComputed("width", "1vw", "14.029999732971191px");
|
|
|
|
// Test 'x'.
|
|
testComputed("x", " 100", "100px");
|
|
testComputed("x", "100 ", "100px");
|
|
testComputed("x", "100px", "100px");
|
|
testComputed("x", "1em", "16px");
|
|
testComputed("x", "1ex", "12.800000190734863px");
|
|
testComputed("x", "20%", "20%");
|
|
testComputed("x", "-200px", "-200px");
|
|
|
|
// Test 'y'.
|
|
testComputed("y", " 100", "100px");
|
|
testComputed("y", "100 ", "100px");
|
|
testComputed("y", "100px", "100px");
|
|
testComputed("y", "1em", "16px");
|
|
testComputed("y", "1ex", "12.800000190734863px");
|
|
testComputed("y", "20%", "20%");
|
|
testComputed("y", "-200px", "-200px");
|
|
|
|
// Negative tests for 'cx'.
|
|
negativeTestZero("cx", "auto", "auto");
|
|
negativeTestZero("cx", "100 px");
|
|
negativeTestZero("cx", "100px;");
|
|
negativeTestZero("cx", "100px !important");
|
|
negativeTestZero("cx", "{ 100px }");
|
|
|
|
// Negative tests for 'cy'.
|
|
negativeTestZero("cy", "auto");
|
|
negativeTestZero("cy", "100 px");
|
|
negativeTestZero("cy", "100px;");
|
|
negativeTestZero("cy", "100px !important");
|
|
negativeTestZero("cy", "{ 100px }");
|
|
|
|
// Negative tests for 'r'.
|
|
negativeTestZero("r", "auto", "auto");
|
|
negativeTestZero("r", "100 px");
|
|
negativeTestZero("r", "100px;");
|
|
negativeTestZero("r", "100px !important");
|
|
negativeTestZero("r", "{ 100px }");
|
|
|
|
// Negative tests for 'rx'.
|
|
negativeTest("rx", "auto", "auto");
|
|
negativeTest("rx", "100 px", "auto");
|
|
negativeTest("rx", "100px;", "auto");
|
|
negativeTest("rx", "100px !important", "auto");
|
|
negativeTest("rx", "{ 100px }", "auto");
|
|
|
|
// Negative tests for 'ry'.
|
|
negativeTest("ry", "auto", "auto");
|
|
negativeTest("ry", "100 px", "auto");
|
|
negativeTest("ry", "100px;", "auto");
|
|
negativeTest("ry", "100px !important", "auto");
|
|
negativeTest("ry", "{ 100px }", "auto");
|
|
|
|
// Negative tests for 'width'.
|
|
negativeTest("width", "100 px");
|
|
negativeTest("width", "100px;");
|
|
negativeTest("width", "100px !important");
|
|
negativeTest("width", "{ 100px }");
|
|
negativeTest("width", "-100px");
|
|
|
|
// Negative tests for 'x'.
|
|
negativeTestZero("x", "auto", "auto");
|
|
negativeTestZero("x", "100 px");
|
|
negativeTestZero("x", "100px;");
|
|
negativeTestZero("x", "100px !important");
|
|
negativeTestZero("x", "{ 100px }");
|
|
|
|
// Negative tests for 'y'.
|
|
negativeTestZero("y", "auto");
|
|
negativeTestZero("y", "100 px");
|
|
negativeTestZero("y", "100px;");
|
|
negativeTestZero("y", "100px !important");
|
|
negativeTestZero("y", "{ 100px }");
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|