fieldset-source.html (3434B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>View timeline with fieldset as source</title> 5 <link rel="help" href="https://www.w3.org/TR/scroll-animations-1/#dom-viewtimeline-viewtimeline"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <style> 10 @keyframes colorize { 11 from { background-color: #ccf; } 12 to { background-color: white; } 13 } 14 15 .input { 16 background-color: white; 17 view-timeline: --timeline; 18 animation: colorize; 19 animation-timeline: --timeline; 20 margin-top: 0px; 21 margin-bottom: 3px; 22 margin-left: 8px; 23 height: 20px; 24 width: 150px; 25 } 26 27 .input:last-child { 28 margin-bottom: 0px; 29 } 30 31 fieldset { 32 display: inline-block; 33 overflow-x: hidden; 34 overflow-y: scroll; 35 height: 80px; 36 } 37 38 div { 39 display: flex; 40 justify-content: flex-end; 41 align-items: center; 42 } 43 </style> 44 <body> 45 <fieldset id="fieldset"> 46 <legend id="legend">Reservation Details</legend> 47 <div> 48 <label for="name">Name: </label> 49 <input type="text" class="input" id="input1" value="Jane Doe" /> 50 </div> 51 <div> 52 <label for="date">Date: </label> 53 <input type="date" class="input" id="input2" value="2024-01-16"/> 54 </div> 55 <div> 56 <label for="time">Time: </label> 57 <input type="time" class="input" id="input3" value="18:30"/> 58 </div> 59 <div> 60 <label for="name">Number of guests: </label> 61 <input type="number" class="input" id="input4" value="5" /> 62 </div> 63 <div> 64 <label for="name">Contact info: </label> 65 <input type="text" class="input" id="input5" value="(555) 555-5555" /> 66 </div> 67 </fieldset> 68 </body> 69 <script> 70 async function runTest() { 71 promise_test(async t => { 72 const anims = document.getAnimations(); 73 assert_equals(anims.length, 5); 74 await Promise.all(anims.map(anim => anim.ready)); 75 76 // The bottom of the legend aligns with the top of the fieldset's 77 // scrollable area. 78 const fieldset = document.getElementById('fieldset'); 79 const legend = document.getElementById('legend'); 80 const fieldsetContentTop = 81 legend.getBoundingClientRect().bottom; 82 83 // The bottom of the scroll container aligns with the bottom of the 84 // fieldset's content box. 85 const fieldsetContentBottom = 86 fieldset.getBoundingClientRect().bottom - 87 parseFloat(getComputedStyle(fieldset).borderBottom); 88 89 // Validate the start and end offsets for each view timeline. 90 for (let anim of anims) { 91 assert_equals(anim.timeline.source.id, 'fieldset'); 92 assert_equals(anim.timeline.subject.tagName, 'INPUT'); 93 const bounds = anim.effect.target.getBoundingClientRect(); 94 95 const expectedStartOffset = bounds.top - fieldsetContentBottom; 96 const expectedEndOffset = bounds.bottom - fieldsetContentTop; 97 assert_approx_equals( 98 parseFloat(anim.timeline.startOffset), 99 expectedStartOffset, 0.5, 100 `Unexpected start offset for ${anim.effect.target.id}`); 101 assert_approx_equals( 102 parseFloat(anim.timeline.endOffset), 103 expectedEndOffset, 0.5, 104 `Unexpected end offset for ${anim.effect.target.id}`); 105 }; 106 }, 'Fieldset is a valid source for a view timeline'); 107 } 108 109 window.onload = runTest(); 110 </script> 111 </html>