| <?xml version="1.0" encoding="UTF-8"?> |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> |
| <title>SVG Geometry Properties: getComputedStyle().height</title> |
| <metadata> |
| <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"/> |
| <h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/> |
| </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 width="42" style="height: auto"/> |
| <rect width="42" style="height: 20px"/> |
| <rect width="42" style="height: 40%"/> |
| <rect width="42" style="height: 80%; 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="42" height="200"/> |
| <image width="42" style="height: auto"/> |
| <image width="42" style="height: 230px"/> |
| <image width="42" style="height: 25%"/> |
| <image width="42" style="height: 25%; display: none"/> |
| |
| <foreignObject>Some content</foreignObject> |
| <foreignObject height="200">Some content</foreignObject> |
| <foreignObject style="height: auto">Some content</foreignObject> |
| <foreignObject style="height: 75px">Some content</foreignObject> |
| <foreignObject style="height: 50%">Some content</foreignObject> |
| <foreignObject style="height: auto; display: none">Some content</foreignObject> |
| |
| <svg/> |
| <svg height="200"/> |
| <svg style="height: auto"/> |
| <svg style="height: 200px"/> |
| <svg style="height: 50%"/> |
| <svg style="height: 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 'height' return the used value. |
| { |
| element: 'rect', |
| expected: [ |
| { value: '0px', description: 'initial' }, |
| { value: '200px', description: 'presentation attribute' }, |
| { value: '0px', description: 'inline style (auto)' }, |
| { value: '20px', description: 'inline style (pixels)' }, |
| { value: '40px', description: 'inline style (percentage)' }, |
| { value: '80%', description: 'inline style but "display: none"' }, |
| ] |
| }, |
| { |
| element: 'image', |
| expected: [ |
| { value: '0px', description: 'initial' }, |
| { value: '200px', description: 'presentation attribute' }, |
| { value: '0px', description: 'inline style (auto)' }, |
| { value: '230px', description: 'inline style (pixels)' }, |
| { value: '25px', description: 'inline style (percentage)' }, |
| { value: '25%', description: 'inline style but "display: none"' }, |
| ] |
| }, |
| { |
| element: 'foreignObject', |
| expected: [ |
| { value: '0px', description: 'initial' }, |
| { value: '200px', description: 'presentation attribute' }, |
| { value: '0px', description: 'inline style (auto)' }, |
| { value: '75px', description: 'inline style (pixels)' }, |
| { value: '50px', description: 'inline style (percentage)' }, |
| { value: 'auto', description: 'inline style but "display: none"' }, |
| ] |
| }, |
| { |
| element: 'svg', |
| expected: [ |
| { value: '100px', description: 'initial' }, |
| { value: '200px', description: 'presentation attribute' }, |
| { value: '100px', description: 'inline style (auto)' }, |
| { value: '200px', description: 'inline style (pixels)' }, |
| { value: '50px', description: 'inline style (percentage)' }, |
| { value: 'auto', description: 'inline style but "display: none"' }, |
| ] |
| }, |
| |
| // Cases where computed 'height' return the computed value. |
| { |
| element: 'g', |
| expected: [ |
| { value: 'auto', description: 'initial' }, |
| { value: 'auto', description: 'initial (with dummy attribute)' }, |
| { value: 'auto', description: 'inline style (auto)' }, |
| { value: '20px', description: 'inline style (pixels)' }, |
| { value: '10%', description: 'inline style (percentage)' }, |
| ] |
| }, |
| { |
| element: 'text', |
| expected: [ |
| { value: 'auto', description: 'initial' }, |
| { value: 'auto', description: 'initial (with dummy attribute)' }, |
| { value: 'auto', description: 'inline style (auto)' }, |
| { value: '20px', description: 'inline style (pixels)' }, |
| { value: '30%', description: 'inline style (percentage)' }, |
| ] |
| }, |
| ].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.height, expected.value, expected.description); |
| }, document.title + ', <' + entry.element + '> ' + expected.description); |
| }); |
| }); |
| ]]></script> |
| </svg> |