-
Notifications
You must be signed in to change notification settings - Fork 6.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix
grid and grid-template shorthand serialization
There were two issues affecting html-to-image: we were serializing the `grid` shorthand too aggressively. The way the syntax is defined you cannot have both grid-template-areas and grid-auto-flow for the grid syntax. In these cases we'll now just not serialize grid, falling back to other shorthands (grid-template) or just longhands. We also were not serializing 'auto' grid track size values even when they were explicitly specified. this also can break roundtripping. Note that adding these back causes some new test failures in grid-template-shorthand-value.html and grid-shorthand-value.html. This is tracked by crbug.com/1311457 and will be addressed in a follow up CL. R=ansollan@microsoft.com Bug: 1305997 Change-Id: I6200e0647ded31103245d48d9269d3abfdd19fb2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3558286 Reviewed-by: Ana Sollano Kim <ansollan@microsoft.com> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Daniel Libby <dlibby@microsoft.com> Cr-Commit-Position: refs/heads/main@{#987069}
- Loading branch information
Showing
6 changed files
with
141 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
...party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-shorthand-serialization.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Layout Test: only serialize 'grid' when the value can roundtrip</title> | ||
| <link rel="author" title="Daniel Libby" href="mailto:dlibby@microsoft.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid"> | ||
| <meta name="assert" content="grid shorthand must not serialize when the value cannot roundtrip."> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| let element = document.createElement('div'); | ||
| const autoFlowRows = "auto-flow auto / 100px 100px"; | ||
| element.style.grid = autoFlowRows; | ||
| test(() => { | ||
| assert_equals(element.style.grid, autoFlowRows, autoFlowRows + " must be serialized via `grid` property"); | ||
| assert_equals(element.style.cssText, "grid: " + autoFlowRows + ";", autoFlowRows + " must be serialized via `cssText`"); | ||
| assert_equals(element.style.gridTemplateAreas, "none"); | ||
| }, "Serialization without grid-template-areas"); | ||
|
|
||
| const gridTemplateAreasValue = '"one two" "three four"'; | ||
| element.style.gridTemplateAreas = gridTemplateAreasValue; | ||
| test(() => { | ||
| assert_equals(element.style.grid, "", "grid shorthand must not be serialized when grid-template-areas and grid-auto-flow/rows are both set"); | ||
| assert_equals(element.style.gridTemplateAreas, gridTemplateAreasValue); | ||
| assert_equals(element.style.gridAutoFlow, "row"); | ||
| assert_equals(element.style.gridAutoRows, "auto"); | ||
| }, "Serialization with grid-template-areas"); | ||
| </script> |
52 changes: 52 additions & 0 deletions
52
...party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-shorthand-valid-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| This is a testharness.js-based test. | ||
| PASS e.style['grid'] = "none" should set the property value | ||
| PASS e.style['grid'] = "none / none" should set the property value | ||
| PASS e.style['grid'] = "auto / auto" should set the property value | ||
| PASS e.style['grid'] = "none / [a] 0px" should set the property value | ||
| PASS e.style['grid'] = "none / [] 0px" should set the property value | ||
| PASS e.style['grid'] = "[a] 10px / auto" should set the property value | ||
| PASS e.style['grid'] = "[a] 10px / none" should set the property value | ||
| PASS e.style['grid'] = "[] 10px [] / [] auto []" should set the property value | ||
| PASS e.style['grid'] = "[a] \"a\" 10px" should set the property value | ||
| PASS e.style['grid'] = "[a] \"a\" 10px []" should set the property value | ||
| PASS e.style['grid'] = "\"a\" 10px" should set the property value | ||
| PASS e.style['grid'] = "[] \"a\" 10px" should set the property value | ||
| PASS e.style['grid'] = "[a] \"a\" 10px [a]" should set the property value | ||
| PASS e.style['grid'] = "\"a\"" should set the property value | ||
| PASS e.style['grid'] = "\"a\" auto" should set the property value | ||
| PASS e.style['grid'] = "\"a a a\"" should set the property value | ||
| PASS e.style['grid'] = "\"a\" / 10px" should set the property value | ||
| PASS e.style['grid'] = "\"a\" / 20%" should set the property value | ||
| PASS e.style['grid'] = "\"a\" / 5fr" should set the property value | ||
| FAIL e.style['grid'] = "[a] \"a\"" should set the property value assert_equals: serialization should be canonical expected "[a] \"a\"" but got "[a] \"a\" auto" | ||
| FAIL e.style['grid'] = "[a] \"a\" [a]" should set the property value assert_equals: serialization should be canonical expected "[a] \"a\" [a]" but got "[a] \"a\" auto [a]" | ||
| PASS e.style['grid'] = "[] \"a\"" should set the property value | ||
| FAIL e.style['grid'] = "\"a\" [] [] \"b\"" should set the property value assert_equals: serialization should be canonical expected "\"a\" \"b\"" but got "\"a\" auto \"b\" auto" | ||
| FAIL e.style['grid'] = "\"a\" [] \"b\"" should set the property value assert_equals: serialization should be canonical expected "\"a\" \"b\"" but got "\"a\" auto \"b\" auto" | ||
| FAIL e.style['grid'] = "\"a\" [a] [b] \"b\"" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a b] \"b\"" but got "\"a\" auto [a b] \"b\" auto" | ||
| FAIL e.style['grid'] = "\"a\" [a] \"b\"" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\"" but got "\"a\" auto [a] \"b\" auto" | ||
| PASS e.style['grid'] = "\"a\" / 0" should set the property value | ||
| PASS e.style['grid'] = "\"a\" 10px / 10px" should set the property value | ||
| FAIL e.style['grid'] = "\"a\" [a] \"b\" 10px" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" 10px" but got "\"a\" auto [a] \"b\" 10px" | ||
| FAIL e.style['grid'] = "\"a\" [a] \"b\" 10px [a]" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" 10px [a]" but got "\"a\" auto [a] \"b\" 10px [a]" | ||
| FAIL e.style['grid'] = "\"a\" [a] [a] \"b\" 10px" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a a] \"b\" 10px" but got "\"a\" auto [a a] \"b\" 10px" | ||
| FAIL e.style['grid'] = "\"a\" [a] [] \"b\" 10px" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" 10px" but got "\"a\" auto [a] \"b\" 10px" | ||
| FAIL e.style['grid'] = "\"a\" 10px [a] \"b\" [a]" should set the property value assert_equals: serialization should be canonical expected "\"a\" 10px [a] \"b\" [a]" but got "\"a\" 10px [a] \"b\" auto [a]" | ||
| FAIL e.style['grid'] = "\"a\" [a] \"b\" [a]" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" [a]" but got "\"a\" auto [a] \"b\" auto [a]" | ||
| FAIL e.style['grid'] = "[a] \"a\" [a] \"b\" [a]" should set the property value assert_equals: serialization should be canonical expected "[a] \"a\" [a] \"b\" [a]" but got "[a] \"a\" auto [a] \"b\" auto [a]" | ||
| FAIL e.style['grid'] = "\"a\" \"a\" [a] \"b\" [a]" should set the property value assert_equals: serialization should be canonical expected "\"a\" \"a\" [a] \"b\" [a]" but got "\"a\" auto \"a\" auto [a] \"b\" auto [a]" | ||
| FAIL e.style['grid'] = "\"a\" [a] \"b\" [a] / 0" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" [a] / 0px" but got "\"a\" auto [a] \"b\" auto [a] / 0px" | ||
| FAIL e.style['grid'] = "\"a\" \"a\" [a] [a] \"b\" / auto" should set the property value assert_equals: serialization should be canonical expected "\"a\" \"a\" [a a] \"b\" / auto" but got "\"a\" auto \"a\" auto [a a] \"b\" auto / auto" | ||
| PASS e.style['grid'] = "100px / auto-flow dense 100px" should set the property value | ||
| PASS e.style['grid'] = "auto-flow dense 1fr / 100px" should set the property value | ||
| PASS e.style['grid'] = "100px / dense auto-flow 100px" should set the property value | ||
| PASS e.style['grid'] = "dense auto-flow 1fr / 100px" should set the property value | ||
| PASS e.style['grid'] = "100px / auto-flow 100px" should set the property value | ||
| PASS e.style['grid'] = "auto-flow 1fr / 100px" should set the property value | ||
| PASS e.style['grid'] = "none / auto-flow 100px" should set the property value | ||
| PASS e.style['grid'] = "auto-flow 1fr / none" should set the property value | ||
| PASS e.style['grid'] = "auto / auto-flow 100px" should set the property value | ||
| PASS e.style['grid'] = "auto-flow 1fr / auto" should set the property value | ||
| PASS e.style['grid'] = "1fr / 1fr" should set the property value | ||
| Harness: the test ran to completion. | ||
|
|
42 changes: 42 additions & 0 deletions
42
...nk/web_tests/external/wpt/css/css-grid/parsing/grid-template-shorthand-valid-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| This is a testharness.js-based test. | ||
| PASS e.style['grid-template'] = "none" should set the property value | ||
| PASS e.style['grid-template'] = "none / none" should set the property value | ||
| PASS e.style['grid-template'] = "auto / auto" should set the property value | ||
| PASS e.style['grid-template'] = "none / [a] 0px" should set the property value | ||
| PASS e.style['grid-template'] = "none / [] 0px" should set the property value | ||
| PASS e.style['grid-template'] = "[a] 10px / auto" should set the property value | ||
| PASS e.style['grid-template'] = "[a] 10px / none" should set the property value | ||
| PASS e.style['grid-template'] = "[] 10px [] / [] auto []" should set the property value | ||
| PASS e.style['grid-template'] = "[a] \"a\" 10px" should set the property value | ||
| PASS e.style['grid-template'] = "[a] \"a\" 10px []" should set the property value | ||
| PASS e.style['grid-template'] = "\"a\" 10px" should set the property value | ||
| PASS e.style['grid-template'] = "[] \"a\" 10px" should set the property value | ||
| PASS e.style['grid-template'] = "[a] \"a\" 10px [a]" should set the property value | ||
| PASS e.style['grid-template'] = "\"a\"" should set the property value | ||
| PASS e.style['grid-template'] = "\"a\" auto" should set the property value | ||
| PASS e.style['grid-template'] = "\"a a a\"" should set the property value | ||
| PASS e.style['grid-template'] = "\"a\" / 10px" should set the property value | ||
| PASS e.style['grid-template'] = "\"a\" / 20%" should set the property value | ||
| PASS e.style['grid-template'] = "\"a\" / 5fr" should set the property value | ||
| FAIL e.style['grid-template'] = "[a] \"a\"" should set the property value assert_equals: serialization should be canonical expected "[a] \"a\"" but got "[a] \"a\" auto" | ||
| FAIL e.style['grid-template'] = "[a] \"a\" [a]" should set the property value assert_equals: serialization should be canonical expected "[a] \"a\" [a]" but got "[a] \"a\" auto [a]" | ||
| PASS e.style['grid-template'] = "[] \"a\"" should set the property value | ||
| FAIL e.style['grid-template'] = "\"a\" [] [] \"b\"" should set the property value assert_equals: serialization should be canonical expected "\"a\" \"b\"" but got "\"a\" auto \"b\" auto" | ||
| FAIL e.style['grid-template'] = "\"a\" [] \"b\"" should set the property value assert_equals: serialization should be canonical expected "\"a\" \"b\"" but got "\"a\" auto \"b\" auto" | ||
| FAIL e.style['grid-template'] = "\"a\" [a] [b] \"b\"" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a b] \"b\"" but got "\"a\" auto [a b] \"b\" auto" | ||
| FAIL e.style['grid-template'] = "\"a\" [a] \"b\"" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\"" but got "\"a\" auto [a] \"b\" auto" | ||
| PASS e.style['grid-template'] = "\"a\" / 0" should set the property value | ||
| PASS e.style['grid-template'] = "\"a\" 10px / 10px" should set the property value | ||
| FAIL e.style['grid-template'] = "\"a\" [a] \"b\" 10px" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" 10px" but got "\"a\" auto [a] \"b\" 10px" | ||
| FAIL e.style['grid-template'] = "\"a\" [a] \"b\" 10px [a]" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" 10px [a]" but got "\"a\" auto [a] \"b\" 10px [a]" | ||
| FAIL e.style['grid-template'] = "\"a\" [a] [a] \"b\" 10px" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a a] \"b\" 10px" but got "\"a\" auto [a a] \"b\" 10px" | ||
| FAIL e.style['grid-template'] = "\"a\" [a] [] \"b\" 10px" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" 10px" but got "\"a\" auto [a] \"b\" 10px" | ||
| FAIL e.style['grid-template'] = "\"a\" 10px [a] \"b\" [a]" should set the property value assert_equals: serialization should be canonical expected "\"a\" 10px [a] \"b\" [a]" but got "\"a\" 10px [a] \"b\" auto [a]" | ||
| FAIL e.style['grid-template'] = "\"a\" [a] \"b\" [a]" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" [a]" but got "\"a\" auto [a] \"b\" auto [a]" | ||
| FAIL e.style['grid-template'] = "[a] \"a\" [a] \"b\" [a]" should set the property value assert_equals: serialization should be canonical expected "[a] \"a\" [a] \"b\" [a]" but got "[a] \"a\" auto [a] \"b\" auto [a]" | ||
| FAIL e.style['grid-template'] = "\"a\" \"a\" [a] \"b\" [a]" should set the property value assert_equals: serialization should be canonical expected "\"a\" \"a\" [a] \"b\" [a]" but got "\"a\" auto \"a\" auto [a] \"b\" auto [a]" | ||
| FAIL e.style['grid-template'] = "\"a\" [a] \"b\" [a] / 0" should set the property value assert_equals: serialization should be canonical expected "\"a\" [a] \"b\" [a] / 0px" but got "\"a\" auto [a] \"b\" auto [a] / 0px" | ||
| FAIL e.style['grid-template'] = "\"a\" \"a\" [a] [a] \"b\" / auto" should set the property value assert_equals: serialization should be canonical expected "\"a\" \"a\" [a a] \"b\" / auto" but got "\"a\" auto \"a\" auto [a a] \"b\" auto / auto" | ||
| PASS e.style['grid-template'] = "\"a\" auto [a] \"b\" auto [b] / 10px" should set the property value | ||
| Harness: the test ran to completion. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters