css-multiple-display: Update serialization

This CL follows resolutions of w3c/csswg-drafts#5575. * ParseDisplayMultipleKeywords() reorders and shortens keywords, but does not change the specified keywords to legacy keywords. It means - "el.style.display = 'block flow'; el.style.display" returns 'block'. - "el.style.display = 'flow-root inline'; el.style.display" returns 'inline flow-root', not 'inline-block'. * Display::ApplyValue() uses ValidateDisplayKeywords() Bug: w3c/csswg-drafts#5575 Bug: mozilla/wg-decisions#622 Bug: 995106 Change-Id: I6c916a8910b32f1d4849c68ac5595f9024bfa0f9
web-platform-tests · May 9, 2023 · a0e7c09 · a0e7c09
1 parent 0d5e55e
commit a0e7c09
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 14 deletions.
diff --git a/css/css-display/parsing/display-computed.html b/css/css-display/parsing/display-computed.html
@@ -39,11 +39,96 @@
 test_computed_value("display", "table-caption");
 test_computed_value("display", "none");
 
-// https://drafts.csswg.org/css-flexbox-1/#flex-containers
-test_computed_value("display", "flex");
-test_computed_value("display", "inline-flex");
+test_computed_value("display", "run-in");
+test_computed_value("display", "flow", "block");
+test_computed_value("display", "flow-root");
+test_computed_value("display", "ruby");
 
-test_computed_value("display", "contents");
+test_computed_value("display", "flow list-item", "list-item");
+test_computed_value("display", "list-item flow", "list-item");
+test_computed_value("display", "flow-root list-item", "flow-root list-item");
+test_computed_value("display", "list-item flow-root", "flow-root list-item");
+
+test_computed_value("display", "block flow", "block");
+test_computed_value("display", "flow block", "block");
+test_computed_value("display", "flow-root block", "flow-root");
+test_computed_value("display", "block flow-root", "flow-root");
+test_computed_value("display", "flex block", "flex");
+test_computed_value("display", "block flex", "flex");
+test_computed_value("display", "grid block", "grid");
+test_computed_value("display", "block grid", "grid");
+test_computed_value("display", "table block", "table");
+test_computed_value("display", "block table", "table");
+test_computed_value("display", "block ruby", "block ruby");
+test_computed_value("display", "ruby block", "block ruby");
+test_computed_value("display", "block list-item", "list-item");
+test_computed_value("display", "list-item block", "list-item");
+test_computed_value("display", "flow block list-item", "list-item");
+test_computed_value("display", "block flow list-item", "list-item");
+test_computed_value("display", "flow list-item block", "list-item");
+test_computed_value("display", "block list-item flow", "list-item");
+test_computed_value("display", "list-item block flow", "list-item");
+test_computed_value("display", "list-item flow block", "list-item");
+test_computed_value("display", "flow-root block list-item", "flow-root list-item");
+test_computed_value("display", "block flow-root list-item", "flow-root list-item");
+test_computed_value("display", "flow-root list-item block", "flow-root list-item");
+test_computed_value("display", "block list-item flow-root", "flow-root list-item");
+test_computed_value("display", "list-item block flow-root", "flow-root list-item");
+test_computed_value("display", "list-item flow-root block", "flow-root list-item");
+
+test_computed_value("display", "inline flow", "inline");
+test_computed_value("display", "flow inline", "inline");
+test_computed_value("display", "flow-root inline", "inline-block");
+test_computed_value("display", "inline flow-root", "inline-block");
+test_computed_value("display", "flex inline", "inline-flex");
+test_computed_value("display", "inline flex", "inline-flex");
+test_computed_value("display", "grid inline", "inline-grid");
+test_computed_value("display", "inline grid", "inline-grid");
+test_computed_value("display", "table inline", "inline-table");
+test_computed_value("display", "inline table", "inline-table");
+test_computed_value("display", "inline ruby", "ruby");
+test_computed_value("display", "ruby inline", "ruby");
+test_computed_value("display", "inline list-item", "inline list-item");
+test_computed_value("display", "list-item inline", "inline list-item");
+test_computed_value("display", "flow inline list-item", "inline list-item");
+test_computed_value("display", "inline flow list-item", "inline list-item");
+test_computed_value("display", "flow list-item inline", "inline list-item");
+test_computed_value("display", "inline list-item flow", "inline list-item");
+test_computed_value("display", "list-item inline flow", "inline list-item");
+test_computed_value("display", "list-item flow inline", "inline list-item");
+test_computed_value("display", "flow-root inline list-item", "inline flow-root list-item");
+test_computed_value("display", "inline flow-root list-item", "inline flow-root list-item");
+test_computed_value("display", "flow-root list-item inline", "inline flow-root list-item");
+test_computed_value("display", "inline list-item flow-root", "inline flow-root list-item");
+test_computed_value("display", "list-item inline flow-root", "inline flow-root list-item");
+test_computed_value("display", "list-item flow-root inline", "inline flow-root list-item");
+
+test_computed_value("display", "run-in flow", "run-in");
+test_computed_value("display", "flow run-in", "run-in");
+test_computed_value("display", "flow-root run-in", "run-in flow-root");
+test_computed_value("display", "run-in flow-root", "run-in flow-root");
+test_computed_value("display", "flex run-in", "run-in flex");
+test_computed_value("display", "run-in flex", "run-in flex");
+test_computed_value("display", "grid run-in", "run-in grid");
+test_computed_value("display", "run-in grid", "run-in grid");
+test_computed_value("display", "table run-in", "run-in table");
+test_computed_value("display", "run-in table", "run-in table");
+test_computed_value("display", "run-in ruby", "run-in ruby");
+test_computed_value("display", "ruby run-in", "run-in ruby");
+test_computed_value("display", "run-in list-item", "run-in list-item");
+test_computed_value("display", "list-item run-in", "run-in list-item");
+test_computed_value("display", "flow run-in list-item", "run-in list-item");
+test_computed_value("display", "run-in flow list-item", "run-in list-item");
+test_computed_value("display", "flow list-item run-in", "run-in list-item");
+test_computed_value("display", "run-in list-item flow", "run-in list-item");
+test_computed_value("display", "list-item run-in flow", "run-in list-item");
+test_computed_value("display", "list-item flow run-in", "run-in list-item");
+test_computed_value("display", "flow-root run-in list-item", "run-in flow-root list-item");
+test_computed_value("display", "run-in flow-root list-item", "run-in flow-root list-item");
+test_computed_value("display", "flow-root list-item run-in", "run-in flow-root list-item");
+test_computed_value("display", "run-in list-item flow-root", "run-in flow-root list-item");
+test_computed_value("display", "list-item run-in flow-root", "run-in flow-root list-item");
+test_computed_value("display", "list-item flow-root run-in", "run-in flow-root list-item");
 
 // https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
 function test_display_affected(property, value) {

diff --git a/css/css-display/parsing/display-valid.html b/css/css-display/parsing/display-valid.html
@@ -38,7 +38,7 @@
 
 // https://drafts.csswg.org/css-display/#the-display-properties
 test_valid_value("display", "run-in");
-test_valid_value("display", "flow", "block");
+test_valid_value("display", "flow");
 test_valid_value("display", "flow-root");
 test_valid_value("display", "ruby");
 
@@ -76,14 +76,14 @@
 
 test_valid_value("display", "inline flow", "inline");
 test_valid_value("display", "flow inline", "inline");
-test_valid_value("display", "flow-root inline", "inline-block");
-test_valid_value("display", "inline flow-root", "inline-block");
-test_valid_value("display", "flex inline", "inline-flex");
-test_valid_value("display", "inline flex", "inline-flex");
-test_valid_value("display", "grid inline", "inline-grid");
-test_valid_value("display", "inline grid", "inline-grid");
-test_valid_value("display", "table inline", "inline-table");
-test_valid_value("display", "inline table", "inline-table");
+test_valid_value("display", "flow-root inline", "inline flow-root");
+test_valid_value("display", "inline flow-root");
+test_valid_value("display", "flex inline", "inline flex");
+test_valid_value("display", "inline flex");
+test_valid_value("display", "grid inline", "inline grid");
+test_valid_value("display", "inline grid");
+test_valid_value("display", "table inline", "inline table");
+test_valid_value("display", "inline table");
 test_valid_value("display", "inline ruby", "ruby");
 test_valid_value("display", "ruby inline", "ruby");
 test_valid_value("display", "inline list-item", "inline list-item");

diff --git a/css/css-typed-om/the-stylepropertymap/properties/display.html b/css/css-typed-om/the-stylepropertymap/properties/display.html
@@ -37,8 +37,23 @@
   { syntax: 'inline-grid' },
 ]);
 
+// We can not set 'inline math' or 'math inline' via Typed OM.
+// On the other hand, we might get a CSSKeywordValue instance for them instead
+// of a CSSStyleValue because they can be represented as just 'math' in
+// internal representations.
+for (let value of ['inline math', 'math inline']) {
+  test(t => {
+    let element = createDivWithStyle(t);
+    element.style.display = value;
+    const result = element.attributeStyleMap.get('display');
+    assert_not_equals(result, null);
+    assert_in_array({}.toString.call(result),
+                    ['[object CSSStyleValue]', '[object CSSKeywordValue]']);
+  }, `'display' does not support setting '${value}'`);
+}
+
 runUnsupportedPropertyTests('display', [
-  'block math', 'math block', 'inline math', 'math inline'
+  'block math', 'math block'
 ]);
 
 </script>