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>
<title>CSS Container Queries Test: container-relative units in SVGLength</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
<link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGLength">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
<style>
#container {
container-type: size;
width: 200px;
height: 150px;
}
</style>
<div id=container>
<svg id=rootSVGElement>
<rect id="rect1" width="10cqw" height="10cqh"/>
<rect id="rect2" width="10cqi" height="10cqb"/>
<rect id="rect3" width="10cqmin" height="10cqmax"/>
<rect id="rect4" width="calc(10cqmin + 10cqmax)" height="calc(10cqw + 3px)"/>
<rect id="rect_dynamic"/>
<rect id="rect_animated" width="42px" height="42px" fill="green">
<animate id=animation attributeName=width from="5cqw" to="10cqw" begin="0s" dur="4s"/>
</rect>
</svg>
</div>
<script>
setup(() => {
assert_implements_container_queries();
container.offsetTop;
});
function cleanup() {
rect_dynamic.removeAttribute('width');
rect_dynamic.removeAttribute('height');
}
test(() => {
assert_equals(rect1.width.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
}, 'unitType with container-relative units');
test(() => {
assert_equals(rect1.width.baseVal.value, 20);
assert_equals(rect1.height.baseVal.value, 15);
}, 'cqw,cqh can be resolved');
test(() => {
assert_equals(rect2.width.baseVal.value, 20);
assert_equals(rect2.height.baseVal.value, 15);
}, 'cqi,cqb can be resolved');
test(() => {
assert_equals(rect3.width.baseVal.value, 15);
assert_equals(rect3.height.baseVal.value, 20);
}, 'cqmin,cqmax can be resolved');
test(() => {
assert_equals(rect4.width.baseVal.value, 35);
assert_equals(rect4.height.baseVal.value, 23);
}, 'calc() with container-relative units can be resolved');
test((t) => {
t.add_cleanup(cleanup);
rect_dynamic.setAttribute('width', '20cqw');
rect_dynamic.setAttribute('height', '20cqh');
assert_equals(rect_dynamic.width.baseVal.value, 40);
assert_equals(rect_dynamic.height.baseVal.value, 30);
rect_dynamic.width.baseVal.value = 80;
rect_dynamic.height.baseVal.value = 45;
assert_equals(rect_dynamic.getAttribute('width'), '80');
assert_equals(rect_dynamic.getAttribute('height'), '45');
}, 'Can modify value with container-relative units');
smil_async_test((t) => {
t.add_cleanup(cleanup);
let assert_width = (expected) => {
let epsilon = 1.0;
return () => {
assert_approx_equals(rect_animated.width.animVal.value, expected, epsilon);
};
};
const expectedValues = [
// [animationId, time, sampleCallback]
["animation", 0.0, assert_width(10)],
["animation", 2.0, assert_width(15)],
["animation", 3.999, assert_width(20)],
["animation", 4, assert_width(42)],
];
runAnimationTest(t, expectedValues);
});
</script>
|
