Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 3 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-viewport/zoom/computed-outline-width-keywords.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS-viewport test: outline-width keyword values returned by getComputedStyle() are unscaled</title>
<meta name="assert" content="This test verifies that zoom does not scale outline-width keyword values returned by getComputedStyle()">
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<style>
.thin, .medium, .thick {
outline-style: solid;
width: 10px;
height: 10px;
margin: 10px;
}
.thin {
outline-width: thin;
}
.medium {
outline-width: medium;
}
.thick {
outline-width: thick;
}
.zoomed {
zoom: 10;
outline-color: blue;
}
#container {
/* needed for lengths snapped as a border width */
zoom: calc(1 / var(--device-pixel-ratio, 1));
}
</style>
<div id="container">
<div class="thin"></div>
<div class="medium"></div>
<div class="thick"></div>
<div class="thin zoomed"></div>
<div class="medium zoomed"></div>
<div class="thick zoomed"></div>
</div>
<script>
container.style.setProperty('--device-pixel-ratio', window.devicePixelRatio);
const keywords = ['thin', 'medium', 'thick'];
for (const keyword of keywords) {
const cs = getComputedStyle(document.querySelector(`.${keyword}`));
const csZoomed = getComputedStyle(document.querySelector(`.${keyword}.zoomed`));
test(() => {
assert_equals(csZoomed['outline-width'], cs['outline-width']);
}, `outline-width: ${keyword}`);
}
</script>