contain-alignment.html (2863B)
1 <!DOCTYPE html> 2 <html> 3 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/"> 5 <style> 6 7 @keyframes bg { 8 from { background-color: rgb(254, 0, 0); } 9 to { background-color: rgb(0 254, 0); } 10 } 11 .item { 12 flex-grow: 1; 13 width: 2em; 14 height: 2em; 15 background: #888; 16 animation: bg linear; 17 animation-timeline: view(); 18 animation-range: contain; 19 } 20 21 .inline .item { 22 animation-timeline: view(inline); 23 } 24 25 .scroller { 26 width: 10em; 27 height: 10em; 28 outline: 1px solid; 29 margin: 1em; 30 overflow: auto; 31 display: inline-flex; 32 vertical-align: top; 33 flex-direction: column; 34 gap: 1em; 35 resize: vertical; 36 } 37 38 .inline { 39 resize: horizontal; 40 flex-direction: row; 41 } 42 43 .block .spacer { 44 height: 20em; 45 width: 1em; 46 } 47 48 .inline .spacer { 49 width: 20em; 50 height: 1em; 51 } 52 </style> 53 <body> 54 <div class="scroller block"> 55 <div class="item" id="a"></div> 56 <div class="item" id="b"></div> 57 <div class="item" id="c"></div> 58 </div> 59 60 <div class="scroller inline"> 61 <div class="item" id="d"></div> 62 <div class="item" id="e"></div> 63 <div class="item" id="f"></div> 64 </div> 65 66 <br> 67 68 <div class="scroller block"> 69 <div class="item" id="g"></div> 70 <div class="item" id="h"></div> 71 </div> 72 73 <div class="scroller inline"> 74 <div class="item" id="i"></div> 75 <div class="item" id="j"></div> 76 </div> 77 </body> 78 <script src="/resources/testharness.js"></script> 79 <script src="/resources/testharnessreport.js"></script> 80 <script src="/web-animations/testcommon.js"></script> 81 <script type="text/javascript"> 82 promise_test(async t => { 83 let anims = document.getAnimations(); 84 await Promise.all(anims.map(anim => anim.ready)); 85 await waitForNextFrame(); 86 87 const expected_results = [ 88 { id: "a", progress: 1.0, bg: 'rgb(0, 254, 0)' }, 89 { id: "b", progress: 0.5, bg: 'rgb(127, 127, 0)' }, 90 { id: "c", progress: 0.0, bg: 'rgb(254, 0, 0)' }, 91 { id: "d", progress: 1.0, bg: 'rgb(0, 254, 0)' }, 92 { id: "e", progress: 0.5, bg: 'rgb(127, 127, 0)' }, 93 { id: "f", progress: 0.0, bg: 'rgb(254, 0, 0)' }, 94 { id: "g", progress: 1.0, bg: 'rgb(0, 254, 0)' }, 95 { id: "h", progress: 0.0, bg: 'rgb(254, 0, 0)' }, 96 { id: "i", progress: 1.0, bg: 'rgb(0, 254, 0)' }, 97 { id: "j", progress: 0.0, bg: 'rgb(254, 0, 0)' } 98 ]; 99 100 expected_results.forEach(result => { 101 const element = document.getElementById(result.id); 102 const anim = element.getAnimations()[0]; 103 assert_approx_equals(anim.effect.getComputedTiming().progress, 104 result.progress, 1e-3, 105 `${result.id}: Unexpected progress`); 106 assert_equals(getComputedStyle(element).backgroundColor, 107 result.bg, `${result.id}: Mismatched background color`); 108 }); 109 110 }, 'Stability of animated elements aligned to the bounds of a contain region'); 111 </script> 112 </html>