Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE html>
<meta charset="utf-8">
<title>View timeline with fieldset as source</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
@keyframes colorize {
from { background-color: #ccf; }
to { background-color: white; }
.input {
background-color: white;
view-timeline: --timeline;
animation: colorize;
animation-timeline: --timeline;
margin-top: 0px;
margin-bottom: 3px;
margin-left: 8px;
height: 20px;
width: 150px;
.input:last-child {
margin-bottom: 0px;
fieldset {
display: inline-block;
overflow-x: hidden;
overflow-y: scroll;
height: 80px;
div {
display: flex;
justify-content: flex-end;
align-items: center;
<fieldset id="fieldset">
<legend id="legend">Reservation Details</legend>
<label for="name">Name: </label>
<input type="text" class="input" id="input1" value="Jane Doe" />
<label for="date">Date: </label>
<input type="date" class="input" id="input2" value="2024-01-16"/>
<label for="time">Time: </label>
<input type="time" class="input" id="input3" value="18:30"/>
<label for="name">Number of guests: </label>
<input type="number" class="input" id="input4" value="5" />
<label for="name">Contact info: </label>
<input type="text" class="input" id="input5" value="(555) 555-5555" />
async function runTest() {
promise_test(async t => {
const anims = document.getAnimations();
assert_equals(anims.length, 5);
await Promise.all( => anim.ready));
// The bottom of the legend aligns with the top of the fieldset's
// scrollable area.
const fieldset = document.getElementById('fieldset');
const legend = document.getElementById('legend');
const fieldsetContentTop =
// The bottom of the scroll container aligns with the bottom of the
// fieldset's content box.
const fieldsetContentBottom =
fieldset.getBoundingClientRect().bottom -
// Validate the start and end offsets for each view timeline.
anims.forEach(async (anim) => {
assert_equals(, 'fieldset');
assert_equals(anim.timeline.subject.tagName, 'INPUT');
const bounds =;
const expectedStartOffset = - fieldsetContentBottom;
const expectedEndOffset = bounds.bottom - fieldsetContentTop;
expectedStartOffset, 0.1,
`Unexpected start offset for ${}`);
expectedEndOffset, 0.1,
`Unexpected end offset for ${}`);
}, 'Fieldset is a valid source for a view timeline');
window.onload = runTest();