-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement parsing for animation-trigger-{exit-}range shorthands
The spec is currently a work-in-progress[1] but this comment[2] describes the API. [1] w3c/csswg-drafts#10128 [2] w3c/csswg-drafts#8942 (comment) Bug: 390314945 Change-Id: I2c335d6be7b6e264fb1cbf4ae4cc3fa9aedc9136 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6187119 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1409968}
- Loading branch information
1 parent
bb5f835
commit eb78c18
Showing
2 changed files
with
360 additions
and
0 deletions.
There are no files selected for viewing
180 changes: 180 additions & 0 deletions
180
css/css-animations/parsing/animation-trigger-exit-range-shorthand.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,180 @@ | ||
| <!DOCTYPE html> | ||
| <title>animation-trigger-exit-range shorthand</title> | ||
| <!-- TODO(crbug.com/390314945): Replace with spec link when the spec lands. --> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8942"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/shorthand-testcommon.js"></script> | ||
| <script src="/css/support/parsing-testcommon.js"></script> | ||
| <script src="/css/support/computed-testcommon.js"></script> | ||
| <div id="target" style="font-size:10px"></div> | ||
| <script> | ||
| test_valid_value("animation-trigger-exit-range", "normal"); | ||
| test_valid_value("animation-trigger-exit-range", "normal normal", "normal"); | ||
| test_valid_value("animation-trigger-exit-range", "cover"); | ||
| test_valid_value("animation-trigger-exit-range", "contain"); | ||
| test_valid_value("animation-trigger-exit-range", "entry"); | ||
| test_valid_value("animation-trigger-exit-range", "entry-crossing"); | ||
| test_valid_value("animation-trigger-exit-range", "exit"); | ||
| test_valid_value("animation-trigger-exit-range", "exit-crossing"); | ||
| test_valid_value("animation-trigger-exit-range", "entry, exit"); | ||
|
|
||
| test_valid_value("animation-trigger-exit-range", "entry 0% entry 100%", "entry"); | ||
| test_valid_value("animation-trigger-exit-range", "entry-crossing 0% entry-crossing 100%", | ||
| "entry-crossing"); | ||
| test_valid_value("animation-trigger-exit-range", "exit 0% exit 100%", "exit"); | ||
| test_valid_value("animation-trigger-exit-range", "exit-crossing 0% exit-crossing 100%", | ||
| "exit-crossing"); | ||
| test_valid_value("animation-trigger-exit-range", "cover 0% cover 100%", "cover"); | ||
| test_valid_value("animation-trigger-exit-range", "contain 0% contain 100%", "contain"); | ||
| test_valid_value("animation-trigger-exit-range", | ||
| "entry calc(10% - 10%) entry calc(50% + 50%)", "entry"); | ||
| test_valid_value("animation-trigger-exit-range", "cover 50%"); | ||
| test_valid_value("animation-trigger-exit-range", "contain 50%"); | ||
| test_valid_value("animation-trigger-exit-range", "entry 50%"); | ||
| test_valid_value("animation-trigger-exit-range", "entry-crossing 50%"); | ||
| test_valid_value("animation-trigger-exit-range", "exit 50%"); | ||
| test_valid_value("animation-trigger-exit-range", "exit-crossing 50%"); | ||
| test_valid_value("animation-trigger-exit-range", "entry 50px exit 100px"); | ||
| test_valid_value("animation-trigger-exit-range", "exit calc(10% + 50px)"); | ||
|
|
||
| test_valid_value("animation-trigger-exit-range", "entry 50% exit 50%"); | ||
| test_valid_value("animation-trigger-exit-range", | ||
| "cover 50% entry 50%, contain 50% exit 50%"); | ||
| test_valid_value("animation-trigger-exit-range", "50% exit 50%"); | ||
| test_valid_value("animation-trigger-exit-range", "normal 100px"); | ||
| test_valid_value("animation-trigger-exit-range", "100px"); | ||
| test_valid_value("animation-trigger-exit-range", "100px normal", "100px"); | ||
| test_valid_value("animation-trigger-exit-range", "10% normal", "10%"); | ||
|
|
||
| test_computed_value("animation-trigger-exit-range", "normal"); | ||
| test_computed_value("animation-trigger-exit-range", "normal normal", "normal"); | ||
| test_computed_value("animation-trigger-exit-range", "cover"); | ||
| test_computed_value("animation-trigger-exit-range", "contain"); | ||
| test_computed_value("animation-trigger-exit-range", "entry"); | ||
| test_computed_value("animation-trigger-exit-range", "entry-crossing"); | ||
| test_computed_value("animation-trigger-exit-range", "exit"); | ||
| test_computed_value("animation-trigger-exit-range", "exit-crossing"); | ||
| test_computed_value("animation-trigger-exit-range", "entry, exit"); | ||
|
|
||
| test_computed_value("animation-trigger-exit-range", "entry 0% entry 100%", "entry"); | ||
| test_computed_value("animation-trigger-exit-range", "entry-crossing 0% entry-crossing 100%", | ||
| "entry-crossing"); | ||
| test_computed_value("animation-trigger-exit-range", "exit 0% exit 100%", "exit"); | ||
| test_computed_value("animation-trigger-exit-range", "exit-crossing 0% exit-crossing 100%", | ||
| "exit-crossing"); | ||
| test_computed_value("animation-trigger-exit-range", "cover 0% cover 100%", "cover"); | ||
| test_computed_value("animation-trigger-exit-range", "contain 0% contain 100%", "contain"); | ||
| test_computed_value("animation-trigger-exit-range", | ||
| "entry calc(10% - 10%) entry calc(50% + 50%)", "entry"); | ||
| test_computed_value("animation-trigger-exit-range", "cover 50%"); | ||
| test_computed_value("animation-trigger-exit-range", "contain 50%"); | ||
| test_computed_value("animation-trigger-exit-range", "entry 50%"); | ||
| test_computed_value("animation-trigger-exit-range", "entry-crossing 50%"); | ||
| test_computed_value("animation-trigger-exit-range", "exit 50%"); | ||
| test_computed_value("animation-trigger-exit-range", "exit-crossing 50%"); | ||
| test_computed_value("animation-trigger-exit-range", "entry 50px exit 100px"); | ||
| test_computed_value("animation-trigger-exit-range", "exit calc(10% + 50px)"); | ||
|
|
||
| test_computed_value("animation-trigger-exit-range", "entry 50% exit 50%"); | ||
| test_computed_value("animation-trigger-exit-range", | ||
| "cover 50% entry 50%, contain 50% exit 50%"); | ||
|
|
||
| test_computed_value("animation-trigger-exit-range", "entry 10em exit 20em", "entry 100px exit 200px"); | ||
| test_computed_value("animation-trigger-exit-range", "10em exit 20em", "100px exit 200px"); | ||
| test_computed_value("animation-trigger-exit-range", "normal 100px"); | ||
| test_computed_value("animation-trigger-exit-range", "100px"); | ||
| test_computed_value("animation-trigger-exit-range", "100px normal", "100px"); | ||
| test_computed_value("animation-trigger-exit-range", "10% normal", "10%"); | ||
| test_computed_value("animation-trigger-exit-range", "10% calc(70% + 10% * sign(100em - 1px))", "10% 80%"); | ||
|
|
||
| test_invalid_value("animation-trigger-exit-range", "entry 50% 0s", "entry 50%"); | ||
| test_invalid_value("animation-trigger-exit-range", "0s entry 50%"); | ||
| test_invalid_value("animation-trigger-exit-range", "1s"); | ||
| test_invalid_value("animation-trigger-exit-range", "-1s"); | ||
| test_invalid_value("animation-trigger-exit-range", "1s 2s"); | ||
| test_invalid_value("animation-trigger-exit-range", "1s, 2s"); | ||
| test_invalid_value("animation-trigger-exit-range", "1s 2s, 3s"); | ||
| test_invalid_value("animation-trigger-exit-range", "1s, 2s 3s"); | ||
| test_invalid_value("animation-trigger-exit-range", "1s, 2s, 3s"); | ||
| test_invalid_value("animation-trigger-exit-range", "1s 2s 3s"); | ||
| test_invalid_value("animation-trigger-exit-range", "0s, 1s 2s 3s"); | ||
| test_invalid_value("animation-trigger-exit-range", "1s / 2s"); | ||
| test_invalid_value("animation-trigger-exit-range", "1s, 2px"); | ||
| test_invalid_value("animation-trigger-exit-range", "#ff0000"); | ||
| test_invalid_value("animation-trigger-exit-range", "red"); | ||
| test_invalid_value("animation-trigger-exit-range", "thing"); | ||
| test_invalid_value("animation-trigger-exit-range", "thing 0%"); | ||
| test_invalid_value("animation-trigger-exit-range", "thing 42%"); | ||
| test_invalid_value("animation-trigger-exit-range", "thing 100%"); | ||
| test_invalid_value("animation-trigger-exit-range", "thing 100px"); | ||
| test_invalid_value("animation-trigger-exit-range", "100% thing"); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'normal', { | ||
| 'animation-trigger-exit-range-start': 'normal', | ||
| 'animation-trigger-exit-range-end': 'normal', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'normal normal', { | ||
| 'animation-trigger-exit-range-start': 'normal', | ||
| 'animation-trigger-exit-range-end': 'normal', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'normal entry 100%', { | ||
| 'animation-trigger-exit-range-start': 'normal', | ||
| 'animation-trigger-exit-range-end': 'entry', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'normal entry 10%', { | ||
| 'animation-trigger-exit-range-start': 'normal', | ||
| 'animation-trigger-exit-range-end': 'entry 10%', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'cover', { | ||
| 'animation-trigger-exit-range-start': 'cover', | ||
| 'animation-trigger-exit-range-end': 'cover', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'contain', { | ||
| 'animation-trigger-exit-range-start': 'contain', | ||
| 'animation-trigger-exit-range-end': 'contain', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'contain 100% contain 0%', { | ||
| 'animation-trigger-exit-range-start': 'contain 100%', | ||
| 'animation-trigger-exit-range-end': 'contain 0%', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'entry 10% exit 20%', { | ||
| 'animation-trigger-exit-range-start': 'entry 10%', | ||
| 'animation-trigger-exit-range-end': 'exit 20%', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'entry calc(10% + 10px) exit 20px', { | ||
| 'animation-trigger-exit-range-start': 'entry calc(10% + 10px)', | ||
| 'animation-trigger-exit-range-end': 'exit 20px', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'entry, exit', { | ||
| 'animation-trigger-exit-range-start': 'entry, exit', | ||
| 'animation-trigger-exit-range-end': 'entry, exit', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'entry 0%, exit', { | ||
| 'animation-trigger-exit-range-start': 'entry, exit', | ||
| 'animation-trigger-exit-range-end': 'entry, exit', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-exit-range', 'exit calc(10% + 50px)', { | ||
| 'animation-trigger-exit-range-start': 'exit calc(10% + 50px)', | ||
| 'animation-trigger-exit-range-end': 'exit', | ||
| }); | ||
| test_shorthand_value('animation-trigger-exit-range', '100px', { | ||
| 'animation-trigger-exit-range-start': '100px', | ||
| 'animation-trigger-exit-range-end': 'normal', | ||
| }); | ||
| test_shorthand_value('animation-trigger-exit-range', '10%', { | ||
| 'animation-trigger-exit-range-start': '10%', | ||
| 'animation-trigger-exit-range-end': 'normal', | ||
| }); | ||
| </script> |
180 changes: 180 additions & 0 deletions
180
css/css-animations/parsing/animation-trigger-range-shorthand.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,180 @@ | ||
| <!DOCTYPE html> | ||
| <title>animation-trigger-range shorthand</title> | ||
| <!-- TODO(crbug.com/390314945): Replace with spec link when the spec lands. --> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8942"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/shorthand-testcommon.js"></script> | ||
| <script src="/css/support/parsing-testcommon.js"></script> | ||
| <script src="/css/support/computed-testcommon.js"></script> | ||
| <div id="target" style="font-size:10px"></div> | ||
| <script> | ||
| test_valid_value("animation-trigger-range", "normal"); | ||
| test_valid_value("animation-trigger-range", "normal normal", "normal"); | ||
| test_valid_value("animation-trigger-range", "cover"); | ||
| test_valid_value("animation-trigger-range", "contain"); | ||
| test_valid_value("animation-trigger-range", "entry"); | ||
| test_valid_value("animation-trigger-range", "entry-crossing"); | ||
| test_valid_value("animation-trigger-range", "exit"); | ||
| test_valid_value("animation-trigger-range", "exit-crossing"); | ||
| test_valid_value("animation-trigger-range", "entry, exit"); | ||
|
|
||
| test_valid_value("animation-trigger-range", "entry 0% entry 100%", "entry"); | ||
| test_valid_value("animation-trigger-range", "entry-crossing 0% entry-crossing 100%", | ||
| "entry-crossing"); | ||
| test_valid_value("animation-trigger-range", "exit 0% exit 100%", "exit"); | ||
| test_valid_value("animation-trigger-range", "exit-crossing 0% exit-crossing 100%", | ||
| "exit-crossing"); | ||
| test_valid_value("animation-trigger-range", "cover 0% cover 100%", "cover"); | ||
| test_valid_value("animation-trigger-range", "contain 0% contain 100%", "contain"); | ||
| test_valid_value("animation-trigger-range", | ||
| "entry calc(10% - 10%) entry calc(50% + 50%)", "entry"); | ||
| test_valid_value("animation-trigger-range", "cover 50%"); | ||
| test_valid_value("animation-trigger-range", "contain 50%"); | ||
| test_valid_value("animation-trigger-range", "entry 50%"); | ||
| test_valid_value("animation-trigger-range", "entry-crossing 50%"); | ||
| test_valid_value("animation-trigger-range", "exit 50%"); | ||
| test_valid_value("animation-trigger-range", "exit-crossing 50%"); | ||
| test_valid_value("animation-trigger-range", "entry 50px exit 100px"); | ||
| test_valid_value("animation-trigger-range", "exit calc(10% + 50px)"); | ||
|
|
||
| test_valid_value("animation-trigger-range", "entry 50% exit 50%"); | ||
| test_valid_value("animation-trigger-range", | ||
| "cover 50% entry 50%, contain 50% exit 50%"); | ||
| test_valid_value("animation-trigger-range", "50% exit 50%"); | ||
| test_valid_value("animation-trigger-range", "normal 100px"); | ||
| test_valid_value("animation-trigger-range", "100px"); | ||
| test_valid_value("animation-trigger-range", "100px normal", "100px"); | ||
| test_valid_value("animation-trigger-range", "10% normal", "10%"); | ||
|
|
||
| test_computed_value("animation-trigger-range", "normal"); | ||
| test_computed_value("animation-trigger-range", "normal normal", "normal"); | ||
| test_computed_value("animation-trigger-range", "cover"); | ||
| test_computed_value("animation-trigger-range", "contain"); | ||
| test_computed_value("animation-trigger-range", "entry"); | ||
| test_computed_value("animation-trigger-range", "entry-crossing"); | ||
| test_computed_value("animation-trigger-range", "exit"); | ||
| test_computed_value("animation-trigger-range", "exit-crossing"); | ||
| test_computed_value("animation-trigger-range", "entry, exit"); | ||
|
|
||
| test_computed_value("animation-trigger-range", "entry 0% entry 100%", "entry"); | ||
| test_computed_value("animation-trigger-range", "entry-crossing 0% entry-crossing 100%", | ||
| "entry-crossing"); | ||
| test_computed_value("animation-trigger-range", "exit 0% exit 100%", "exit"); | ||
| test_computed_value("animation-trigger-range", "exit-crossing 0% exit-crossing 100%", | ||
| "exit-crossing"); | ||
| test_computed_value("animation-trigger-range", "cover 0% cover 100%", "cover"); | ||
| test_computed_value("animation-trigger-range", "contain 0% contain 100%", "contain"); | ||
| test_computed_value("animation-trigger-range", | ||
| "entry calc(10% - 10%) entry calc(50% + 50%)", "entry"); | ||
| test_computed_value("animation-trigger-range", "cover 50%"); | ||
| test_computed_value("animation-trigger-range", "contain 50%"); | ||
| test_computed_value("animation-trigger-range", "entry 50%"); | ||
| test_computed_value("animation-trigger-range", "entry-crossing 50%"); | ||
| test_computed_value("animation-trigger-range", "exit 50%"); | ||
| test_computed_value("animation-trigger-range", "exit-crossing 50%"); | ||
| test_computed_value("animation-trigger-range", "entry 50px exit 100px"); | ||
| test_computed_value("animation-trigger-range", "exit calc(10% + 50px)"); | ||
|
|
||
| test_computed_value("animation-trigger-range", "entry 50% exit 50%"); | ||
| test_computed_value("animation-trigger-range", | ||
| "cover 50% entry 50%, contain 50% exit 50%"); | ||
|
|
||
| test_computed_value("animation-trigger-range", "entry 10em exit 20em", "entry 100px exit 200px"); | ||
| test_computed_value("animation-trigger-range", "10em exit 20em", "100px exit 200px"); | ||
| test_computed_value("animation-trigger-range", "normal 100px"); | ||
| test_computed_value("animation-trigger-range", "100px"); | ||
| test_computed_value("animation-trigger-range", "100px normal", "100px"); | ||
| test_computed_value("animation-trigger-range", "10% normal", "10%"); | ||
| test_computed_value("animation-trigger-range", "10% calc(70% + 10% * sign(100em - 1px))", "10% 80%"); | ||
|
|
||
| test_invalid_value("animation-trigger-range", "entry 50% 0s", "entry 50%"); | ||
| test_invalid_value("animation-trigger-range", "0s entry 50%"); | ||
| test_invalid_value("animation-trigger-range", "1s"); | ||
| test_invalid_value("animation-trigger-range", "-1s"); | ||
| test_invalid_value("animation-trigger-range", "1s 2s"); | ||
| test_invalid_value("animation-trigger-range", "1s, 2s"); | ||
| test_invalid_value("animation-trigger-range", "1s 2s, 3s"); | ||
| test_invalid_value("animation-trigger-range", "1s, 2s 3s"); | ||
| test_invalid_value("animation-trigger-range", "1s, 2s, 3s"); | ||
| test_invalid_value("animation-trigger-range", "1s 2s 3s"); | ||
| test_invalid_value("animation-trigger-range", "0s, 1s 2s 3s"); | ||
| test_invalid_value("animation-trigger-range", "1s / 2s"); | ||
| test_invalid_value("animation-trigger-range", "1s, 2px"); | ||
| test_invalid_value("animation-trigger-range", "#ff0000"); | ||
| test_invalid_value("animation-trigger-range", "red"); | ||
| test_invalid_value("animation-trigger-range", "thing"); | ||
| test_invalid_value("animation-trigger-range", "thing 0%"); | ||
| test_invalid_value("animation-trigger-range", "thing 42%"); | ||
| test_invalid_value("animation-trigger-range", "thing 100%"); | ||
| test_invalid_value("animation-trigger-range", "thing 100px"); | ||
| test_invalid_value("animation-trigger-range", "100% thing"); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'normal', { | ||
| 'animation-trigger-range-start': 'normal', | ||
| 'animation-trigger-range-end': 'normal', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'normal normal', { | ||
| 'animation-trigger-range-start': 'normal', | ||
| 'animation-trigger-range-end': 'normal', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'normal entry 100%', { | ||
| 'animation-trigger-range-start': 'normal', | ||
| 'animation-trigger-range-end': 'entry', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'normal entry 10%', { | ||
| 'animation-trigger-range-start': 'normal', | ||
| 'animation-trigger-range-end': 'entry 10%', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'cover', { | ||
| 'animation-trigger-range-start': 'cover', | ||
| 'animation-trigger-range-end': 'cover', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'contain', { | ||
| 'animation-trigger-range-start': 'contain', | ||
| 'animation-trigger-range-end': 'contain', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'contain 100% contain 0%', { | ||
| 'animation-trigger-range-start': 'contain 100%', | ||
| 'animation-trigger-range-end': 'contain 0%', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'entry 10% exit 20%', { | ||
| 'animation-trigger-range-start': 'entry 10%', | ||
| 'animation-trigger-range-end': 'exit 20%', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'entry calc(10% + 10px) exit 20px', { | ||
| 'animation-trigger-range-start': 'entry calc(10% + 10px)', | ||
| 'animation-trigger-range-end': 'exit 20px', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'entry, exit', { | ||
| 'animation-trigger-range-start': 'entry, exit', | ||
| 'animation-trigger-range-end': 'entry, exit', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'entry 0%, exit', { | ||
| 'animation-trigger-range-start': 'entry, exit', | ||
| 'animation-trigger-range-end': 'entry, exit', | ||
| }); | ||
|
|
||
| test_shorthand_value('animation-trigger-range', 'exit calc(10% + 50px)', { | ||
| 'animation-trigger-range-start': 'exit calc(10% + 50px)', | ||
| 'animation-trigger-range-end': 'exit', | ||
| }); | ||
| test_shorthand_value('animation-trigger-range', '100px', { | ||
| 'animation-trigger-range-start': '100px', | ||
| 'animation-trigger-range-end': 'normal', | ||
| }); | ||
| test_shorthand_value('animation-trigger-range', '10%', { | ||
| 'animation-trigger-range-start': '10%', | ||
| 'animation-trigger-range-end': 'normal', | ||
| }); | ||
| </script> |