[anchor] Support anchor()/anchor-size() in CSS Animations

The CSS Animations machinery does not use the StyleCascade/CSSProperty code paths which handle CSSValue resolution and the AnchorScope setup. Without an AnchorScope, any anchor query will fail to evaluate, causing the fallback to be taken instead. If the fallback is not present, however, we'll hit a CHECK, because that situation was supposed to be already handled by StyleCascade::Resolve at an earlier stage. To take care of the IACVT issue, CSSMathFunction values are now resolved through CSSInterpolationEnvironment::Resolve, which in turns calls StyleCascade::Resolve). In addition, we need an AnchorScope before ApplyStandardPropertyValue, which is where calls to ComputeLength (and thus anchor query evaluation) take place. It's possible that we're invalidating conversions a bit too much (ResolvedValueChecker), but investigating whether or not that is even avoidable will be treated as a separate issue. Bug: 347031399 Change-Id: I44193862978e13af106f80fe0696f23cb94a9239 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5676550 Commit-Queue: Anders Hartvoll Ruud <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1323591}
web-platform-tests · Jul 5, 2024 · 54100d5 · 54100d5
1 parent 6e3f787
commit 54100d5
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 0 deletions.
diff --git a/css/css-anchor-position/anchor-animation-dynamic-default.html b/css/css-anchor-position/anchor-animation-dynamic-default.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>Tests CSS animation of anchor(), dynamic position-anchor changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    border: 1px solid black;
+    width: 400px;
+    height: 400px;
+    position: relative;
+  }
+  #anchor1, #anchor2 {
+    width: 100px;
+    height: 100px;
+    background: tomato;
+  }
+  #anchor1 {
+    background: coral;
+    anchor-name: --a1;
+  }
+  #anchor2 {
+    background: seagreen;
+    anchor-name: --a2;
+  }
+  #anchored {
+    width: 50px;
+    height: 50px;
+    background: skyblue;
+    animation: --anim 9999s steps(2, start);
+    position: absolute;
+    position-anchor: --a1;
+  }
+  @keyframes --anim {
+    from { top: anchor(top); }
+    to { top: anchor(bottom); }
+  }
+</style>
+<div id=cb>
+  <div id=anchor1></div>
+  <div id=anchor2></div>
+  <div id=anchored></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(anchored.offsetTop, 50);
+    anchored.style.positionAnchor = '--a2';
+    assert_equals(anchored.offsetTop, 150);
+  }, 'Animation with anchor() responds to position-anchor change');
+</script>
diff --git a/css/css-anchor-position/anchor-animation-dynamic-name.html b/css/css-anchor-position/anchor-animation-dynamic-name.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>Tests CSS animation of anchor(), dynamic anchor-name changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    border: 1px solid black;
+    width: 400px;
+    height: 400px;
+    position: relative;
+  }
+  #a1, #a2 {
+    width: 100px;
+    height: 100px;
+  }
+  #a1 {
+    background: tomato;
+  }
+  #a2 {
+    background: seagreen;
+  }
+  .anchor { anchor-name: --a; }
+  #anchored {
+    width: 50px;
+    height: 50px;
+    background: skyblue;
+    animation: --anim 1s steps(2, start);
+    position: absolute;
+    position-anchor: --a;
+  }
+  @keyframes --anim {
+    from { top: anchor(top); }
+    to { top: anchor(bottom); }
+  }
+</style>
+<div id=cb>
+  <div id=a1 class=anchor></div>
+  <div id=a2></div>
+  <div id=anchored></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(anchored.offsetTop, 50);
+    a1.classList.toggle('anchor');
+    a2.classList.toggle('anchor');
+    assert_equals(anchored.offsetTop, 150);
+  }, 'Animation with anchor() responds to anchor-name change');
+</script>
diff --git a/css/css-anchor-position/anchor-animation-iacvt.html b/css/css-anchor-position/anchor-animation-iacvt.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Tests CSS animation of anchor(), IACVT behavior</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    border: 1px solid black;
+    width: 400px;
+    height: 400px;
+    position: relative;
+  }
+  #anchored {
+    width: 50px;
+    height: 50px;
+    background: skyblue;
+    animation: --anim 9999s linear;
+    position: absolute;
+    top: 42px; /* This should be overwritten by the anim. effect value. */
+  }
+  @keyframes --anim {
+    from { top: anchor(--unknown top); }
+    to { top: anchor(--unknown bottom); }
+  }
+</style>
+<div id=cb>
+  <div id=anchored></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(anchored.offsetTop, 0); // auto
+  }, 'Animation of invalid anchor() with no fallback');
+</script>
diff --git a/css/css-anchor-position/anchor-animation.html b/css/css-anchor-position/anchor-animation.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>Tests CSS animation of anchor()</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    border: 1px solid black;
+    width: 400px;
+    height: 400px;
+    position: relative;
+  }
+  #anchor1, #anchor2 {
+    width: 100px;
+    height: 100px;
+    background: tomato;
+  }
+  #anchor1 {
+    background: coral;
+    anchor-name: --a1;
+  }
+  #anchor2 {
+    background: seagreen;
+    anchor-name: --a2;
+  }
+  #anchored {
+    width: 50px;
+    height: 50px;
+    background: skyblue;
+    animation: --anim 9999s steps(2, start);
+    position: absolute;
+  }
+  @keyframes --anim {
+    from { top: anchor(--a1 top); }
+    to { top: anchor(--a2 bottom); }
+  }
+</style>
+<div id=cb>
+  <div id=anchor1></div>
+  <div id=anchor2></div>
+  <div id=anchored></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(anchored.offsetTop, 100);
+  }, 'Animation with anchor()');
+</script>
diff --git a/css/css-anchor-position/anchor-size-animation.html b/css/css-anchor-position/anchor-size-animation.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>Tests CSS animation of anchor-size()</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    border: 1px solid black;
+    width: 400px;
+    height: 400px;
+    position: relative;
+  }
+  #anchor1, #anchor2 {
+    width: 100px;
+    height: 100px;
+    background: tomato;
+  }
+  #anchor1 {
+    background: coral;
+    anchor-name: --a1;
+  }
+  #anchor2 {
+    background: seagreen;
+    anchor-name: --a2;
+    width: 200px;
+  }
+  #anchored {
+    width: 50px;
+    height: 50px;
+    background: skyblue;
+    animation: --anim 9999s steps(2, start);
+    position: absolute;
+  }
+  @keyframes --anim {
+    from { width: anchor-size(--a1 width); }
+    to { width: anchor-size(--a2 width); }
+  }
+</style>
+<div id=cb>
+  <div id=anchor1></div>
+  <div id=anchor2></div>
+  <div id=anchored></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(anchored.offsetWidth, 150);
+  }, 'Animation with anchor-size()');
+</script>