Boris Chiou
f049cff526
This test is intermittent on the try server and my local machine beacuse the scroll overflow may not be ready sometimes. In other words, the view timeline may have zero range so it is inactive in Gecko (about 50% possibility) if we only wait for one frame after loading the doc. This test came from https://github.com/WebKit/WebKit/pull/35012, and it was added to make sure the calculation of ViewTimeline offsets doesn't include the transform, and it is not used to test the offsets for the inactive timeline, so we wait for one more frame (i.e. totally 2 frames) to make sure the scroll overflow is ready and the scroll range is not zero when sampling the timeline. However, the test is failed on Linux because we get the incorrect start offset, 605, instead of 604 (i.e. 1 pixel difference). Also, it is failed on Android because we get the incorrect start offset, 603.96667, instead of 604 (i.e. 0.03333 pixel difference). This may be related to precision issue from layout in other places (since MacOS and Windows work). We should investigate the offset calculation for this. This shouldn't have impact on the test result of other browsers. Differential Revision: https://phabricator.services.mozilla.com/D304300
57 lines
1.5 KiB
HTML
57 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html id="top">
|
|
<meta charset="utf-8">
|
|
<title>View timeline delay</title>
|
|
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
|
|
<script src="/scroll-animations/view-timelines/testcommon.js"></script>
|
|
<style>
|
|
#container {
|
|
overflow-x: scroll;
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
#content {
|
|
translate: 50px;
|
|
width: 1800px;
|
|
margin: 0;
|
|
}
|
|
.spacer {
|
|
width: 800px;
|
|
display: inline-block;
|
|
}
|
|
#target {
|
|
background-color: green;
|
|
height: 100px;
|
|
width: 100px;
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="container">
|
|
<div id="content">
|
|
<div class="spacer"></div>
|
|
<div id="target"></div>
|
|
<div class="spacer"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
promise_test(async t => {
|
|
const timeline = new ViewTimeline({
|
|
subject: target,
|
|
axis: "inline"
|
|
});
|
|
const anim = target.animate({ backgroundColor: ['green', 'red' ] },
|
|
{ timeline: timeline });
|
|
// Make sure the scroll overflow is ready.
|
|
await waitForAnimationFrames(2);
|
|
assert_px_equals(timeline.startOffset, 604, 'startOffset');
|
|
assert_px_equals(timeline.endOffset, 904, 'endOffset');
|
|
});
|
|
</script>
|