Skip to content

Commit

Permalink
Stub in implementation of ViewTimeline
Browse files Browse the repository at this point in the history
This patch adds a stub implementation of ViewTimeline and
ViewTimelineOptions. In this patch, only the subject attribute has
been added since it is unlikely to change as the spec evolves. Having
said that, there are several TODOs to fine-tune the behavior as the spec
matures.

Bug: 1329159
Change-Id: I82f63acd54c598ac251cf1c7b42351db580ba476
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3668384
Commit-Queue: Kevin Ellis <[email protected]>
Reviewed-by: Robert Flack <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1012952}
  • Loading branch information
kevers-google authored and chromium-wpt-export-bot committed Jun 10, 2022
1 parent 9589b7d commit d95e64e
Showing 1 changed file with 95 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html id="top">
<meta charset="utf-8">
<title>View timeline source</title>
<!-- TODO(crbug.com/1329159): Update link once ratified -->
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#viewtimeline-interface">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<style>
#outer {
height: 400px;
width: 400px;
overflow: clip;
}

#inner {
height: 300px;
width: 300px;
overflow: clip;
}

#outer.scroller,
#inner.scroller {
overflow: scroll;
}

#spacer {
height: 1000px;
}

#target {
background: green;
height: 40px;
width: 40px;
}
</style>
<body>
<div id="outer" class="scroller">
<div id="inner" class="scroller">
<div id="target"></div>
<div id="spacer"></div>
</div>
</div>
</body>
<script>
'use strict';

function resetScrollers() {
inner.classList.add('scroller');
outer.classList.add('scroller');
}

function assert_source_id(viewTimeline, expected) {
const source = viewTimeline.source;
assert_true(!!source, 'No source');
assert_equals(source.id, expected);
}

promise_test(async t => {
t.add_cleanup(resetScrollers);
const viewTimeline = new ViewTimeline({ subject: target });
assert_equals(viewTimeline.subject, target);
assert_source_id(viewTimeline, 'inner');

inner.classList.remove('scroller');
assert_source_id(viewTimeline, 'outer');

outer.classList.remove('scroller');
assert_source_id(viewTimeline, 'top');
}, 'Default source for a View timeline is the nearest scroll ' +
'ancestor to the subject');

promise_test(async t => {
t.add_cleanup(resetScrollers);
const viewTimeline =
new ViewTimeline({ source: outer, subject: target });
assert_equals(viewTimeline.subject, target);
assert_source_id(viewTimeline, 'inner');
}, 'View timeline ignores explicitly set source');

promise_test(async t => {
t.add_cleanup(resetScrollers);
const viewTimeline =
new ViewTimeline({ subject: target });
assert_equals(viewTimeline.subject, target);
assert_source_id(viewTimeline, 'inner');

target.style = "display: none";
assert_equals(viewTimeline.source, null);

}, 'View timeline source is null when display:none');

</script>
</html>

0 comments on commit d95e64e

Please sign in to comment.