86 lines
4.5 KiB
HTML
86 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Values and Units Test: using lh and rlh units on the root element</title>
|
|
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-4/#font-relative-lengths">
|
|
<style>
|
|
#measure_me { position: absolute; }
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<div id=measure_me> </div>
|
|
|
|
<script>
|
|
function get_root_font_size() {
|
|
return parseFloat(window.getComputedStyle(window.document.documentElement).fontSize);
|
|
}
|
|
function get_root_line_height() {
|
|
/* getComputedStyle returns the computed value (not the used value) for the line-height property,
|
|
and the computed value of line-height:normal is normal,
|
|
so we cannot just query the value fo the proerty directly on the root element.
|
|
However the height of an abspos that only contains a single character from the first available font
|
|
and doesn't have any ancestor that changes the font-size or line-height property
|
|
gives us an indirect way to measure the root line-height in px.
|
|
*/
|
|
return parseFloat(window.getComputedStyle(document.getElementById("measure_me")).height);
|
|
}
|
|
|
|
window.document.documentElement.style="font-size: initial; line-height:initial;";
|
|
initial_f_s = get_root_font_size();
|
|
initial_l_h = get_root_line_height();
|
|
|
|
test(function() {
|
|
window.document.documentElement.style="font-size: 142px; line-height: 1lh;";
|
|
l_h = get_root_line_height();
|
|
assert_approx_equals( l_h, initial_l_h, 1, "the lh unit on the root element's line-height property uses font metrics corresponding to the initial values of the font or line-height properties");
|
|
}, "lh in line-height on root");
|
|
|
|
test(function() {
|
|
window.document.documentElement.style="font-size: 142px; line-height: 1rlh;";
|
|
l_h = get_root_line_height();
|
|
assert_approx_equals( l_h, initial_l_h, 1, "the rlh unit on the root element's line-height property uses font metrics corresponding to the initial values of the font or line-height properties");
|
|
}, "rlh in line-height on root");
|
|
|
|
test(function() {
|
|
window.document.documentElement.style="font-size: 1lh; line-height: 142px;";
|
|
f_s = get_root_font_size();
|
|
assert_approx_equals( f_s, initial_l_h, 1, "the lh unit on the root element's font-size property uses font metrics corresponding to the initial values of the font or line-height properties");
|
|
}, "lh in font-size on root");
|
|
|
|
test(function() {
|
|
window.document.documentElement.style="font-size: 1rlh; line-height: 142px;";
|
|
f_s = get_root_font_size();
|
|
assert_approx_equals( f_s, initial_l_h, 1, "the rlh unit on the root element's font-size property uses font metrics corresponding to the initial values of the font or line-height properties");
|
|
|
|
}, "rlh in font-size on root");
|
|
|
|
|
|
test(function() {
|
|
window.document.documentElement.style="font-size: 142px; line-height: 2lh;";
|
|
l_h = get_root_line_height();
|
|
assert_approx_equals( l_h, initial_l_h * 2, 1, "the lh unit on the root element's line-height property actually works as a unit and doesn't merely cause a fallback that doesn't take the number of units into account");
|
|
}, "2lh in line-height on root");
|
|
|
|
test(function() {
|
|
window.document.documentElement.style="font-size: 142px; line-height: 2rlh;";
|
|
l_h = get_root_line_height();
|
|
assert_approx_equals( l_h, initial_l_h * 2, 1, "the rlh unit on the root element's line-height property actually works as a unit and doesn't merely cause a fallback that doesn't take the number of units into account");
|
|
}, "2rlh in line-height on root");
|
|
|
|
test(function() {
|
|
window.document.documentElement.style="font-size: 2lh; line-height: 142px;";
|
|
f_s = get_root_font_size();
|
|
assert_approx_equals( f_s, initial_l_h * 2, 1, "the lh unit on the root element's font-size property actually works as a unit and doesn't merely cause a fallback that doesn't take the number of units into account");
|
|
}, "2lh in font-size on root");
|
|
|
|
test(function() {
|
|
window.document.documentElement.style="font-size: 2rlh; line-height: 142px;";
|
|
f_s = get_root_font_size();
|
|
assert_approx_equals( f_s, initial_l_h * 2, 1, "the rlh unit on the root element's font-size property actually works as a unit and doesn't merely cause a fallback that doesn't take the number of units into account");
|
|
|
|
}, "2rlh in font-size on root");
|
|
|
|
/*make the test result page readable again*/
|
|
window.document.documentElement.style="font-size: initial; line-height: initial;";
|
|
</script>
|