| <!DOCTYPE html> |
| <html> |
| <title>The scroll() timeline source in quirks mode with a scrollable <body></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 } |
| } |
| |
| html { |
| height: 100px; |
| padding: 20px; |
| } |
| |
| body { |
| height: 110vh; |
| overflow: auto; |
| |
| animation: 1s move linear, 1s move linear, 1s move linear; |
| animation-timeline: scroll(self), scroll(nearest), scroll(root); |
| } |
| |
| body::after { |
| content: ""; |
| display: block; |
| height: 110%; |
| } |
| </style> |
| <body> |
| <script> |
| "use strict"; |
| |
| const timelineSourceTest = data => { |
| test(() => { |
| assert_equals(document.body.getAnimations()[data.index].timeline.source, data.expectedSource); |
| }, `CSS animation correctly uses the <${data.expectedSource.localName}> element as the source for the ${data.keyword} scroll() timeline`); |
| }; |
| |
| timelineSourceTest({ index: 0, keyword: "self", expectedSource: document.body }); |
| timelineSourceTest({ index: 1, keyword: "nearest", expectedSource: document.documentElement }); |
| timelineSourceTest({ index: 1, keyword: "root", expectedSource: document.documentElement }); |
| |
| </script> |
| </body> |
