diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing')
10 files changed, 393 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-embedded-sizing.js b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-embedded-sizing.js new file mode 100644 index 0000000000..a502d2c747 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-embedded-sizing.js @@ -0,0 +1,96 @@ +// 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 on <object>, <iframe> (input dependent) +// +// * width and height on <svg> +// +// * viewBox on <svg> (gives intrinsic ratio) +// +// * width and height on containing block of <object> +// +// All these contribute to the final size of the SVG in some way. +// +// The test focuses on the size of the CSS box generated by the SVG. +// The SVG is always empty by itself so no actual SVG are tested. +// Little focus is put on variations within an attribute that doesn't +// affect the sizing behavior. +// +// To debug a specific test, append ?<test-id> to the URL. An <iframe> +// is generated with equivalent test and the source code of the test +// can be downloaded. + +var debugHint = function(id) { return "(append ?"+id+" to debug) "; }; +var testSingleId; +if (window.location.search) { + testSingleId = parseInt(window.location.search.substring(1)); + debugHint = function(id) { return ""; }; +} + +function testPlaceholderWithHeight(placeholder, + placeholderHeightAttr) { + var testContainer = document.querySelector('#testContainer'); + var outerWidth = testContainer.getBoundingClientRect().width; + var outerHeight = testContainer.getBoundingClientRect().height; + + SVGSizing.doCombinationTest( + [["placeholder", [ placeholder ]], + ["containerWidthStyle", [null, "400px"]], + ["containerHeightStyle", [null, "400px"]], + ["placeholderWidthAttr", [null, "100", "50%"]], + ["placeholderHeightAttr", [placeholderHeightAttr]], + ["svgViewBoxAttr", [ null, "0 0 100 200" ]], + ["svgWidthAttr", [ null, "200", "25%" ]], + ["svgHeightAttr", [ null, "200", "25%" ]]], + function (config, id, cont) { + var testData = new SVGSizing.TestData(config); + var t = async_test(testData.name); + var expectedRect = + testData.computeInlineReplacedSize(outerWidth, outerHeight); + var placeholder = testData.buildSVGOrPlaceholder(); + var container = + testData.buildContainer(placeholder); + + var checkSize = function() { + var placeholderRect = + placeholder.getBoundingClientRect(); + + try { + assert_equals(placeholderRect.width, + expectedRect.width, + debugHint(id) + "Wrong width"); + assert_equals(placeholderRect.height, + expectedRect.height, + debugHint(id) + "Wrong height"); + } finally { + testContainer.removeChild(container); + if (testSingleId) + document.body.removeChild(testContainer); + cont(id+1); + } + t.done(); + }; + + if (!config.placeholder) { + testContainer.appendChild(container); + test(checkSize, testData.name); + } else { + t.step(function() { + placeholder.addEventListener('load', function() { + // step_timeout is a work-around to let engines + // finish layout of child browsing contexts even + // after the load event + step_timeout(t.step_func(checkSize), 0); + }); + testContainer.appendChild(container); + }); + } + if (testSingleId == id) + testData.buildDemo(expectedRect, id); + }, testSingleId); +} diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-auto.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-auto.html new file mode 100644 index 0000000000..4c3fefe88f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-auto.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <iframe></title> + <meta name=timeout content=long> + <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 + } + iframe { border: 0 } + </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-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("iframe", null)</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-fixed.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-fixed.html new file mode 100644 index 0000000000..ae3328c6a8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-fixed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <iframe></title> + <meta name=timeout content=long> + <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 + } + iframe { border: 0 } + </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-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("iframe", '100px')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-percentage.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-percentage.html new file mode 100644 index 0000000000..da00c0680b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-percentage.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <iframe></title> + <meta name=timeout content=long> + <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 + } + iframe { border: 0 } + </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-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("iframe", '100%')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-auto.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-auto.html new file mode 100644 index 0000000000..cef3530676 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-auto.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <img></title> + <meta name=timeout content=long> + <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 + } + iframe { border: 0 } + </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-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("img", null)</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-fixed.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-fixed.html new file mode 100644 index 0000000000..e8ad0dc935 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-fixed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <img></title> + <meta name=timeout content=long> + <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 + } + iframe { border: 0 } + </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-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("img", '100px')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-percentage.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-percentage.html new file mode 100644 index 0000000000..7bd5d90317 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-percentage.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <img></title> + <meta name=timeout content=long> + <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 + } + iframe { border: 0 } + </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-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("img", '100%')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-auto.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-auto.html new file mode 100644 index 0000000000..7d79d2a428 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-auto.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <object></title> + <meta name=timeout content=long> + <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 + } + iframe { border: 0 } + </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-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("object", null)</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-fixed.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-fixed.html new file mode 100644 index 0000000000..75f7636258 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-fixed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <object></title> + <meta name=timeout content=long> + <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 + } + iframe { border: 0 } + </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-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("object", '100px')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-percentage.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-percentage.html new file mode 100644 index 0000000000..8f82836e1b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-percentage.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <object></title> + <meta name=timeout content=long> + <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 + } + iframe { border: 0 } + </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-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("object", '100%')</script> + </body> +</html> |