forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Masonry] Introduce parsing for masonry-flow.
This CL introduces the parsing for the CSS property masonry-flow, which is the shorthand for masonry-direction and masonry-fill. This is part of: https://chromestatus.com/feature/5149560434589696 The properties are behind the CSSMasonryLayout feature flag. The spec definition for masonry-flow can be found here: https://tabatkins.github.io/specs/css-masonry/#masonry-flow. Bug: 343257585 Change-Id: Icaba5964a6b377a13958e404f7f464e933efc209 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6106736 Commit-Queue: Celeste Pan <[email protected]> Reviewed-by: Kurt Catti-Schmidt <[email protected]> Reviewed-by: Alison Maher <[email protected]> Cr-Commit-Position: refs/heads/main@{#1403080}
- Loading branch information
1 parent
48f9ec1
commit 22334a6
Showing
3 changed files
with
111 additions
and
0 deletions.
There are no files selected for viewing
28 changes: 28 additions & 0 deletions
28
css/css-masonry/tentative/parsing/masonry-flow-computed.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,28 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>CSS Masonry: masonry-flow getComputedStyle()</title> | ||
| <link rel="author" title="Celeste Pan" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-3"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/computed-testcommon.js"></script> | ||
| <script src="/css/support/inheritance-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="target"></div> | ||
| <script> | ||
| test_computed_value("masonry-flow", "column normal"); | ||
| test_computed_value("masonry-flow", "column reverse"); | ||
|
|
||
| test_computed_value("masonry-flow", "row normal"); | ||
| test_computed_value("masonry-flow", "row reverse"); | ||
|
|
||
| test_computed_value("masonry-flow", "column-reverse normal"); | ||
| test_computed_value("masonry-flow", "column-reverse reverse"); | ||
|
|
||
| test_computed_value("masonry-flow", "row-reverse normal"); | ||
| test_computed_value("masonry-flow", "row-reverse reverse"); | ||
| </script> | ||
| </body> | ||
| </html> |
23 changes: 23 additions & 0 deletions
23
css/css-masonry/tentative/parsing/masonry-flow-invalid.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,23 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Masonry: masonry-flow parsing</title> | ||
| <link rel="author" title="Celeste Pan" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-3"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/parsing-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| test_invalid_value("masonry-flow", "nowrap row nowrap"); | ||
| test_invalid_value("masonry-flow", "column wrap column"); | ||
| test_invalid_value("masonry-flow", "reverse-column column"); | ||
| test_invalid_value("masonry-flow", "reverse-row, row"); | ||
| test_invalid_value("masonry-flow", "normal row-reverse"); | ||
| test_invalid_value("masonry-flow", "reverse column"); | ||
| test_invalid_value("masonry-flow", "auto, auto"); | ||
| </script> | ||
| </body> | ||
| </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,60 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Masonry: parsing masonry-flow with valid values</title> | ||
| <link rel="author" title="Celeste Pan" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-3"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/parsing-testcommon.js"></script> | ||
| <script src="/css/support/shorthand-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| test_valid_value("masonry-flow", "column normal"); | ||
| test_valid_value("masonry-flow", "column reverse"); | ||
| test_shorthand_value('masonry-flow', 'column normal', { | ||
| 'masonry-direction': 'column', | ||
| 'masonry-fill': 'normal' | ||
| }); | ||
| test_shorthand_value('masonry-flow', 'column reverse', { | ||
| 'masonry-direction': 'column', | ||
| 'masonry-fill': 'reverse' | ||
| }); | ||
|
|
||
| test_valid_value("masonry-flow", "row normal"); | ||
| test_valid_value("masonry-flow", "row reverse"); | ||
| test_shorthand_value('masonry-flow', 'row normal', { | ||
| 'masonry-direction': 'row', | ||
| 'masonry-fill': 'normal' | ||
| }); | ||
| test_shorthand_value('masonry-flow', 'row reverse', { | ||
| 'masonry-direction': 'row', | ||
| 'masonry-fill': 'reverse' | ||
| }); | ||
|
|
||
| test_valid_value("masonry-flow", "column-reverse normal"); | ||
| test_valid_value("masonry-flow", "column-reverse reverse"); | ||
| test_shorthand_value('masonry-flow', 'column-reverse normal', { | ||
| 'masonry-direction': 'column-reverse', | ||
| 'masonry-fill': 'normal' | ||
| }); | ||
| test_shorthand_value('masonry-flow', 'column-reverse reverse', { | ||
| 'masonry-direction': 'column-reverse', | ||
| 'masonry-fill': 'reverse' | ||
| }); | ||
|
|
||
| test_valid_value("masonry-flow", "row-reverse normal"); | ||
| test_valid_value("masonry-flow", "row-reverse reverse"); | ||
| test_shorthand_value('masonry-flow', 'row-reverse normal', { | ||
| 'masonry-direction': 'row-reverse', | ||
| 'masonry-fill': 'normal' | ||
| }); | ||
| test_shorthand_value('masonry-flow', 'row-reverse reverse', { | ||
| 'masonry-direction': 'row-reverse', | ||
| 'masonry-fill': 'reverse' | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |