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
74
75
76
77
78
79
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fonts Module Level 5: getComputedStyle().fontSizeAdjust</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop">
<meta name="assert" content="font-size-adjust computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
/* Use a font with known metrics so we can verify that from-font
computes to the expected value from the font. */
@font-face {
font-family: ahem-ex-500;
src: url(ahem-ex-500.otf);
}
#target {
font-family: ahem-ex-500 !important;
font-size: 1000px;
}
#container {
container-type: inline-size;
width: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
function compareFontSizeAdjustFromFont(actual, expected) {
// Depending on font configurations, the retrieved aspect_value may slightly
// differ, causing a few pixels' variation from the expected result.
const actual_computed_style = actual.split(" ");
const expected_computed_style = expected.split(" ");
assert_true(actual_computed_style.length === 2 && expected_computed_style.length === 2);
const actual_font_metric = actual_computed_style[0];
const expected_font_metric = expected_computed_style[0];
assert_equals(actual_font_metric, expected_font_metric);
const actual_aspect_value = parseFloat(actual_computed_style[1]);
const expected_aspect_value = parseFloat(expected_computed_style[1]);
assert_approx_equals(actual_aspect_value, expected_aspect_value, 0.00001);
}
promise_test(async (t) => {
await document.fonts.load("1000px ahem-ex-500");
test_computed_value('font-size-adjust', 'none');
test_computed_value('font-size-adjust', '0.5');
test_computed_value('font-size-adjust', 'ex-height 0.5', '0.5'); // default basis 'ex-height' omitted from serialization
test_computed_value('font-size-adjust', 'cap-height 0.8');
test_computed_value('font-size-adjust', 'ch-width 0.4');
test_computed_value('font-size-adjust', 'ic-width 0.9');
test_computed_value('font-size-adjust', 'ic-height 1.1');
// The ahem-ex-500 font has both ex-height and cap-height set at 0.5em, and ch-width is 1em.
// Ideographic metrics are not available, so fall back to 1em.
test_computed_value('font-size-adjust', 'from-font', '0.5');
test_computed_value('font-size-adjust', 'ex-height from-font', '0.5'); // default basis 'ex-height' omitted from serialization
test_computed_value('font-size-adjust', 'cap-height from-font', 'cap-height 0.5');
test_computed_value('font-size-adjust', 'ch-width from-font', 'ch-width 1', undefined, {comparisonFunction: compareFontSizeAdjustFromFont});
test_computed_value('font-size-adjust', 'ic-width from-font', 'ic-width 1', undefined, {comparisonFunction: compareFontSizeAdjustFromFont});
test_computed_value('font-size-adjust', 'ic-height from-font', 'ic-height 1');
test_computed_value('font-size-adjust', 'calc(0.5)', '0.5');
test_computed_value('font-size-adjust', 'ex-height calc(0.5)', '0.5'); // default basis 'ex' omitted from serialization
test_computed_value('font-size-adjust', 'cap-height calc(0.5)', 'cap-height 0.5');
test_computed_value('font-size-adjust', 'cap-height calc(0.5 + 1)', 'cap-height 1.5');
test_computed_value('font-size-adjust', 'cap-height calc(-0.5)', 'cap-height 0');
test_computed_value('font-size-adjust', 'cap-height calc(10 + (sign(20cqw - 10px) * 5))', 'cap-height 5');
})
</script>
</body>
</html>
|
