Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-viewport/zoom/length-implicit-and-explicit-inheritance.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<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>