Skip to content

Commit d5b1e8b

Browse files
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 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4493792 Reviewed-by: Oriol Brufau Auto-Submit: Kent Tamura Commit-Queue: Kent Tamura Cr-Commit-Position: refs/heads/main@{#1141725}
1 parent e8ff57a commit d5b1e8b

File tree

3 files changed

+122
-10
lines changed

3 files changed

+122
-10
lines changed

css/css-display/parsing/display-computed.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,97 @@
4545

4646
test_computed_value("display", "contents");
4747

48+
test_computed_value("display", "run-in");
49+
test_computed_value("display", "flow", "block");
50+
test_computed_value("display", "flow-root");
51+
test_computed_value("display", "ruby");
52+
53+
test_computed_value("display", "flow list-item", "list-item");
54+
test_computed_value("display", "list-item flow", "list-item");
55+
test_computed_value("display", "flow-root list-item", "flow-root list-item");
56+
test_computed_value("display", "list-item flow-root", "flow-root list-item");
57+
58+
test_computed_value("display", "block flow", "block");
59+
test_computed_value("display", "flow block", "block");
60+
test_computed_value("display", "flow-root block", "flow-root");
61+
test_computed_value("display", "block flow-root", "flow-root");
62+
test_computed_value("display", "flex block", "flex");
63+
test_computed_value("display", "block flex", "flex");
64+
test_computed_value("display", "grid block", "grid");
65+
test_computed_value("display", "block grid", "grid");
66+
test_computed_value("display", "table block", "table");
67+
test_computed_value("display", "block table", "table");
68+
test_computed_value("display", "block ruby", "block ruby");
69+
test_computed_value("display", "ruby block", "block ruby");
70+
test_computed_value("display", "block list-item", "list-item");
71+
test_computed_value("display", "list-item block", "list-item");
72+
test_computed_value("display", "flow block list-item", "list-item");
73+
test_computed_value("display", "block flow list-item", "list-item");
74+
test_computed_value("display", "flow list-item block", "list-item");
75+
test_computed_value("display", "block list-item flow", "list-item");
76+
test_computed_value("display", "list-item block flow", "list-item");
77+
test_computed_value("display", "list-item flow block", "list-item");
78+
test_computed_value("display", "flow-root block list-item", "flow-root list-item");
79+
test_computed_value("display", "block flow-root list-item", "flow-root list-item");
80+
test_computed_value("display", "flow-root list-item block", "flow-root list-item");
81+
test_computed_value("display", "block list-item flow-root", "flow-root list-item");
82+
test_computed_value("display", "list-item block flow-root", "flow-root list-item");
83+
test_computed_value("display", "list-item flow-root block", "flow-root list-item");
84+
85+
test_computed_value("display", "inline flow", "inline");
86+
test_computed_value("display", "flow inline", "inline");
87+
test_computed_value("display", "flow-root inline", "inline-block");
88+
test_computed_value("display", "inline flow-root", "inline-block");
89+
test_computed_value("display", "flex inline", "inline-flex");
90+
test_computed_value("display", "inline flex", "inline-flex");
91+
test_computed_value("display", "grid inline", "inline-grid");
92+
test_computed_value("display", "inline grid", "inline-grid");
93+
test_computed_value("display", "table inline", "inline-table");
94+
test_computed_value("display", "inline table", "inline-table");
95+
test_computed_value("display", "inline ruby", "ruby");
96+
test_computed_value("display", "ruby inline", "ruby");
97+
test_computed_value("display", "inline list-item", "inline list-item");
98+
test_computed_value("display", "list-item inline", "inline list-item");
99+
test_computed_value("display", "flow inline list-item", "inline list-item");
100+
test_computed_value("display", "inline flow list-item", "inline list-item");
101+
test_computed_value("display", "flow list-item inline", "inline list-item");
102+
test_computed_value("display", "inline list-item flow", "inline list-item");
103+
test_computed_value("display", "list-item inline flow", "inline list-item");
104+
test_computed_value("display", "list-item flow inline", "inline list-item");
105+
test_computed_value("display", "flow-root inline list-item", "inline flow-root list-item");
106+
test_computed_value("display", "inline flow-root list-item", "inline flow-root list-item");
107+
test_computed_value("display", "flow-root list-item inline", "inline flow-root list-item");
108+
test_computed_value("display", "inline list-item flow-root", "inline flow-root list-item");
109+
test_computed_value("display", "list-item inline flow-root", "inline flow-root list-item");
110+
test_computed_value("display", "list-item flow-root inline", "inline flow-root list-item");
111+
112+
test_computed_value("display", "run-in flow", "run-in");
113+
test_computed_value("display", "flow run-in", "run-in");
114+
test_computed_value("display", "flow-root run-in", "run-in flow-root");
115+
test_computed_value("display", "run-in flow-root", "run-in flow-root");
116+
test_computed_value("display", "flex run-in", "run-in flex");
117+
test_computed_value("display", "run-in flex", "run-in flex");
118+
test_computed_value("display", "grid run-in", "run-in grid");
119+
test_computed_value("display", "run-in grid", "run-in grid");
120+
test_computed_value("display", "table run-in", "run-in table");
121+
test_computed_value("display", "run-in table", "run-in table");
122+
test_computed_value("display", "run-in ruby", "run-in ruby");
123+
test_computed_value("display", "ruby run-in", "run-in ruby");
124+
test_computed_value("display", "run-in list-item", "run-in list-item");
125+
test_computed_value("display", "list-item run-in", "run-in list-item");
126+
test_computed_value("display", "flow run-in list-item", "run-in list-item");
127+
test_computed_value("display", "run-in flow list-item", "run-in list-item");
128+
test_computed_value("display", "flow list-item run-in", "run-in list-item");
129+
test_computed_value("display", "run-in list-item flow", "run-in list-item");
130+
test_computed_value("display", "list-item run-in flow", "run-in list-item");
131+
test_computed_value("display", "list-item flow run-in", "run-in list-item");
132+
test_computed_value("display", "flow-root run-in list-item", "run-in flow-root list-item");
133+
test_computed_value("display", "run-in flow-root list-item", "run-in flow-root list-item");
134+
test_computed_value("display", "flow-root list-item run-in", "run-in flow-root list-item");
135+
test_computed_value("display", "run-in list-item flow-root", "run-in flow-root list-item");
136+
test_computed_value("display", "list-item run-in flow-root", "run-in flow-root list-item");
137+
test_computed_value("display", "list-item flow-root run-in", "run-in flow-root list-item");
138+
48139
// https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
49140
function test_display_affected(property, value) {
50141
const target = document.getElementById('target');

css/css-display/parsing/display-valid.html

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,15 @@
3636
test_valid_value("display", "table-caption");
3737
test_valid_value("display", "none");
3838

39+
// https://drafts.csswg.org/css-flexbox-1/#flex-containers
40+
test_valid_value("display", "flex");
41+
test_valid_value("display", "inline-flex");
42+
43+
test_valid_value("display", "contents");
44+
3945
// https://drafts.csswg.org/css-display/#the-display-properties
4046
test_valid_value("display", "run-in");
41-
test_valid_value("display", "flow", "block");
47+
test_valid_value("display", "flow");
4248
test_valid_value("display", "flow-root");
4349
test_valid_value("display", "ruby");
4450

@@ -76,14 +82,14 @@
7682

7783
test_valid_value("display", "inline flow", "inline");
7884
test_valid_value("display", "flow inline", "inline");
79-
test_valid_value("display", "flow-root inline", "inline-block");
80-
test_valid_value("display", "inline flow-root", "inline-block");
81-
test_valid_value("display", "flex inline", "inline-flex");
82-
test_valid_value("display", "inline flex", "inline-flex");
83-
test_valid_value("display", "grid inline", "inline-grid");
84-
test_valid_value("display", "inline grid", "inline-grid");
85-
test_valid_value("display", "table inline", "inline-table");
86-
test_valid_value("display", "inline table", "inline-table");
85+
test_valid_value("display", "flow-root inline", "inline flow-root");
86+
test_valid_value("display", "inline flow-root");
87+
test_valid_value("display", "flex inline", "inline flex");
88+
test_valid_value("display", "inline flex");
89+
test_valid_value("display", "grid inline", "inline grid");
90+
test_valid_value("display", "inline grid");
91+
test_valid_value("display", "table inline", "inline table");
92+
test_valid_value("display", "inline table");
8793
test_valid_value("display", "inline ruby", "ruby");
8894
test_valid_value("display", "ruby inline", "ruby");
8995
test_valid_value("display", "inline list-item", "inline list-item");

css/css-typed-om/the-stylepropertymap/properties/display.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,23 @@
3737
{ syntax: 'inline-grid' },
3838
]);
3939

40+
// We can not set 'inline math' or 'math inline' via Typed OM.
41+
// On the other hand, we might get a CSSKeywordValue instance for them instead
42+
// of a CSSStyleValue because they can be represented as just 'math' in
43+
// internal representations.
44+
for (let value of ['inline math', 'math inline']) {
45+
test(t => {
46+
let element = createDivWithStyle(t);
47+
element.style.display = value;
48+
const result = element.attributeStyleMap.get('display');
49+
assert_not_equals(result, null);
50+
assert_in_array({}.toString.call(result),
51+
['[object CSSStyleValue]', '[object CSSKeywordValue]']);
52+
}, `'display' does not support setting '${value}'`);
53+
}
54+
4055
runUnsupportedPropertyTests('display', [
41-
'block math', 'math block', 'inline math', 'math inline'
56+
'block math', 'math block'
4257
]);
4358

4459
script>

0 commit comments

Comments
 (0)