-
Notifications
You must be signed in to change notification settings - Fork 3.1k
/
font-size-computed.html
73 lines (68 loc) · 2.46 KB
/
font-size-computed.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fonts Module Level 4: getComputedStyle().fontSize</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-size-prop">
<meta name="assert" content="font-size computed value is an absolute length.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
#container {
font-size: 40px;
}
</style>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<font id="reference"></font>
<script>
function test_relative_size(first, second) {
test(() => {
const target = document.getElementById('target');
target.style.fontSize = first;
const firstResult = Number(getComputedStyle(target).fontSize.replace('px', ''));
target.style.fontSize = second;
const secondResult = Number(getComputedStyle(target).fontSize.replace('px', ''));
assert_less_than_equal(firstResult, secondResult);
}, first + ' <= ' + second);
}
test_relative_size('xx-small', 'x-small');
test_relative_size('x-small', 'small');
test_relative_size('small', 'medium');
test_relative_size('medium', 'large');
test_relative_size('large', 'x-large');
test_relative_size('x-large', 'xx-large');
// Added in Fonts level 4: https://github.com/w3c/csswg-drafts/issues/3907
test_relative_size('xx-large', 'xxx-large');
// <relative-size>
test_relative_size('inherit', 'larger');
test_relative_size('smaller', 'inherit');
// <length-percentage>
test_computed_value('font-size', '10px');
test_computed_value('font-size', '20%', '8px');
test_computed_value('font-size', 'calc(30% - 40px)', '0px');
test_computed_value('font-size', 'calc(30% + 40px)', '52px');
test_computed_value('font-size', 'calc(10px - 0.5em)', '0px');
test_computed_value('font-size', 'calc(10px + 0.5em)', '30px');
function test_font_size(attribute, keyword) {
test(() => {
const reference = document.getElementById('reference');
reference.setAttribute('size', attribute);
const target = document.getElementById('target');
target.style.fontSize = keyword;
assert_equals(getComputedStyle(target).fontSize, getComputedStyle(reference).fontSize);
}, '<font size="' + attribute + '"> is font-size: ' + keyword);
}
test_font_size('2', 'small');
test_font_size('3', 'medium');
test_font_size('4', 'large');
test_font_size('5', 'x-large');
test_font_size('6', 'xx-large');
test_font_size('7', 'xxx-large');
</script>
</body>
</html>