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/html/rendering/replaced-elements/svg-inline-sizing | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.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/html/rendering/replaced-elements/svg-inline-sizing')
2 files changed, 108 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.html new file mode 100644 index 0000000000..2b3cf65366 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>SVG sizing: inline</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px; + } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-inline.js"></script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.js b/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.js new file mode 100644 index 0000000000..9b7fca0502 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.js @@ -0,0 +1,79 @@ +// global async_test, assert_equals +// +// This test generates a couple of scenarios (each a +// SVGSizing.TestData) for sizing inline <svg> and uses a simple +// JavaScript sizing implementation for comparison. +// +// The tests loops through different combinations of: +// +// * width and height attributes and style on <svg> +// +// * viewBox on <svg> (gives intrinsic ratio) +// +// * width and height on containing block of <svg> +// +// All these may contribute to the final size of the SVG. The test +// focuses on the size of the CSS box generated by the SVG. Little +// focus is put on variations within an attribute that doesn't affect +// the final size. +// +// To debug a specific test append ?<test-id> to the URL. An <iframe> +// is generated with equivalent test and the source of the test is +// added to a <pre> element. + +var debugHint = function(id) { return "(append ?"+id+" to debug) "; }; +var testSingleId; +if (window.location.search) { + testSingleId = window.location.search.substring(1); + debugHint = function(id) { return ""; }; +} + +var testContainer = document.querySelector('#testContainer'); +var testContainerWidth = testContainer.getBoundingClientRect().width; +var testContainerHeight = testContainer.getBoundingClientRect().height; + +SVGSizing.doCombinationTest( + [["placeholder", [ null ]], + ["containerWidthStyle", [null, "400px"]], + ["containerHeightStyle", [null, "400px"]], + ["svgViewBoxAttr", [ null, "0 0 100 200" ]], + ["svgWidthStyle", [ null, "100px", "50%" ]], + ["svgHeightStyle", [ null, "100px", "50%" ]], + ["svgWidthAttr", [ null, "200", "25%" ]], + ["svgHeightAttr", [ null, "200", "25%" ]]], + function(config, id, cont) { + var testData = new SVGSizing.TestData(config); + + var expectedRect = + testData.computeInlineReplacedSize(testContainerWidth, + testContainerHeight); + var svgElement = testData.buildSVGOrPlaceholder(); + var container = + testData.buildContainer(svgElement); + + var checkSize = function() { + var svgRect = + svgElement.getBoundingClientRect(); + + try { + assert_equals(svgRect.width, + expectedRect.width, + debugHint(id) + "Wrong width"); + assert_equals(svgRect.height, + expectedRect.height, + debugHint(id) + "Wrong height"); + } finally { + testContainer.removeChild(container); + if (testSingleId) + document.body.removeChild(testContainer); + cont(id+1); + } + }; + + testContainer.appendChild(container); + test(checkSize, testData.name); + + if (testSingleId == id) { + testData.buildDemo(expectedRect, id); + } + }, testSingleId); |