Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 33 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-viewport/zoom/computed-initial.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS-viewport test: initial property values returned by getComputedStyle() are unscaled</title>
<meta name="assert" content="This test verifies that zoom does not scale values returned by getComputedStyle() when properties are at their initial values.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.initial {
/* populated by script */
}
</style>
<style>
.all-initial {
all: initial;
}
.zoomed {
zoom: 10;
}
.none, .all-initial, .initial {
/* allows testing border-related properties */
border-style: solid;
border-color: gray;
}
#container {
/* needed for lengths snapped as a border width */
zoom: calc(1 / var(--device-pixel-ratio, 1));
}
</style>
<div id="container">
<div class="none"></div>
<div class="initial"></div>
<div class="all-initial"></div>
<div class="none zoomed"></div>
<div class="initial zoomed"></div>
<div class="all-initial zoomed"></div>
<div class="zoomed">
<div class="none"></div>
<div class="initial"></div>
<div class="all-initial"></div>
</div>
<div class="zoomed">
<div class="none zoomed"></div>
<div class="initial zoomed"></div>
<div class="all-initial zoomed"></div>
</div>
</div>
<script>
container.style.setProperty('--device-pixel-ratio', window.devicePixelRatio);
const excludedProps = [
'zoom',
'--device-pixel-ratio',
// exclude properties whose initial value is 'auto' or a percentage,
// and which return the 'used value' in getComputedStyle().
'width', 'height',
'inline-size', 'block-size',
'top', 'left', 'bottom', 'right',
'inset-inline-start', 'inset-inline-end', 'inset-block-start', 'inset-block-end',
'transform-origin', 'perspective-origin',
'min-width', 'min-height',
'min-inline-size', 'min-block-size'
];
function isExcludedProp(prop, value) {
if (excludedProps.includes(prop)) return true;
// skip non-length props
if (!value.includes('px')) return true;
return false;
}
function populateInitialClass() {
const cs = getComputedStyle(document.querySelector('.none'));
let style = '.initial {';
for (let i = 0; i < cs.length; i++) {
const prop = cs.item(i);
const value = cs[prop];
if (isExcludedProp(prop, value)) continue;
style += prop + ': initial;';
}
style += '}';
document.querySelector('style').innerHTML = style;
}
populateInitialClass();
const testClasses = ['none', 'initial', 'all-initial'];
const testNameSuffixes = ['', ': initial;', ' (all: initial)'];
for (let t = 0; t < testClasses.length; t++) {
const el = document.querySelector(`.${testClasses[t]}`);
const elZoomed = document.querySelector(`.${testClasses[t]}.zoomed`);
const elParentZoomed = document.querySelector(`.zoomed .${testClasses[t]}`);
const elDoubleZoomed = document.querySelector(`.zoomed .${testClasses[t]}.zoomed`);
const cs = getComputedStyle(el);
const csZoomed = getComputedStyle(elZoomed);
const csParentZoomed = getComputedStyle(elParentZoomed);
const csDoubleZoomed = getComputedStyle(elDoubleZoomed);
for (let i = 0; i < cs.length; i++) {
const prop = cs.item(i);
const value = cs[prop];
const valueZoomed = csZoomed[prop];
const valueParentZoomed = csParentZoomed[prop];
const valueDoubleZoomed = csDoubleZoomed[prop];
if (isExcludedProp(prop, value) && isExcludedProp(prop, valueZoomed)) continue;
test(() => {
assert_equals(valueZoomed, value);
assert_equals(valueParentZoomed, value);
assert_equals(valueDoubleZoomed, value);
}, prop + testNameSuffixes[t]);
}
}
</script>