Serialize font-stretch values correctly in the font shorthand
Per the CSS Fonts 4 spec [1], only keyword values for font-stretch are
valid in the font shorthand. Our current serialization code ignores
this, and outputs percentage values as well in the shorthand, meaning
that the generated rule cannot be reparsed. We now check if the
percentage can be converted to a keyword, and if so, output it as that
keyword. Otherwise, we do not output a serialization for the font
shorthand, as per the CSSOM spec [2].
[1]: https://drafts.csswg.org/css-fonts-4/#font-prop
[2]: https://drafts.csswg.org/cssom/#serializing-css-values
Bug: 850092
Change-Id: I7e3eec64723966b15abfa819213b95cba6cbc3d5
Reviewed-on: https://chromium-review.googlesource.com/1103856
Commit-Queue: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Dominik Röttsches <drott@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568383}
diff --git a/css/css-fonts/font-shorthand-serialization-font-stretch.html b/css/css-fonts/font-shorthand-serialization-font-stretch.html
new file mode 100644
index 0000000..f5fff42
--- /dev/null
+++ b/css/css-fonts/font-shorthand-serialization-font-stretch.html
@@ -0,0 +1,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>
