-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Stub in implementation of ViewTimeline
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
1 parent
9589b7d
commit d95e64e
Showing
1 changed file
with
95 additions
and
0 deletions.
There are no files selected for viewing
95 changes: 95 additions & 0 deletions
95
scroll-animations/view-timelines/view-timeline-source.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |