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
|
<!doctype html>
<meta charset="utf-8">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div style="zoom: 2">
<div style="zoom: 2" id="parent">
<!-- effective zoom of 8, inherited zoom (4) times specified zoom (2) -->
<div style="zoom: 2" id="target"></div>
</div>
</div>
<script>
const kTestCases = [
// Explicitly inherited reset properties.
["width", "100px", "inherit", "100px"],
["height", "100px", "inherit", "100px"],
// Explicitly inherited properties.
["word-spacing", "100px", "inherit", "100px"],
["word-spacing", "100px", "unset", "100px"],
// Implicitly inherited properties.
["word-spacing", "100px", "", "100px"],
];
const parent = document.getElementById("parent");
const target = document.getElementById("target");
for (const [prop, parentValue, childValue, expected] of kTestCases) {
test(function(t) {
parent.style[prop] = parentValue;
target.style[prop] = childValue;
t.add_cleanup(function() {
parent.style[prop] = target.style[prop] = "";
});
assert_equals(getComputedStyle(target).getPropertyValue(prop), expected);
}, `${prop}: ${childValue} from ${parentValue}`);
}
</script>
|
