diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-values/lh-rlh-on-root-001.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-values/lh-rlh-on-root-001.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-values/lh-rlh-on-root-001.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-values/lh-rlh-on-root-001.html b/testing/web-platform/tests/css/css-values/lh-rlh-on-root-001.html new file mode 100644 index 0000000000..f269816699 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/lh-rlh-on-root-001.html @@ -0,0 +1,86 @@ +<!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> |