| <!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.8px"); |
| 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.8px"); |
| 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.8px"); |
| 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.8px"); |
| 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.8px"); |
| 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.8px"); |
| 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.8px"); |
| 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.8px"); |
| 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> |
