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
|
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: font shorthand serialization with font-stretch values</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#propdef-font">
<link rel="help" href="https://drafts.csswg.org/cssom-1/#serializing-css-values">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="test" style="font: medium serif"></div>
<script>
test(function() {
const div = document.getElementById("test");
div.style.fontStretch = "50%";
assert_equals(div.style.font, "ultra-condensed medium serif");
div.style.fontStretch = "62.5%";
assert_equals(div.style.font, "extra-condensed medium serif");
div.style.fontStretch = "75%";
assert_equals(div.style.font, "condensed medium serif");
div.style.fontStretch = "87.5%";
assert_equals(div.style.font, "semi-condensed medium serif");
div.style.fontStretch = "100%";
assert_equals(div.style.font, "medium serif", "The keyword normal should be omitted");
div.style.fontStretch = "112.5%";
assert_equals(div.style.font, "semi-expanded medium serif");
div.style.fontStretch = "125%";
assert_equals(div.style.font, "expanded medium serif");
div.style.fontStretch = "150%";
assert_equals(div.style.font, "extra-expanded medium serif");
div.style.fontStretch = "200%";
assert_equals(div.style.font, "ultra-expanded medium serif");
}, "Percentages which can be transformed into keywords should be for serialization");
test(function() {
const div = document.getElementById("test");
div.style.fontStretch = "25%";
assert_equals(div.style.font, "");
div.style.fontStretch = "101%";
assert_equals(div.style.font, "");
}, "Percentages which cannot be transformed into keywords should prevent the font shorthand from serializing");
</script>
|
