Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 13 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /svg/geometry/parsing/width-computed.svg - WPT Dashboard Interop Dashboard
SVG Preview (Scaled)
<?xml version="1.0" encoding="UTF-8"?>
<title>SVG Geometry Properties: getComputedStyle().width</title>
<metadata>
</metadata>
<h:script src="/resources/testharness.js"/>
<h:script src="/resources/testharnessreport.js"/>
<svg width="200" height="100" id="test-content">
<rect/>
<rect width="100" height="200"/>
<rect height="42" style="width: 40%"/>
<rect height="42" style="width: auto"/>
<rect height="42" style="width: 20px"/>
<rect height="42" style="width: 42%; display: none"/>
<g><rect width="100" height="100"/></g>
<g width="100" height="42px"><rect width="100" height="100"/></g>
<g style="width: 10%; height: auto"><rect width="100" height="100"/></g>
<g style="width: auto; height: 20px"><rect width="100" height="100"/></g>
<g style="width: 20px; height: 10%"><rect width="100" height="100"/></g>
<image/>
<image width="100"/>
<image height="42" style="width: 25%"/>
<image height="42" style="width: auto"/>
<image height="42" style="width: 230px"/>
<image height="42" style="width: 25%; display: none"/>
<foreignObject>Some content</foreignObject>
<foreignObject width="100">Some content</foreignObject>
<foreignObject style="width: 50%">Some content</foreignObject>
<foreignObject style="width: auto">Some content</foreignObject>
<foreignObject style="width: 75px">Some content</foreignObject>
<foreignObject style="width: auto; display: none">Some content</foreignObject>
<svg/>
<svg width="100"/>
<svg style="width: auto"/>
<svg style="width: 200px"/>
<svg style="width: 50%"/>
<svg style="width: auto; display: none"/>
<text>Text1</text>
<text width="100px" height="42">Text2</text>
<text style="width: 30%; height: auto">Text3</text>
<text style="width: auto; height: 20px">Text3</text>
<text style="width: 20px; height: 30%">Text3</text>
</svg>
<script><![CDATA[
[
// Cases where computed 'width' return the used value.
{
element: 'rect',
expected: [
{ value: '0px', description: 'initial' },
{ value: '100px', description: 'presentation attribute' },
{ value: '80px', description: 'inline style (percentage)' },
{ value: '0px', description: 'inline style (auto)' },
{ value: '20px', description: 'inline style (pixels)' },
{ value: '42%', description: 'inline style but "display: none"' },
]
},
{
element: 'image',
expected: [
{ value: '0px', description: 'initial' },
{ value: '100px', description: 'presentation attribute' },
{ value: '50px', description: 'inline style (percentage)' },
{ value: '0px', description: 'inline style (auto)' },
{ value: '230px', description: 'inline style (pixels)' },
{ value: '25%', description: 'inline style but "display: none"' },
]
},
{
element: 'foreignObject',
expected: [
{ value: '0px', description: 'initial' },
{ value: '100px', description: 'presentation attribute' },
{ value: '100px', description: 'inline style (percentage)' },
{ value: '0px', description: 'inline style (auto)' },
{ value: '75px', description: 'inline style (pixels)' },
{ value: 'auto', description: 'inline style but "display: none"' },
]
},
{
element: 'svg',
expected: [
{ value: '200px', description: 'initial' },
{ value: '100px', description: 'presentation attribute' },
{ value: '200px', description: 'inline style (auto)' },
{ value: '200px', description: 'inline style (pixels)' },
{ value: '100px', description: 'inline style (percentage)' },
{ value: 'auto', description: 'inline style but "display: none"' },
]
},
// Cases where computed 'width' return the computed value.
{
element: 'g',
expected: [
{ value: 'auto', description: 'initial' },
{ value: 'auto', description: 'initial (with dummy attribute)' },
{ value: '10%', description: 'inline style (percentage)' },
{ value: 'auto', description: 'inline style (auto)' },
{ value: '20px', description: 'inline style (pixels)' },
]
},
{
element: 'text',
expected: [
{ value: 'auto', description: 'initial' },
{ value: 'auto', description: 'initial (with dummy attribute)' },
{ value: '30%', description: 'inline style (percentage)' },
{ value: 'auto', description: 'inline style (auto)' },
{ value: '20px', description: 'inline style (pixels)' },
]
},
].forEach(function(entry) {
let element_set = document.querySelectorAll('#test-content > ' + entry.element);
entry.expected.forEach(function(expected, index) {
test(function() {
let style = getComputedStyle(element_set[index]);
assert_equals(style.width, expected.value, expected.description);
}, document.title + ', <' + entry.element + '> ' + expected.description);
});
});
]]></script>
</svg>