diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/svg/geometry/parsing | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/svg/geometry/parsing')
24 files changed, 832 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/geometry/parsing/cx-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/cx-computed.svg new file mode 100644 index 0000000000..c349a6b97c --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/cx-computed.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: getComputedStyle().cx</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CX"/> + </metadata> + <g id="target"></g> + <style> + #target { + font-size: 40px; + } + </style> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/computed-testcommon.js"/> + <script><![CDATA[ + +test_computed_value("cx", "-10px"); +test_computed_value("cx", "0.5em", "20px"); +test_computed_value("cx", "calc(10px + 0.5em)", "30px"); +test_computed_value("cx", "calc(10px - 0.5em)", "-10px"); +test_computed_value("cx", "40%"); +test_computed_value("cx", "calc(50% + 60px)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/cx-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/cx-invalid.svg new file mode 100644 index 0000000000..4b1b90158f --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/cx-invalid.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing cx with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CX"/> + <h:meta name="assert" content="cx supports only the grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("cx", "10"); +test_invalid_value("cx", "auto"); +test_invalid_value("cx", "10px 20px"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/cx-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/cx-valid.svg new file mode 100644 index 0000000000..a96fee5655 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/cx-valid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing cx with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CX"/> + <h:meta name="assert" content="cx supports the full grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("cx", "0", "0px"); +test_valid_value("cx", "-1px"); +test_valid_value("cx", "calc(2em + 3ex)"); +test_valid_value("cx", "4%"); +test_valid_value("cx", "5ch"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/cy-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/cy-computed.svg new file mode 100644 index 0000000000..a37c99560b --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/cy-computed.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: getComputedStyle().cy</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CY"/> + </metadata> + <g id="target"></g> + <style> + #target { + font-size: 40px; + } + </style> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/computed-testcommon.js"/> + <script><![CDATA[ + +test_computed_value("cy", "-10px"); +test_computed_value("cy", "0.5em", "20px"); +test_computed_value("cy", "calc(10px + 0.5em)", "30px"); +test_computed_value("cy", "calc(10px - 0.5em)", "-10px"); +test_computed_value("cy", "40%"); +test_computed_value("cy", "calc(50% + 60px)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/cy-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/cy-invalid.svg new file mode 100644 index 0000000000..528eed02ce --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/cy-invalid.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing cy with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CY"/> + <h:meta name="assert" content="cy supports only the grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("cy", "10"); +test_invalid_value("cy", "auto"); +test_invalid_value("cy", "10px 20px"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/cy-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/cy-valid.svg new file mode 100644 index 0000000000..022445662b --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/cy-valid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing cy with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CY"/> + <h:meta name="assert" content="cy supports the full grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("cy", "0", "0px"); +test_valid_value("cy", "-1px"); +test_valid_value("cy", "calc(2em + 3ex)"); +test_valid_value("cy", "4%"); +test_valid_value("cy", "5rem"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/height-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/height-computed.svg new file mode 100644 index 0000000000..bcc1f9d0e1 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/height-computed.svg @@ -0,0 +1,130 @@ +<?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> diff --git a/testing/web-platform/tests/svg/geometry/parsing/r-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/r-computed.svg new file mode 100644 index 0000000000..ac897cd91a --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/r-computed.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: getComputedStyle().r</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#R"/> + </metadata> + <g id="target"></g> + <style> + #target { + font-size: 40px; + } + </style> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/computed-testcommon.js"/> + <script><![CDATA[ + +test_computed_value("r", "10px"); +test_computed_value("r", "0.5em", "20px"); +test_computed_value("r", "calc(10px + 0.5em)", "30px"); +test_computed_value("r", "calc(10px - 0.5em)", "0px"); +test_computed_value("r", "40%"); +test_computed_value("r", "calc(50% + 60px)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/r-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/r-invalid.svg new file mode 100644 index 0000000000..a14c52266c --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/r-invalid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing r with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#R"/> + <h:meta name="assert" content="r supports only the grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("r", "10"); +test_invalid_value("r", "auto"); +test_invalid_value("r", "10px 20px"); +test_invalid_value("r", "-1px"); +test_invalid_value("r", "-10%"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/r-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/r-valid.svg new file mode 100644 index 0000000000..70cd5503b7 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/r-valid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing r with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#R"/> + <h:meta name="assert" content="r supports the full grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("r", "0", "0px"); +test_valid_value("r", "1px"); +test_valid_value("r", "calc(2em + 3ex)"); +test_valid_value("r", "4%"); +test_valid_value("r", "5vmin"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/rx-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/rx-computed.svg new file mode 100644 index 0000000000..c07368b5f2 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/rx-computed.svg @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: getComputedStyle().rx</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RX"/> + </metadata> + <g id="target"></g> + <style> + #target { + font-size: 40px; + } + </style> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/computed-testcommon.js"/> + <script><![CDATA[ + +test_computed_value("rx", "auto"); + +test_computed_value("rx", "10px"); +test_computed_value("rx", "0.5em", "20px"); +test_computed_value("rx", "calc(10px + 0.5em)", "30px"); +test_computed_value("rx", "calc(10px - 0.5em)", "0px"); +test_computed_value("rx", "40%"); +test_computed_value("rx", "calc(50% + 60px)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/rx-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/rx-invalid.svg new file mode 100644 index 0000000000..9ce0603bea --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/rx-invalid.svg @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing rx with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RX"/> + <h:meta name="assert" content="rx supports only the grammar '<length-percentage> | auto'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("rx", "10"); +test_invalid_value("rx", "none"); +test_invalid_value("rx", "10px 20px"); +test_invalid_value("rx", "-1px"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/rx-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/rx-valid.svg new file mode 100644 index 0000000000..9d156b3ccc --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/rx-valid.svg @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing rx with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RX"/> + <h:meta name="assert" content="rx supports the full grammar '<length-percentage> | auto'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("rx", "auto"); + +test_valid_value("rx", "0", "0px"); +test_valid_value("rx", "1px"); +test_valid_value("rx", "calc(2em + 3ex)"); +test_valid_value("rx", "4%"); +test_valid_value("rx", "5vw"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/ry-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/ry-computed.svg new file mode 100644 index 0000000000..8e54bd219d --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/ry-computed.svg @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: getComputedStyle().ry</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RY"/> + </metadata> + <g id="target"></g> + <style> + #target { + font-size: 40px; + } + </style> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/computed-testcommon.js"/> + <script><![CDATA[ + +test_computed_value("ry", "auto"); + +test_computed_value("ry", "10px"); +test_computed_value("ry", "0.5em", "20px"); +test_computed_value("ry", "calc(10px + 0.5em)", "30px"); +test_computed_value("ry", "calc(10px - 0.5em)", "0px"); +test_computed_value("ry", "40%"); +test_computed_value("ry", "calc(50% + 60px)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/ry-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/ry-invalid.svg new file mode 100644 index 0000000000..5938ae830d --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/ry-invalid.svg @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing ry with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RY"/> + <h:meta name="assert" content="ry supports only the grammar '<length-percentage> | auto'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("ry", "10"); +test_invalid_value("ry", "none"); +test_invalid_value("ry", "10px 20px"); +test_invalid_value("ry", "-1px"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/ry-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/ry-valid.svg new file mode 100644 index 0000000000..178c0c007d --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/ry-valid.svg @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing ry with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RY"/> + <h:meta name="assert" content="ry supports the full grammar '<length-percentage> | auto'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("ry", "auto"); + +test_valid_value("ry", "0", "0px"); +test_valid_value("ry", "1px"); +test_valid_value("ry", "calc(2em + 3ex)"); +test_valid_value("ry", "4%"); +test_valid_value("ry", "5vh"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/sizing-properties-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/sizing-properties-computed.svg new file mode 100644 index 0000000000..01713fbbe2 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/sizing-properties-computed.svg @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Geometry Properties: getComputedStyle().width</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"/> + <h:link rel="help" href="https://drafts.csswg.org/css-sizing-3/#preferred-size-properties"/> + <h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/> + </metadata> + <rect id="target"></rect> + <style> + #target { + font-size: 40px; + } + </style> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/computed-testcommon.js"/> + <script><![CDATA[ + +test_computed_value("width", "10px"); +test_computed_value("width", "0.5em", "20px"); +test_computed_value("width", "calc(10px + 0.5em)", "30px"); +test_computed_value("width", "calc(10px - 0.5em)", "0px"); +test_computed_value("width", "40%", "320px"); +test_computed_value("width", "calc(50% + 1.5em)", "460px"); + +test_computed_value("height", "10px"); +test_computed_value("height", "0.5em", "20px"); +test_computed_value("height", "calc(10px + 0.5em)", "30px"); +test_computed_value("height", "calc(10px - 0.5em)", "0px"); +test_computed_value("height", "40%", "320px"); +test_computed_value("height", "calc(50% + 1.5em)", "460px"); + +test(() => { + const target = document.getElementById('target'); + target.style.width = 'calc(50% + 1.5em)'; + target.style.display = 'none'; + assert_equals(getComputedStyle(target).width, 'calc(50% + 60px)'); + target.style.width = ''; + target.style.display = ''; +}, "resolved value is computed value when display is none"); + +test(() => { + const target = document.getElementById('target'); + target.style.height = 'calc(50% + 1.5em)'; + target.style.display = 'none'; + assert_equals(getComputedStyle(target).height, 'calc(50% + 60px)'); + target.style.height = ''; + target.style.display = ''; +}, "resolved value is computed value when display is contents"); + + ]]></script> +} +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/width-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/width-computed.svg new file mode 100644 index 0000000000..1af3de1234 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/width-computed.svg @@ -0,0 +1,130 @@ +<?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().width</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 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> diff --git a/testing/web-platform/tests/svg/geometry/parsing/x-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/x-computed.svg new file mode 100644 index 0000000000..458c343814 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/x-computed.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: getComputedStyle().x</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#X"/> + </metadata> + <g id="target"></g> + <style> + #target { + font-size: 40px; + } + </style> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/computed-testcommon.js"/> + <script><![CDATA[ + +test_computed_value("x", "-10px"); +test_computed_value("x", "0.5em", "20px"); +test_computed_value("x", "calc(10px + 0.5em)", "30px"); +test_computed_value("x", "calc(10px - 0.5em)", "-10px"); +test_computed_value("x", "40%"); +test_computed_value("x", "calc(50% + 60px)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/x-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/x-invalid.svg new file mode 100644 index 0000000000..31ad29524e --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/x-invalid.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing x with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#X"/> + <h:meta name="assert" content="x supports only the grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("x", "10"); +test_invalid_value("x", "auto"); +test_invalid_value("x", "10px 20px"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/x-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/x-valid.svg new file mode 100644 index 0000000000..2b06f26ac4 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/x-valid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing x with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#X"/> + <h:meta name="assert" content="x supports the full grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("x", "0", "0px"); +test_valid_value("x", "-1px"); +test_valid_value("x", "calc(2em + 3ex)"); +test_valid_value("x", "4%"); +test_valid_value("x", "5cm"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/y-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/y-computed.svg new file mode 100644 index 0000000000..c3dc874215 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/y-computed.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: getComputedStyle().y</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Y"/> + </metadata> + <g id="target"></g> + <style> + #target { + font-size: 40px; + } + </style> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/computed-testcommon.js"/> + <script><![CDATA[ + +test_computed_value("y", "-10px"); +test_computed_value("y", "0.5em", "20px"); +test_computed_value("y", "calc(10px + 0.5em)", "30px"); +test_computed_value("y", "calc(10px - 0.5em)", "-10px"); +test_computed_value("y", "40%"); +test_computed_value("y", "calc(50% + 60px)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/y-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/y-invalid.svg new file mode 100644 index 0000000000..d6ea944dbd --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/y-invalid.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing y with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Y"/> + <h:meta name="assert" content="y supports only the grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("y", "10"); +test_invalid_value("y", "auto"); +test_invalid_value("y", "10px 20px"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/geometry/parsing/y-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/y-valid.svg new file mode 100644 index 0000000000..aad0e4e293 --- /dev/null +++ b/testing/web-platform/tests/svg/geometry/parsing/y-valid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>SVG Geometry Properties: parsing y with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Y"/> + <h:meta name="assert" content="y supports the full grammar '<length-percentage>'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("y", "0", "0px"); +test_valid_value("y", "-1px"); +test_valid_value("y", "calc(2em + 3ex)"); +test_valid_value("y", "4%"); +test_valid_value("y", "5mm"); + + ]]></script> +</svg> |
