Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-27 12:50:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1822335 [wpt PR 38991] - Implement getter and setter for rangeStart and rangeEnd., a=testonly

Browse Source 
Automatic update from web-platform-tests
Implement getter and setter for rangeStart and rangeEnd.

Bug: 1424538

Change-Id: I69506a04387ed76e5daf9d0c173f12afce8b0b6a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4335845
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1117717}

--

wpt-commits: 9a3b35afc5804647a145e5d8e1650725082cf82d
wpt-pr: 38991
This commit is contained in:
Kevin Ellis 2023-03-20 20:04:14 +00:00 committed by moz-wptsync-bot
parent 70fea10674
commit a755c04972
2 changed files with 125 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-get-set-range.html Normal file
View File

@ -0,0 +1,120 @@
<!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>
<script src="/css/css-typed-om/resources/testhelper.js"></script>
<style>
#container {
border: 10px solid lightgray;
overflow-x: scroll;
height: 200px;
width: 200px;
}
#content {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
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">
function assert_timeline_offset(actual, expected, errorMessage) {
assert_equals(actual.rangeName, expected.rangeName, errorMessage);
assert_style_value_equals(actual.offset, expected.offset);
}
promise_test(async t => {
const timeline = new ViewTimeline({ subject: target, axis: 'inline' });
const anim = target.animate({ opacity: [0, 1 ] }, { timeline: timeline });
t.add_cleanup(() => {
anim.cancel();
});
container.scrollLeft = 750;
await waitForNextFrame();
// auto ==> cover 0% to cover 100%
// cover 0% @ 600px
// cover 100% @ 900px
// expected opacity = (750 - 600) / (900 - 600) = 0.5
assert_equals(anim.rangeStart, 'auto', 'Initial value for rangeStart');
assert_equals(anim.rangeEnd, 'auto', 'Initial value for rangeEnd');
assert_equals(getComputedStyle(target).opacity, '0.5',
'Opacity with range set to [auto, auto]');
// contain 0% @ 700px
// cover 100% @ 900px
// expected opacity = (750 - 700) / (900 - 700) = 0.25
anim.rangeStart = "contain 0%";
anim.rangeEnd = "cover 100%";
assert_timeline_offset(
anim.rangeStart,
{ rangeName: 'contain', offset: CSS.percent(0) },
'rangeStart set to contain 0%');
assert_timeline_offset(
anim.rangeEnd,
{ rangeName: 'cover', offset: CSS.percent(100) },
'rangeEnd set to cover 100%');
assert_equals(getComputedStyle(target).opacity, '0.25',
'opacity with range set to [contain 0%, cover 100%]');
// entry -20px @ 580px
// exit-crossing 10% @ 810px
// expected opacity = (750 - 580) / (810 - 580) = 0.739130
anim.rangeStart = { rangeName: 'entry', offset: CSS.px(-20), };
anim.rangeEnd = { rangeName: 'exit-crossing', offset: CSS.percent(10) };
assert_timeline_offset(
anim.rangeStart,
{ rangeName: 'entry', offset: CSS.px(-20) },
'rangeStart set to entry -20px');
assert_timeline_offset(
anim.rangeEnd,
{ rangeName: 'exit-crossing', offset: CSS.percent(10) },
'rangeEnd set to exit-crossing 10%');
assert_approx_equals(
parseFloat(getComputedStyle(target).opacity), 0.739130, 1e-6,
'opacity with range set to [entry -20px, exit-crossing 10%]');
// auto [start] @ 600px
// contain 100% @ 800px
// expected opacity = (750 - 600) / (800 - 600) = 0.75
anim.rangeStart = "auto";
anim.rangeEnd = "contain calc(60% + 40%)";
assert_equals(anim.rangeStart, 'auto','rangeStart set to auto');
assert_timeline_offset(
anim.rangeEnd,
{ rangeName: 'contain', offset: CSS.percent(100) },
'rangeEnd set to contain 100%');
assert_equals(getComputedStyle(target).opacity, '0.75',
'opacity with range set to [auto, contain 100%]');
}, 'Getting and setting the animation range');
</script>
</html>

5
testing/web-platform/tests/web-animations/interfaces/Animation/style-change-events.html
View File

@ -164,6 +164,11 @@ const tests = {
}),
playState: UsePropertyTest(animation => animation.playState),
pending: UsePropertyTest(animation => animation.pending),
// Strictly speaking, rangeStart and rangeEnd can change whether the effect
// is active, but only if the animation has a view timeline. Otherwise, it has
// no effect.
rangeStart: UsePropertyTest(animation => animation.rangeStart),
rangeEnd: UsePropertyTest(animation => animation.rangeEnd),
replaceState: UsePropertyTest(animation => animation.replaceState),
ready: UsePropertyTest(animation => animation.ready),
finished: UsePropertyTest(animation => {