Skip to content

Commit

Permalink
Add view-timeline-inset to view-timeline shorthand
Browse files Browse the repository at this point in the history 
Per recent spec update [1].

[1] w3c/csswg-drafts#9189

Fixed: 1469850
I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/yjfaImiMaXE/m/4LKuoM4SAQAJ
Change-Id: If4011ef0b3dd0bee8737626e41a6c2c5342cb025
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4798148
Reviewed-by: Yoav Weiss <yoavweiss@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1188194}
  • Loading branch information
@andruud @chromium-wpt-export-bot
andruud authored and chromium-wpt-export-bot committed Aug 25, 2023
1 parent 1288159 commit 2ce5ada
Showing 1 changed file with 62 additions and 0 deletions.
62 changes: 62 additions & 0 deletions scroll-animations/css/view-timeline-shorthand.tentative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,27 @@
test_valid_value('view-timeline', '--a, --b, --c');
test_valid_value('view-timeline', '--a inline, --b block, --c y', '--a inline, --b, --c y');
test_valid_value('view-timeline', '--auto');
test_valid_value('view-timeline', '--abcd block auto', '--abcd');
test_valid_value('view-timeline', '--abcd block auto auto', '--abcd');
test_valid_value('view-timeline', '--abcd block 1px 2px', '--abcd 1px 2px');
test_valid_value('view-timeline', '--abcd inline 1px 2px', '--abcd inline 1px 2px');
test_valid_value('view-timeline', '--abcd 1px 2px inline', '--abcd inline 1px 2px');
test_valid_value('view-timeline', '--abcd 1px 2px block', '--abcd 1px 2px');
test_valid_value('view-timeline', '--abcd auto auto block', '--abcd');
test_valid_value('view-timeline', '--abcd auto block', '--abcd');
test_valid_value('view-timeline', '--abcd block 1px 1px', '--abcd 1px');

test_invalid_value('view-timeline', '--abc --abc');
test_invalid_value('view-timeline', 'block none');
test_invalid_value('view-timeline', 'none none');
test_invalid_value('view-timeline', 'default');
test_invalid_value('view-timeline', ',');
test_invalid_value('view-timeline', ',,--block,,');
test_invalid_value('view-timeline', 'auto');
test_invalid_value('view-timeline', 'auto auto');
test_invalid_value('view-timeline', '--abc 500kg');
test_invalid_value('view-timeline', '--abc #ff0000');
test_invalid_value('view-timeline', '--abc red red');

test_computed_value('view-timeline', '--abcd');
test_computed_value('view-timeline', 'none block', 'none');
Expand All @@ -39,26 +53,57 @@
test_computed_value('view-timeline', '--x block', '--x');
test_computed_value('view-timeline', '--a, --b, --c');
test_computed_value('view-timeline', '--a inline, --b block, --c y', '--a inline, --b, --c y');
test_computed_value('view-timeline', '--abcd block auto', '--abcd');
test_computed_value('view-timeline', '--abcd block auto auto', '--abcd');
test_computed_value('view-timeline', '--abcd block 1px 2px', '--abcd 1px 2px');
test_computed_value('view-timeline', '--abcd inline 1px 2px', '--abcd inline 1px 2px');
test_computed_value('view-timeline', '--abcd 1px 2px inline', '--abcd inline 1px 2px');
test_computed_value('view-timeline', '--abcd 1px 2px block', '--abcd 1px 2px');
test_computed_value('view-timeline', '--abcd auto auto block', '--abcd');
test_computed_value('view-timeline', '--abcd auto block', '--abcd');
test_computed_value('view-timeline', '--abcd block 1px 1px', '--abcd 1px');

test_shorthand_value('view-timeline', '--abc y',
{
'view-timeline-name': '--abc',
'view-timeline-axis': 'y',
'view-timeline-inset': 'auto',
});
test_shorthand_value('view-timeline', '--abc y, --def',
{
'view-timeline-name': '--abc, --def',
'view-timeline-axis': 'y, block',
'view-timeline-inset': 'auto, auto',
});
test_shorthand_value('view-timeline', '--abc, --def',
{
'view-timeline-name': '--abc, --def',
'view-timeline-axis': 'block, block',
'view-timeline-inset': 'auto, auto',
});
test_shorthand_value('view-timeline', '--inline x',
{
'view-timeline-name': '--inline',
'view-timeline-axis': 'x',
'view-timeline-inset': 'auto',
});
test_shorthand_value('view-timeline', '--abc 1px 2px',
{
'view-timeline-name': '--abc',
'view-timeline-axis': 'block',
'view-timeline-inset': '1px 2px',
});
test_shorthand_value('view-timeline', '--abc 1px',
{
'view-timeline-name': '--abc',
'view-timeline-axis': 'block',
'view-timeline-inset': '1px',
});
test_shorthand_value('view-timeline', '--abc 1px inline',
{
'view-timeline-name': '--abc',
'view-timeline-axis': 'inline',
'view-timeline-inset': '1px',
});

function test_shorthand_contraction(shorthand, longhands, expected) {
Expand All @@ -78,27 +123,44 @@
test_shorthand_contraction('view-timeline', {
'view-timeline-name': '--abc',
'view-timeline-axis': 'inline',
'view-timeline-inset': 'auto',
}, '--abc inline');

test_shorthand_contraction('view-timeline', {
'view-timeline-name': '--a, --b',
'view-timeline-axis': 'inline, block',
'view-timeline-inset': 'auto, auto',
}, '--a inline, --b');

test_shorthand_contraction('view-timeline', {
'view-timeline-name': '--a, --b',
'view-timeline-axis': 'inline, block',
'view-timeline-inset': '1px 2px, 3px 3px',
}, '--a inline 1px 2px, --b 3px');

test_shorthand_contraction('view-timeline', {
'view-timeline-name': 'none, none',
'view-timeline-axis': 'block, block',
'view-timeline-inset': 'auto auto, auto',
}, 'none, none');

// Longhands with different lengths:

test_shorthand_contraction('view-timeline', {
'view-timeline-name': '--a, --b, --c',
'view-timeline-axis': 'inline, inline',
'view-timeline-inset': 'auto, auto',
}, '');

test_shorthand_contraction('view-timeline', {
'view-timeline-name': '--a, --b',
'view-timeline-axis': 'inline, inline, inline',
'view-timeline-inset': 'auto, auto, auto',
}, '');

test_shorthand_contraction('view-timeline', {
'view-timeline-name': '--a, --b',
'view-timeline-axis': 'inline, inline',
'view-timeline-inset': 'auto, auto, auto',
}, '');
</script>

0 comments on commit 2ce5ada

Please sign in to comment.