rem-unit-root-element.html (1094B)
1 <!doctype html> 2 <title>CSS Values and Units Test: rem units on the root element</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values/#rem"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 :root { 8 font-size: 50px; 9 margin-left: 2rem; 10 padding-top: 2rem; 11 line-height: 2rem; 12 } 13 </style> 14 <script> 15 let rootStyle = getComputedStyle(document.documentElement); 16 test(() => assert_equals(rootStyle.marginLeft, "100px"), "rem based margin."); 17 test(() => assert_equals(rootStyle.paddingTop, "100px"), "rem based padding."); 18 test(() => assert_equals(rootStyle.lineHeight, "100px"), "rem based line-height."); 19 20 test(() => { 21 document.documentElement.style.fontSize = "initial"; 22 let initialFontSize = parseInt(getComputedStyle(document.documentElement).fontSize); 23 document.documentElement.style.fontSize = "3rem"; 24 assert_equals(getComputedStyle(document.documentElement).fontSize, 3*initialFontSize + "px"); 25 }, "Check that rem font-size is based on the initial font-size."); 26 </script>