Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-transitions/transition-base-response-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Test that rem units are responsive to transitioning font-size on root</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
:root {
font-size: 20px;
}
:root.change {
transition: font-size steps(2, start) 10s;
font-size: 30px;
}
#target1 {
width: 1rem;
}
</style>
<div id="target1"></div>
<output id=output></output>
<script>
test(() => {
let unused = getComputedStyle(document.documentElement).getPropertyValue('font-size');
document.documentElement.className = 'change';
assert_equals(getComputedStyle(target1).getPropertyValue('width'), '25px');
}, 'Transitioning font-size on root affects rem units');
</script>