<!DOCTYPE html>
<html>
<title>The scroll() timeline source</title>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation">
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>
  @keyframes move {
    to { margin-left: 100px }
  }

  .animated {
    animation: move 1s linear;
  }

  #default {
    animation-timeline: scroll();
  }

  #root {
    animation-timeline: scroll(root);
  }

  #nearest {
    animation-timeline: scroll(nearest);
  }
</style>

<div class="animated" id="default"></div>
<div class="animated" id="root"></div>
<div class="animated" id="nearest"></div>

<script>
"use strict";

const timelineSourceTest = type => {
  test(() => {
    const target = document.getElementById(type);
    const animations = target.getAnimations();
    assert_equals(animations.length, 1);
    assert_equals(animations[0].timeline.source, document.documentElement);
  }, `CSS animation correctly uses the <html> element as the source for the ${type} scroll() timeline`);
};

timelineSourceTest("default");
timelineSourceTest("root");
timelineSourceTest("nearest");

</script>