111 lines
3.4 KiB
HTML
111 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>View timeline with fieldset as source</title>
|
|
<link rel="help" href="https://www.w3.org/TR/scroll-animations-1/#dom-viewtimeline-viewtimeline">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<style>
|
|
@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;
|
|
}
|
|
</style>
|
|
<body>
|
|
<fieldset id="fieldset">
|
|
<legend id="legend">Reservation Details</legend>
|
|
<div>
|
|
<label for="name">Name: </label>
|
|
<input type="text" class="input" id="input1" value="Jane Doe" />
|
|
</div>
|
|
<div>
|
|
<label for="date">Date: </label>
|
|
<input type="date" class="input" id="input2" value="2024-01-16"/>
|
|
</div>
|
|
<div>
|
|
<label for="time">Time: </label>
|
|
<input type="time" class="input" id="input3" value="18:30"/>
|
|
</div>
|
|
<div>
|
|
<label for="name">Number of guests: </label>
|
|
<input type="number" class="input" id="input4" value="5" />
|
|
</div>
|
|
<div>
|
|
<label for="name">Contact info: </label>
|
|
<input type="text" class="input" id="input5" value="(555) 555-5555" />
|
|
</div>
|
|
</fieldset>
|
|
</body>
|
|
<script>
|
|
async function runTest() {
|
|
promise_test(async t => {
|
|
const anims = document.getAnimations();
|
|
assert_equals(anims.length, 5);
|
|
await Promise.all(anims.map(anim => 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 =
|
|
legend.getBoundingClientRect().bottom;
|
|
|
|
// The bottom of the scroll container aligns with the bottom of the
|
|
// fieldset's content box.
|
|
const fieldsetContentBottom =
|
|
fieldset.getBoundingClientRect().bottom -
|
|
parseFloat(getComputedStyle(fieldset).borderBottom);
|
|
|
|
// Validate the start and end offsets for each view timeline.
|
|
for (let anim of anims) {
|
|
assert_equals(anim.timeline.source.id, 'fieldset');
|
|
assert_equals(anim.timeline.subject.tagName, 'INPUT');
|
|
const bounds = anim.effect.target.getBoundingClientRect();
|
|
|
|
const expectedStartOffset = bounds.top - fieldsetContentBottom;
|
|
const expectedEndOffset = bounds.bottom - fieldsetContentTop;
|
|
assert_approx_equals(
|
|
parseFloat(anim.timeline.startOffset),
|
|
expectedStartOffset, 0.5,
|
|
`Unexpected start offset for ${anim.effect.target.id}`);
|
|
assert_approx_equals(
|
|
parseFloat(anim.timeline.endOffset),
|
|
expectedEndOffset, 0.5,
|
|
`Unexpected end offset for ${anim.effect.target.id}`);
|
|
};
|
|
}, 'Fieldset is a valid source for a view timeline');
|
|
}
|
|
|
|
window.onload = runTest();
|
|
</script>
|
|
</html>
|