View timeline current-time with vertical-rl writing mode

From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 11:22:09 +0200 Subject: Adding upstream version 110.0.1. Signed-off-by: Daniel Baumann --- ...imeline-current-time-vertical-rl.tentative.html | 97 +++++++ ...block-view-timeline-current-time.tentative.html | 205 +++++++++++++++ ...ock-view-timeline-nested-subject.tentative.html | 113 ++++++++ ...nline-view-timeline-current-time.tentative.html | 289 +++++++++++++++++++++ .../scroll-animations/view-timelines/testcommon.js | 137 ++++++++++ .../view-timeline-delay-large-subject.html | 93 +++++++ .../view-timelines/view-timeline-delay.html | 103 ++++++++ .../view-timeline-get-current-time-range-name.html | 145 +++++++++++ .../view-timelines/view-timeline-inset.html | 226 ++++++++++++++++ .../view-timelines/view-timeline-snapport.html | 58 +++++ .../view-timeline-source.tentative.html | 94 +++++++ .../view-timeline-subject-size-changes.html | 79 ++++++ 12 files changed, 1639 insertions(+) create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-current-time-vertical-rl.tentative.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-current-time.tentative.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-nested-subject.tentative.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/inline-view-timeline-current-time.tentative.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/testcommon.js create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-delay-large-subject.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-delay.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-get-current-time-range-name.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-inset.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-snapport.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-source.tentative.html create mode 100644 testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-subject-size-changes.html (limited to 'testing/web-platform/tests/scroll-animations/view-timelines') diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-current-time-vertical-rl.tentative.html b/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-current-time-vertical-rl.tentative.html new file mode 100644 index 0000000000..5bc4598452 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-current-time-vertical-rl.tentative.html @@ -0,0 +1,97 @@ + + + +View timeline current-time with vertical-rl writing mode + + + + + + + + +

+ + + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-current-time.tentative.html b/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-current-time.tentative.html new file mode 100644 index 0000000000..a6530f6631 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-current-time.tentative.html @@ -0,0 +1,205 @@ + + + +View timeline current-time + + + + + + + + +

+ + + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-nested-subject.tentative.html b/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-nested-subject.tentative.html new file mode 100644 index 0000000000..2cc8af882f --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-nested-subject.tentative.html @@ -0,0 +1,113 @@ + + + +View timeline nested subject + + + + + + + + +

+ + + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/inline-view-timeline-current-time.tentative.html b/testing/web-platform/tests/scroll-animations/view-timelines/inline-view-timeline-current-time.tentative.html new file mode 100644 index 0000000000..412145b04c --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/inline-view-timeline-current-time.tentative.html @@ -0,0 +1,289 @@ + + + +View timeline current-time + + + + + + + + +

+ + + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/testcommon.js b/testing/web-platform/tests/scroll-animations/view-timelines/testcommon.js new file mode 100644 index 0000000000..969f282e67 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/testcommon.js @@ -0,0 +1,137 @@ +'use strict'; + +function assert_px_equals(observed, expected, description) { + assert_equals(observed.unit, 'px', + `Unexpected unit type for '${description}'`); + assert_approx_equals(observed.value, expected, 0.0001, + `Unexpected value for ${description}`); +} + +function CreateViewTimelineOpacityAnimation(test, target, options) { + const viewTimelineOptions = { + subject: target, + axis: 'block' + }; + if (options) { + for (let key in options) { + viewTimelineOptions[key] = options[key]; + } + } + + const anim = + target.animate( + { opacity: [0.3, 0.7] }, + { timeline: new ViewTimeline(viewTimelineOptions) }); + test.add_cleanup(() => { + anim.cancel(); + }); + return anim; +} + +// Verify that range specified in the options aligns with the active range of +// the animation. +// +// Sample call: +// await runTimelineRangeTest(t, { +// timeline: { inset: [ CSS.percent(0), CSS.percent(20)] }, +// timing: { fill: 'both' } +// rangeStart: 600, +// rangeEnd: 900 +// }); +async function runTimelineRangeTest(t, options, message) { + container.scrollLeft = 0; + await waitForNextFrame(); + + const anim = + options.anim || + CreateViewTimelineOpacityAnimation(t, target, options.timeline); + if (options.timing) + anim.effect.updateTiming(options.timing); + + const timeline = anim.timeline; + await anim.ready; + + // Advance to the start offset, which triggers entry to the active phase. + container.scrollLeft = options.rangeStart; + await waitForNextFrame(); + assert_equals(getComputedStyle(target).opacity, '0.3', + `Effect at the start of the active phase: ${message}`); + + // Advance to the midpoint of the animation. + container.scrollLeft = (options.rangeStart + options.rangeEnd) / 2; + await waitForNextFrame(); + assert_equals(getComputedStyle(target).opacity,'0.5', + `Effect at the midpoint of the active range: ${message}`); + + // Advance to the end of the animation. + container.scrollLeft = options.rangeEnd; + await waitForNextFrame(); + assert_equals(getComputedStyle(target).opacity, '0.7', + `Effect is in the active phase at effect end time: ${message}`); + + // Return the animation so that we can continue testing with the same object. + return anim; +} + +// Sets the start and end delays for a view timeline and ensures that the +// range aligns with expected values. +// +// Sample call: +// await runTimelineDelayTest(t, { +// delay: { phase: 'cover', percent: CSS.percent(0) } , +// endDelay: { phase: 'cover', percent: CSS.percent(100) }, +// rangeStart: 600, +// rangeEnd: 900 +// }); +async function runTimelineDelayTest(t, options) { + const delayToString = delay => { + const parts = []; + if (delay.phase) + parts.push(delay.phase); + if (delay.percent) + parts.push(`${delay.percent.value}%`); + return parts.join(' '); + }; + const range = + `${delayToString(options.delay)} to ` + + `${delayToString(options.endDelay)}`; + + options.timeline = { + axis: 'inline' + }; + options.timing = { + delay: options.delay, + endDelay: options.endDelay, + // Set fill to accommodate floating point precision errors at the + // endpoints. + fill: 'both' + }; + + return runTimelineRangeTest(t, options, range); +} + +// Sets the Inset for a view timeline and ensures that the range aligns with +// expected values. +// +// Sample call: +// await runTimelineDelayTest(t, { +// inset: [ CSS.px(20), CSS.px(40) ] +// rangeStart: 600, +// rangeEnd: 900 +// }); +async function runTimelineInsetTest(t, options) { + options.timeline = { + axis: 'inline', + inset: options.inset + }; + options.timing = { + // Set fill to accommodate floating point precision errors at the + // endpoints. + fill: 'both' + } + const length = options.inset.length; + const range = + (options.inset instanceof Array) ? options.inset.join(' ') + : options.inset; + return runTimelineRangeTest(t, options, range); +} diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-delay-large-subject.html b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-delay-large-subject.html new file mode 100644 index 0000000000..edb37c1379 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-delay-large-subject.html @@ -0,0 +1,93 @@ + + + +View timeline delay + + + + + + + + +

+ + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-delay.html b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-delay.html new file mode 100644 index 0000000000..1377dc339c --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-delay.html @@ -0,0 +1,103 @@ + + + +View timeline delay + + + + + + + + +

+ + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-get-current-time-range-name.html b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-get-current-time-range-name.html new file mode 100644 index 0000000000..8f385e7b6e --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-get-current-time-range-name.html @@ -0,0 +1,145 @@ + + + +View timeline delay + + + + + + + + +

+ + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-inset.html b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-inset.html new file mode 100644 index 0000000000..72480ea9f3 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-inset.html @@ -0,0 +1,226 @@ + + + +View timeline delay + + + + + + + + + +

+ + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-snapport.html b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-snapport.html new file mode 100644 index 0000000000..5d68d37037 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-snapport.html @@ -0,0 +1,58 @@ + +ViewTimeline vs. scroll-padding-* + + + + + + + + + +

+ + + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-source.tentative.html b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-source.tentative.html new file mode 100644 index 0000000000..f8aabc8bdd --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-source.tentative.html @@ -0,0 +1,94 @@ + + + +View timeline source + + + + + + +

+ + + diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-subject-size-changes.html b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-subject-size-changes.html new file mode 100644 index 0000000000..b438317f7c --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-subject-size-changes.html @@ -0,0 +1,79 @@ + + + +View timeline Subject size changes after creation of Animation + + + + + + + + +

+ + + -- cgit v1.2.3