Implement scroll-timeline-attachment and view-timeline-attachment

As resolved in w3c/csswg-drafts#7759 the new properties allow to defer the attachment of the timeline to the scroller. It allows for animations to be run by the scroller on elements that are not children of the scroller. Change-Id: I05768523d2ccf7278abd62dcfedc5f41fea19322 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4410751 Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1128678}
web-platform-tests · Apr 11, 2023 · fb28d77 · fb28d77
1 parent d53ed57
commit fb28d77
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 11 deletions.
diff --git a/scroll-animations/css/scroll-timeline-attachment-computed-tentative.html b/scroll-animations/css/scroll-timeline-attachment-computed-tentative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #outer { scroll-timeline-attachment: defer; }
+  #target { scroll-timeline-attachment: ancestor; }
+</style>
+<div id="outer">
+  <div id="target"></div>
+</div>
+<script>
+test_computed_value('scroll-timeline-attachment', 'initial', 'local');
+test_computed_value('scroll-timeline-attachment', 'inherit', 'defer');
+test_computed_value('scroll-timeline-attachment', 'unset', 'local');
+test_computed_value('scroll-timeline-attachment', 'revert', 'local');
+test_computed_value('scroll-timeline-attachment', 'local');
+test_computed_value('scroll-timeline-attachment', 'defer');
+test_computed_value('scroll-timeline-attachment', 'ancestor');
+test_computed_value('scroll-timeline-attachment', 'local, defer');
+test_computed_value('scroll-timeline-attachment', 'defer, ancestor');
+test_computed_value('scroll-timeline-attachment', 'local, defer, ancestor');
+test_computed_value('scroll-timeline-attachment', 'local, local, local, local');
+
+test(() => {
+  let style = getComputedStyle(document.getElementById('target'));
+  assert_not_equals(Array.from(style).indexOf('scroll-timeline-attachment'), -1);
+}, 'The scroll-timeline-attachment property shows up in CSSStyleDeclaration enumeration');
+
+test(() => {
+  let style = document.getElementById('target').style;
+  assert_not_equals(style.cssText.indexOf('scroll-timeline-attachment'), -1);
+}, 'The scroll-timeline-attachment property shows up in CSSStyleDeclaration.cssText');
+
+</script>
diff --git a/scroll-animations/css/scroll-timeline-attachment-parsing-tentative.html b/scroll-animations/css/scroll-timeline-attachment-parsing-tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<div id="target"></div>
+
+<script>
+
+test_valid_value('scroll-timeline-attachment', 'initial');
+test_valid_value('scroll-timeline-attachment', 'inherit');
+test_valid_value('scroll-timeline-attachment', 'unset');
+test_valid_value('scroll-timeline-attachment', 'revert');
+
+test_valid_value('scroll-timeline-attachment', 'local');
+test_valid_value('scroll-timeline-attachment', 'defer');
+test_valid_value('scroll-timeline-attachment', 'ancestor');
+test_valid_value('scroll-timeline-attachment', 'local, defer');
+test_valid_value('scroll-timeline-attachment', 'defer, ancestor');
+test_valid_value('scroll-timeline-attachment', 'local, defer, ancestor, local');
+test_valid_value('scroll-timeline-attachment', 'local, local, local, local');
+
+test_invalid_value('scroll-timeline-attachment', 'abc');
+test_invalid_value('scroll-timeline-attachment', '10px');
+test_invalid_value('scroll-timeline-attachment', 'auto');
+test_invalid_value('scroll-timeline-attachment', 'none');
+test_invalid_value('scroll-timeline-attachment', 'local defer');
+test_invalid_value('scroll-timeline-attachment', 'local / defer');
+
+</script>
diff --git 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,27 +87,32 @@
 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:
 
 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',
 }, '');
 </script>
diff --git a/scroll-animations/css/view-timeline-attachment-computed-tentative.html b/scroll-animations/css/view-timeline-attachment-computed-tentative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #outer { view-timeline-attachment: defer; }
+  #target { view-timeline-attachment: ancestor; }
+</style>
+<div id="outer">
+  <div id="target"></div>
+</div>
+<script>
+test_computed_value('view-timeline-attachment', 'initial', 'local');
+test_computed_value('view-timeline-attachment', 'inherit', 'defer');
+test_computed_value('view-timeline-attachment', 'unset', 'local');
+test_computed_value('view-timeline-attachment', 'revert', 'local');
+test_computed_value('view-timeline-attachment', 'local');
+test_computed_value('view-timeline-attachment', 'defer');
+test_computed_value('view-timeline-attachment', 'ancestor');
+test_computed_value('view-timeline-attachment', 'local, defer');
+test_computed_value('view-timeline-attachment', 'defer, ancestor');
+test_computed_value('view-timeline-attachment', 'local, defer, ancestor');
+test_computed_value('view-timeline-attachment', 'local, local, local, local');
+
+test(() => {
+  let style = getComputedStyle(document.getElementById('target'));
+  assert_not_equals(Array.from(style).indexOf('view-timeline-attachment'), -1);
+}, 'The view-timeline-attachment property shows up in CSSStyleDeclaration enumeration');
+
+test(() => {
+  let style = document.getElementById('target').style;
+  assert_not_equals(style.cssText.indexOf('view-timeline-attachment'), -1);
+}, 'The view-timeline-attachment property shows up in CSSStyleDeclaration.cssText');
+
+</script>
diff --git a/scroll-animations/css/view-timeline-attachment-parsing-tentative.html b/scroll-animations/css/view-timeline-attachment-parsing-tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<div id="target"></div>
+
+<script>
+
+test_valid_value('view-timeline-attachment', 'initial');
+test_valid_value('view-timeline-attachment', 'inherit');
+test_valid_value('view-timeline-attachment', 'unset');
+test_valid_value('view-timeline-attachment', 'revert');
+
+test_valid_value('view-timeline-attachment', 'local');
+test_valid_value('view-timeline-attachment', 'defer');
+test_valid_value('view-timeline-attachment', 'ancestor');
+test_valid_value('view-timeline-attachment', 'local, defer');
+test_valid_value('view-timeline-attachment', 'defer, ancestor');
+test_valid_value('view-timeline-attachment', 'local, defer, ancestor, local');
+test_valid_value('view-timeline-attachment', 'local, local, local, local');
+
+test_invalid_value('view-timeline-attachment', 'abc');
+test_invalid_value('view-timeline-attachment', '10px');
+test_invalid_value('view-timeline-attachment', 'auto');
+test_invalid_value('view-timeline-attachment', 'none');
+test_invalid_value('view-timeline-attachment', 'local defer');
+test_invalid_value('view-timeline-attachment', 'local / defer');
+
+</script>
diff --git 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,27 +82,32 @@
 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:
 
 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',
 }, '');
 </script>