summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.js
blob: 9b7fca0502c3066a4af832d1d09819d62b1061cf (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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);