--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-cascade.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-cascade.html
@@ -13,21 +13,23 @@
     height: 200px;
   }
   @keyframes expand {
     from { width: 100px; }
     to { width: 200px; }
   }
   @scroll-timeline timeline {
     source: selector(#scroller);
+    time-range: 10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline {
     source: selector(#scroller);
+    time-range: 1s;
     start: 0px;
     end: 50px;
   }
   #element {
     animation: expand 10s linear;
     animation-timeline: timeline;
   }
   /* Ensure stable expectations if feature is not supported */
@@ -38,11 +40,11 @@
 <div id=scroller>
   <div id=contents></div>
 </div>
 <div id=element></div>
 <script>
   promise_test(async (t) => {
     scroller.scrollTop = 25;
     await waitForNextFrame();
-    assert_equals(getComputedStyle(element).width, '150px');
+    assert_equals(getComputedStyle(element).width, '105px');
   }, 'Latest @scroll-timeline rule wins');
 </script>

--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-dynamic.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-dynamic.tentative.html
@@ -55,23 +55,26 @@
   // has a reasonable default.
   function insertScrollTimeline(options) {
     if (typeof(options) == 'undefined')
       options = {};
     if (typeof(options.name) == 'undefined')
       options.name = 'timeline';
     if (typeof(options.source) == 'undefined')
       options.source = 'selector(#scroller1)';
+    if (typeof(options.timeRange) == 'undefined')
+      options.timeRange = '1e10s';
     if (typeof(options.start) == 'undefined')
       options.start = '0px';
     if (typeof(options.end) == 'undefined')
       options.end = '100px';
     return insertSheet(`
       @scroll-timeline ${options.name} {
         source: ${options.source};
+        time-range: ${options.timeRange};
         start: ${options.start};
         end: ${options.end};
       }
     `);
   }
 
   // Runs a test with dynamically added/removed elements or CSS rules.
   // Each test is instantiated twice: once for the initial style resolve where
@@ -99,23 +102,17 @@
     // Verify that the computed style after scrolling a bit.
     instantiate(async (element, expected) => {
       scroller1.scrollTop = scroller1.scrollTop + 1;
       scroller2.scrollTop = scroller2.scrollTop + 1;
       await waitForNextFrame();
       scroller1.scrollTop = scroller1.scrollTop - 1;
       scroller2.scrollTop = scroller2.scrollTop - 1;
       await waitForNextFrame();
-      assert_approx_equals(
-          parseFloat(getComputedStyle(element).width),
-          parseFloat(expected),
-          // converting between progress based scroll timelines and document
-          // timelines has some margin of rounding error, this check makes sure
-          // values are within 1/10th of a pixel.
-          0.1);
+      assert_equals(getComputedStyle(element).width, expected);
     }, description + ' [scroll]');
   }
 
   dynamic_rule_test(async (t, assert_width) => {
     let element = insertElement();
 
     // This element initially has a DocumentTimeline.
     await assert_width(element, '100px');

--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-ignored.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-ignored.tentative.html
@@ -18,28 +18,31 @@
   }
   @keyframes expand {
     from { width: 100px; }
     to { width: 200px; }
   }
   @scroll-timeline timeline1 {
     source: selector(#scroller1);
     orientation: auto;
+    time-range: 1e10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline2 {
     source: selector(#scroller2);
     orientation: auto;
+    time-range: 1e10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline3 {
     source: selector(#scroller3);
     orientation: auto;
+    time-range: 1e10s;
     start: 0px;
     end: 100px;
   }
   #element {
     width: 0px;
     height: 20px;
     animation-name: expand;
     animation-duration: 1e10s;

--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-source-invalidation.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-source-invalidation.tentative.html
@@ -18,16 +18,17 @@
     height: 200px;
   }
   @keyframes expand {
     from { width: 100px; }
     to { width: 200px; }
   }
   @scroll-timeline timeline {
     source: selector(#scroller);
+    time-range: 1e10s;
     start: 0px;
     end: 100px;
   }
   #element {
     width: 0px;
     height: 20px;
     animation: expand 1e10s linear;
     animation-timeline: timeline;

--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-start-end.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-start-end.html
@@ -14,49 +14,57 @@
     height: 300px;
   }
   @keyframes expand {
     from { width: 100px; }
     to { width: 200px; }
   }
   @scroll-timeline timeline_0px_100px {
     source: selector(#scroller);
+    time-range: 10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline_50px_100px {
     source: selector(#scroller);
+    time-range: 10s;
     start: 50px;
     end: 100px;
   }
   @scroll-timeline timeline_auto_auto {
     source: selector(#scroller);
+    time-range: 10s;
     start: auto;
     end: auto;
   }
   @scroll-timeline timeline_auto_auto_implicit {
     source: selector(#scroller);
+    time-range: 10s;
   }
   @scroll-timeline timeline_50px_auto {
     source: selector(#scroller);
+    time-range: 10s;
     start: 50px;
     end: auto;
   }
   @scroll-timeline timeline_auto_100px {
     source: selector(#scroller);
+    time-range: 10s;
     start: auto;
     end: 100px;
   }
   @scroll-timeline timeline_25p_75p {
     source: selector(#scroller);
+    time-range: 10s;
     start: 25%;
     end: 75%;
   }
   @scroll-timeline timeline_calc_calc {
     source: selector(#scroller);
+    time-range: 10s;
     start: calc(25% + 10px);
     end: calc(75% + 10px);
   }
   #container > div {
     width: 0px;
     animation-name: expand;
     animation-duration: 10s;
     animation-timing-function: linear;

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-time-range.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#descdef-scroll-timeline-time-range">
+<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_10s {
+    source: selector(#scroller);
+    time-range: 10s;
+    start: 0px;
+    end: 100px;
+  }
+  @scroll-timeline timeline_1s {
+    source: selector(#scroller);
+    time-range: 1s;
+    start: 0px;
+    end: 100px;
+  }
+  @scroll-timeline timeline_1000ms {
+    source: selector(#scroller);
+    time-range: 1000ms;
+    start: 0px;
+    end: 100px;
+  }
+  #container > div {
+    width: 0px;
+    animation-name: expand;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+  }
+  /* Ensure stable expectations if feature is not supported */
+  @supports not (animation-timeline:foo) {
+    #container > div { animation-play-state: paused; }
+  }
+  #element_10s { animation-timeline: timeline_10s; }
+  #element_1s { animation-timeline: timeline_1s; }
+  #element_1000ms { animation-timeline: timeline_1000ms; }
+</style>
+<div id=scroller>
+  <div id=contents></div>
+</div>
+<div id=container>
+  <div id=element_10s></div>
+  <div id=element_1s></div>
+  <div id=element_1000ms></div>
+</div>
+<script>
+  scroller.scrollTop = 50;
+
+  promise_test(async (t) => {
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(element_10s).width, '150px');
+  }, 'Timerange mapped correctly (10s)');
+
+  promise_test(async (t) => {
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(element_1s).width, '105px');
+  }, 'Timerange mapped correctly (1s)');
+
+  promise_test(async (t) => {
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(element_1s).width, '105px');
+  }, 'Timerange mapped correctly (1000ms)');
+</script>

--- a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-cssom.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-cssom.tentative.html
@@ -174,16 +174,20 @@ test_csstext(
   `@scroll-timeline timeline { scroll-offsets: selector(#bar) 1 start; }`,
   `@scroll-timeline timeline { scroll-offsets: selector(#bar) start 1; }`);
 
 test_csstext(
   'scroll-offsets descriptor (multiple offsets)',
   `@scroll-timeline timeline { scroll-offsets: auto, selector(#bar) start 1; }`);
 
 test_csstext(
+  'time-range descriptor',
+  `@scroll-timeline timeline { time-range: 10s; }`);
+
+test_csstext(
   'defaults',
   `@scroll-timeline timeline { source: auto; orientation: auto; scroll-offsets: none; }`);
 
 test_csstext(
   'order',
   `@scroll-timeline timeline { orientation: auto; source: auto; scroll-offsets: none; }`,
   `@scroll-timeline timeline { source: auto; orientation: auto; scroll-offsets: none; }`);
 
@@ -265,9 +269,26 @@ test_offsets('selector(#foo) end 3');
 test_offsets('selector(#foo) 3 end', 'selector(#foo) end 3');
 test_offsets(' auto , auto ', 'auto, auto');
 test_offsets('10%, 100px');
 test_offsets('auto, 100%');
 test_offsets('0%, selector(  #foo)  3  end  ', "0%, selector(#foo) end 3");
 test_offsets('selector(#foo) end 3, selector(#bar)');
 test_offsets('0%, auto, selector(#foo) start, auto, selector(#bar) 12.3');
 
+// CSSScrollTimelineRule.timeRange
+
+function test_scroll_time_range(specified, expected) {
+  test_descriptor('time-range', specified, expected);
+}
+
+test_scroll_time_range('auto');
+test_scroll_time_range(' auto ', 'auto');
+test_scroll_time_range('1s');
+test_scroll_time_range(' 1s ', '1s');
+test_scroll_time_range('1000ms');
+
+test_scroll_time_range('', 'auto');
+test_scroll_time_range('red', 'auto');
+test_scroll_time_range('#fff', 'auto');
+test_scroll_time_range('unset', 'auto');
+
 </script>