[@scroll-timeline] Add WPT for unknown descriptors

Fixed: 1246290 Change-Id: I714c9efdcd9db1c2ef339f638dc6e5c9a2d37d09 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3139820 Reviewed-by: Kevin Ellis <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#918931}
valerioadm · Sep 7, 2021 · 6746e79 · 6746e79
1 parent 09c926f
commit 6746e79
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/scroll-animations/css/at-scroll-timeline-unknown-descriptor.tentative.html b/scroll-animations/css/at-scroll-timeline-unknown-descriptor.tentative.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>@scroll-timeline: Unknown Descriptors</title>
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
+<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/5109">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+  #scroller {
+    overflow: scroll;
+    width: 100px;
+    height: 100px;
+  }
+  #contents {
+    height: 200px;
+  }
+  @keyframes expand {
+    from { width: 100px; }
+    to { width: 200px; }
+  }
+  @scroll-timeline timeline {
+    unknown: 100px;
+    source: selector(#scroller);
+    start: 0px;
+    end: 100px;
+    time-range: 10s;
+    foo: bar;
+  }
+  #element {
+    width: 0px;
+    animation: expand 10s linear timeline;
+  }
+</style>
+<div id=scroller>
+  <div id=contents></div>
+</div>
+<div id=element></div>
+<script>
+  promise_test(async (t) => {
+    scroller.scrollTop = 50;
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(element).width, '150px');
+  }, 'Unknown descriptors do not invalidate the @scroll-timeline rule');
+</script>