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/ic-unit.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.zoom-1-5 { zoom: 1.5; font-size: 20px; }
.zoom-2 { zoom: 2; font-size: 20px; }
</style>
<div class="zoom-1-5">
<div id="ls-ic-zoom-1-5" style="letter-spacing: 1ic">ic letter-spacing with zoom 1.5</div>
<div id="ls-em-zoom-1-5" style="letter-spacing: 1em">em letter-spacing with zoom 1.5</div>
</div>
<div class="zoom-2">
<div id="ls-ic-zoom-2" style="letter-spacing: 1ic">ic letter-spacing with zoom 2</div>
<div id="ls-em-zoom-2" style="letter-spacing: 1em">em letter-spacing with zoom 2</div>
</div>
<div class="zoom-1-5">
<div id="lh-ic-zoom-1-5" style="line-height: 1ic">ic line-height with zoom 1.5</div>
<div id="lh-em-zoom-1-5" style="line-height: 1em">em line-height with zoom 1.5</div>
</div>
<script>
// Per CSS Values 4, 1ic equals the advance measure of U+6C34, or falls back to 1em.
// CSS zoom must not distort the ic-to-em ratio: both are font-relative and scale identically.
test(() => {
assert_equals(
getComputedStyle(document.getElementById("ls-ic-zoom-1-5")).letterSpacing,
getComputedStyle(document.getElementById("ls-em-zoom-1-5")).letterSpacing,
"1ic should equal 1em for letter-spacing under zoom: 1.5"
);
}, "ic equals em for letter-spacing under CSS zoom 1.5");
test(() => {
assert_equals(
getComputedStyle(document.getElementById("ls-ic-zoom-2")).letterSpacing,
getComputedStyle(document.getElementById("ls-em-zoom-2")).letterSpacing,
"1ic should equal 1em for letter-spacing under zoom: 2"
);
}, "ic equals em for letter-spacing under CSS zoom 2");
test(() => {
assert_equals(
getComputedStyle(document.getElementById("lh-ic-zoom-1-5")).lineHeight,
getComputedStyle(document.getElementById("lh-em-zoom-1-5")).lineHeight,
"1ic should equal 1em for line-height under zoom: 1.5"
);
}, "ic equals em for line-height under CSS zoom 1.5");
</script>