diff --git a/scroll-animations/css/scroll-timeline-attachment-computed-tentative.html b/scroll-animations/css/scroll-timeline-attachment-computed-tentative.html new file mode 100644 index 00000000000000..3ec18a0eb9a675 --- /dev/null +++ b/scroll-animations/css/scroll-timeline-attachment-computed-tentative.html @@ -0,0 +1,35 @@ + + + + + +
+
+
+ diff --git a/scroll-animations/css/scroll-timeline-attachment-parsing-tentative.html b/scroll-animations/css/scroll-timeline-attachment-parsing-tentative.html new file mode 100644 index 00000000000000..3235292d20bd84 --- /dev/null +++ b/scroll-animations/css/scroll-timeline-attachment-parsing-tentative.html @@ -0,0 +1,29 @@ + + + + +
+ + diff --git a/scroll-animations/css/scroll-timeline-shorthand.tentative.html b/scroll-animations/css/scroll-timeline-shorthand.tentative.html index 24597b91e2f1d2..dd1e6e12a98d28 100644 --- a/scroll-animations/css/scroll-timeline-shorthand.tentative.html +++ b/scroll-animations/css/scroll-timeline-shorthand.tentative.html @@ -45,29 +45,33 @@ test_computed_value('scroll-timeline', 'a, b, c'); test_computed_value('scroll-timeline', 'a inline, b block, c vertical', 'a inline, b, c vertical'); -test_shorthand_value('scroll-timeline', 'abc vertical', +test_shorthand_value('scroll-timeline', 'abc vertical local', { 'scroll-timeline-name': 'abc', 'scroll-timeline-axis': 'vertical', + 'scroll-timeline-attachment': 'local', }); -test_shorthand_value('scroll-timeline', 'inline horizontal', +test_shorthand_value('scroll-timeline', 'inline horizontal defer', { 'scroll-timeline-name': 'inline', 'scroll-timeline-axis': 'horizontal', + 'scroll-timeline-attachment': 'defer', }); -test_shorthand_value('scroll-timeline', 'abc vertical, def', +test_shorthand_value('scroll-timeline', 'abc vertical ancestor, def', { 'scroll-timeline-name': 'abc, def', 'scroll-timeline-axis': 'vertical, block', + 'scroll-timeline-attachment': 'ancestor, local', }); test_shorthand_value('scroll-timeline', 'abc, def', { 'scroll-timeline-name': 'abc, def', 'scroll-timeline-axis': 'block, block', + 'scroll-timeline-attachment': 'local, local', }); function test_shorthand_contraction(shorthand, longhands, expected) { - let longhands_fmt = Object.entries(longhands).map((e) => `${e[0]}:${e[1]}`).join(';'); + let longhands_fmt = Object.entries(longhands).map((e) => `${e[0]}:${e[1]}:${e[2]}`).join(';'); test((t) => { t.add_cleanup(() => { for (let shorthand of Object.keys(longhands)) @@ -83,16 +87,19 @@ test_shorthand_contraction('scroll-timeline', { 'scroll-timeline-name': 'abc', 'scroll-timeline-axis': 'inline', -}, 'abc inline'); + 'scroll-timeline-attachment': 'defer', +}, 'abc inline defer'); test_shorthand_contraction('scroll-timeline', { 'scroll-timeline-name': 'a, b', 'scroll-timeline-axis': 'inline, block', -}, 'a inline, b'); + 'scroll-timeline-attachment': 'ancestor, local', +}, 'a inline ancestor, b'); test_shorthand_contraction('scroll-timeline', { 'scroll-timeline-name': 'none, none', 'scroll-timeline-axis': 'block, block', + 'scroll-timeline-attachment': 'local, local', }, 'none, none'); // Longhands with different lengths: @@ -100,10 +107,12 @@ test_shorthand_contraction('scroll-timeline', { 'scroll-timeline-name': 'a, b, c', 'scroll-timeline-axis': 'inline, inline', + 'scroll-timeline-attachment': 'local, local', }, ''); test_shorthand_contraction('scroll-timeline', { 'scroll-timeline-name': 'a, b', 'scroll-timeline-axis': 'inline, inline, inline', + 'scroll-timeline-attachment': 'local, local', }, ''); diff --git a/scroll-animations/css/view-timeline-attachment-computed-tentative.html b/scroll-animations/css/view-timeline-attachment-computed-tentative.html new file mode 100644 index 00000000000000..dd244e137bb28d --- /dev/null +++ b/scroll-animations/css/view-timeline-attachment-computed-tentative.html @@ -0,0 +1,35 @@ + + + + + +
+
+
+ diff --git a/scroll-animations/css/view-timeline-attachment-parsing-tentative.html b/scroll-animations/css/view-timeline-attachment-parsing-tentative.html new file mode 100644 index 00000000000000..25e20135f149d6 --- /dev/null +++ b/scroll-animations/css/view-timeline-attachment-parsing-tentative.html @@ -0,0 +1,29 @@ + + + + +
+ + diff --git a/scroll-animations/css/view-timeline-shorthand.tentative.html b/scroll-animations/css/view-timeline-shorthand.tentative.html index f3efa88c923f20..0ab0f21ff6ce80 100644 --- a/scroll-animations/css/view-timeline-shorthand.tentative.html +++ b/scroll-animations/css/view-timeline-shorthand.tentative.html @@ -44,25 +44,29 @@ { 'view-timeline-name': 'abc', 'view-timeline-axis': 'vertical', + 'view-timeline-attachment': 'local', }); -test_shorthand_value('view-timeline', 'abc vertical, def', +test_shorthand_value('view-timeline', 'abc vertical defer, def', { 'view-timeline-name': 'abc, def', 'view-timeline-axis': 'vertical, block', + 'view-timeline-attachment': 'defer, local', }); test_shorthand_value('view-timeline', 'abc, def', { 'view-timeline-name': 'abc, def', 'view-timeline-axis': 'block, block', + 'view-timeline-attachment': 'local, local', }); -test_shorthand_value('view-timeline', 'inline horizontal', +test_shorthand_value('view-timeline', 'inline horizontal ancestor', { 'view-timeline-name': 'inline', 'view-timeline-axis': 'horizontal', + 'view-timeline-attachment': 'ancestor', }); function test_shorthand_contraction(shorthand, longhands, expected) { - let longhands_fmt = Object.entries(longhands).map((e) => `${e[0]}:${e[1]}`).join(';'); + let longhands_fmt = Object.entries(longhands).map((e) => `${e[0]}:${e[1]}:${e[2]}`).join(';'); test((t) => { t.add_cleanup(() => { for (let shorthand of Object.keys(longhands)) @@ -78,16 +82,19 @@ test_shorthand_contraction('view-timeline', { 'view-timeline-name': 'abc', 'view-timeline-axis': 'inline', -}, 'abc inline'); + 'view-timeline-attachment': 'ancestor', +}, 'abc inline ancestor'); test_shorthand_contraction('view-timeline', { 'view-timeline-name': 'a, b', 'view-timeline-axis': 'inline, block', -}, 'a inline, b'); + 'view-timeline-attachment': 'defer, local', +}, 'a inline defer, b'); test_shorthand_contraction('view-timeline', { 'view-timeline-name': 'none, none', 'view-timeline-axis': 'block, block', + 'view-timeline-attachment': 'local, local', }, 'none, none'); // Longhands with different lengths: @@ -95,10 +102,12 @@ test_shorthand_contraction('view-timeline', { 'view-timeline-name': 'a, b, c', 'view-timeline-axis': 'inline, inline', + 'view-timeline-attachment': 'local, local', }, ''); test_shorthand_contraction('view-timeline', { 'view-timeline-name': 'a, b', 'view-timeline-axis': 'inline, inline, inline', + 'view-timeline-attachment': 'local, local', }, '');