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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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);
}
|
