font-shorthand-serialization-font-stretch.html (4969B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: font shorthand serialization with font-stretch values</title> 4 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#propdef-font"> 5 <link rel="help" href="https://drafts.csswg.org/cssom-1/#serializing-css-values"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="test" style="font: medium serif"></div> 9 <script> 10 test(function() { 11 const div = document.getElementById("test"); 12 div.style.fontStretch = "ultra-condensed"; 13 assert_equals(div.style.fontStretch, "ultra-condensed"); 14 assert_equals(div.style.font, "ultra-condensed medium serif"); 15 div.style.fontStretch = "extra-condensed"; 16 assert_equals(div.style.fontStretch, "extra-condensed"); 17 assert_equals(div.style.font, "extra-condensed medium serif"); 18 div.style.fontStretch = "condensed"; 19 assert_equals(div.style.fontStretch, "condensed"); 20 assert_equals(div.style.font, "condensed medium serif"); 21 div.style.fontStretch = "semi-condensed"; 22 assert_equals(div.style.fontStretch, "semi-condensed"); 23 assert_equals(div.style.font, "semi-condensed medium serif"); 24 div.style.fontStretch = "normal"; 25 assert_equals(div.style.fontStretch, "normal"); 26 assert_equals(div.style.font, "medium serif", "The keyword normal should be omitted"); 27 div.style.fontStretch = "semi-expanded"; 28 assert_equals(div.style.fontStretch, "semi-expanded"); 29 assert_equals(div.style.font, "semi-expanded medium serif"); 30 div.style.fontStretch = "expanded"; 31 assert_equals(div.style.fontStretch, "expanded"); 32 assert_equals(div.style.font, "expanded medium serif"); 33 div.style.fontStretch = "extra-expanded"; 34 assert_equals(div.style.fontStretch, "extra-expanded"); 35 assert_equals(div.style.font, "extra-expanded medium serif"); 36 div.style.fontStretch = "ultra-expanded"; 37 assert_equals(div.style.fontStretch, "ultra-expanded"); 38 assert_equals(div.style.font, "ultra-expanded medium serif"); 39 }, "Keywords should appear in serialization of font and fontStretch"); 40 41 test(function() { 42 const div = document.getElementById("test"); 43 div.style.fontStretch = "50%"; 44 assert_equals(div.style.fontStretch, "50%"); 45 assert_equals(div.style.font, "ultra-condensed medium serif"); 46 div.style.fontStretch = "62.5%"; 47 assert_equals(div.style.fontStretch, "62.5%"); 48 assert_equals(div.style.font, "extra-condensed medium serif"); 49 div.style.fontStretch = "75%"; 50 assert_equals(div.style.fontStretch, "75%"); 51 assert_equals(div.style.font, "condensed medium serif"); 52 div.style.fontStretch = "87.5%"; 53 assert_equals(div.style.fontStretch, "87.5%"); 54 assert_equals(div.style.font, "semi-condensed medium serif"); 55 div.style.fontStretch = "100%"; 56 assert_equals(div.style.fontStretch, "100%"); 57 assert_equals(div.style.font, "medium serif", "The keyword normal should be omitted"); 58 div.style.fontStretch = "112.5%"; 59 assert_equals(div.style.fontStretch, "112.5%"); 60 assert_equals(div.style.font, "semi-expanded medium serif"); 61 div.style.fontStretch = "125%"; 62 assert_equals(div.style.fontStretch, "125%"); 63 assert_equals(div.style.font, "expanded medium serif"); 64 div.style.fontStretch = "150%"; 65 assert_equals(div.style.fontStretch, "150%"); 66 assert_equals(div.style.font, "extra-expanded medium serif"); 67 div.style.fontStretch = "200%"; 68 assert_equals(div.style.fontStretch, "200%"); 69 assert_equals(div.style.font, "ultra-expanded medium serif"); 70 div.style.fontStretch = "50.00000%"; 71 assert_equals(div.style.fontStretch, "50%"); 72 assert_equals(div.style.font, "ultra-condensed medium serif"); 73 }, "Percentages which can be transformed into keywords should be for serialization of font, but not of fontStretch"); 74 75 test(function() { 76 const div = document.getElementById("test"); 77 div.style.fontStretch = "25%"; 78 assert_equals(div.style.fontStretch, "25%"); 79 assert_equals(div.style.font, ""); 80 div.style.fontStretch = "101%"; 81 assert_equals(div.style.fontStretch, "101%"); 82 assert_equals(div.style.font, ""); 83 div.style.fontStretch = "50.01%"; 84 assert_equals(div.style.fontStretch, "50.01%"); 85 assert_equals(div.style.font, ""); 86 }, "Percentages which cannot be transformed into keywords should prevent the font shorthand from serializing, but not fontStretch"); 87 88 test(function() { 89 const div = document.getElementById("test"); 90 91 // This isn't well-specified, but appears to be consistent across browsers. 92 div.style.fontStretch = "calc(50%)"; 93 assert_equals(div.style.fontStretch, "calc(50%)"); 94 assert_equals(div.style.font, "ultra-condensed medium serif"); 95 96 div.style.fontStretch = "calc(50% + 25% * sign(100em - 1px))"; 97 assert_equals(div.style.fontStretch, "calc(50% + (25% * sign(100em - 1px)))"); 98 assert_equals(div.style.font, ""); 99 }, "calc() transformation into keywords"); 100 101 </script>