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
|
<!doctype HTML>
<head>
<link rel="help" href="https://www.w3.org/TR/SVG/coords.html#SizingSVGInCSS">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#wrapper {
width: 500px;
}
</style>
</head>
<body>
<div id="wrapper">
<svg id="mySVG"></svg>
</div>
<script>
let svgElem = document.getElementById("mySVG");
function expect_svg_width_and_height(width, height) {
let rect = svgElem.getBoundingClientRect();
assert_equals(rect.width, width, "checking width.");
assert_equals(rect.height, height, "checking height.");
}
test(function() {
expect_svg_width_and_height(300, 150);
}, "no sizing attributes set");
// Just setting width and/or height:
test(function() {
svgElem.setAttribute("width", "100");
expect_svg_width_and_height(100, 150);
}, "specified width");
test(function() {
svgElem.setAttribute("width", "400");
expect_svg_width_and_height(400, 150);
}, "modified specified width");
test(function() {
// (set height, leaving width still set)
svgElem.setAttribute("height", "100");
expect_svg_width_and_height(400, 100);
}, "specified width and height");
test(function() {
svgElem.setAttribute("height", "200");
expect_svg_width_and_height(400, 200);
}, "specified width and modified specified height");
test(function() {
svgElem.removeAttribute("width"); // leaving only 'height':
expect_svg_width_and_height(300, 200);
}, "specified height");
test(function() {
svgElem.setAttribute("height", "250");
expect_svg_width_and_height(300, 250);
}, "modified specified height");
test(function() {
// clean up (go back to having no sizing attrs set)
svgElem.removeAttribute("height");
expect_svg_width_and_height(300, 150);
}, "no specified sizing attrs (after setting & removing them)");
// Just setting viewBox:
test(function() {
svgElem.setAttribute("viewBox", "0 0 10 8");
expect_svg_width_and_height(500, 400);
}, "set a 10x8 viewBox");
test(function() {
// Adjusting already-set viewBox:
svgElem.setAttribute("viewBox", "0 0 50 10");
expect_svg_width_and_height(500, 100);
}, "modified viewBox to 50x20");
test(function() {
svgElem.setAttribute("width", "100");
expect_svg_width_and_height(100, 20);
}, "adding specified width, in presence of specified viewBox");
test(function() {
svgElem.setAttribute("viewBox", "0 0 40 30");
expect_svg_width_and_height(100, 75);
}, "modifiying specified viewBox, in presence of specified width");
test(function() {
svgElem.removeAttribute("width");
expect_svg_width_and_height(500, 375);
}, "removing specified width, in presence of specified viewBox");
test(function() {
svgElem.setAttribute("height", "60");
expect_svg_width_and_height(80, 60);
}, "adding specified height, in presence of specified viewBox");
test(function() {
svgElem.setAttribute("viewBox", "0 0 100 120");
expect_svg_width_and_height(50, 60);
}, "modifiying specified viewBox, in presence of specified height");
</script>
</body>
|
