range-boundary.html (4763B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="match" href="range-boundary-ref.html"> 7 <title></title> 8 </head> 9 <style type="text/css"> 10 @keyframes transform { 11 0% { transform: translateX(25px); } 12 100% { transform: translateX(50px); } 13 } 14 15 @keyframes background { 16 0% { background-color: #99f; } 17 100% { background-color: #9f9; } 18 } 19 20 .scroller { 21 display: inline-block; 22 border: 2px solid black; 23 height: 100px; 24 width: 100px; 25 overflow: hidden; 26 } 27 .spacer { 28 height: 300px; 29 margin: 0; 30 } 31 .box { 32 background: gray; 33 height: 50px; 34 width: 50px; 35 margin: 0; 36 animation: transform auto, background auto; 37 animation-timeline: view(), view(); 38 animation-range: entry 0% entry 100%, contain 0% contain 100%; 39 } 40 </style> 41 <body> 42 <!-- scroll to bottom 43 top-box: 44 transform: none (after phase) 45 bg-color: #9f9 (at active-after boundary with inclusive endpoint) 46 bottom-box: 47 transform: 100px (at active-after boundary with inclusive endpoint) 48 bg-color: #99f (at active-before boundary with inclusive endpoint) 49 --> 50 <div id="scroller-1" class="scroller"> 51 <div class="spacer"></div> 52 <div class="box"></div> 53 <div class="box"></div> 54 </div> 55 <!-- scroll to top 56 top-box: 57 transform: none (after phase) 58 bg-color: gray (at active-after boundary with exclusive endpoint) 59 bottom-box: 60 transform: none (at active-after boundary with exclusive endpoint) 61 bg-color: #99f (at active-before boundary with inclusive endpoint) 62 --> 63 <div id="scroller-2" class="scroller"> 64 <div class="box"></div> 65 <div class="box"></div> 66 <div class="spacer"></div> 67 </div> 68 <br> 69 <!-- scroll to midpoint 70 top-box: 71 transform: none (after phase) 72 bg-color: gray (at active-after boundary with exclusive endpoint) 73 bottom-box: 74 transform: none (at active-after boundary with exclusive endpoint) 75 bg-color: #99f (at active-before boundary with inclusive endpoint) 76 --> 77 <div id="scroller-3" class="scroller"> 78 <div class="spacer"></div> 79 <div class="box"></div> 80 <div class="box"></div> 81 <div class="spacer"></div> 82 </div> 83 <!-- scroll to bottom + reverse 84 top-box: 85 transform: none (before phase) 86 bg-color: gray (at active-before boundary with exclusive endpoint) 87 bottom-box: 88 transform: none (at active-before boundary with exclusive endpoint) 89 bg-color: #9f9 (at active-after boundary with inclusive endpoint) 90 --> 91 <div id="scroller-4" class="scroller"> 92 <div class="spacer"></div> 93 <div class="box reverse"></div> 94 <div class="box reverse"></div> 95 </div> 96 <br> 97 <!-- scroll to top + reverse 98 top-box: 99 transform: none (before phase) 100 bg-color: #99f (at active-before boundary with inclusive endpoint) 101 bottom-box: 102 transform: 25px (at active-before boundary with inclusive endpoint) 103 bg-color: #9f9 (at active-after boundary with inclusive endpoint) 104 --> 105 <div id="scroller-5" class="scroller"> 106 <div class="box reverse"></div> 107 <div class="box reverse"></div> 108 <div class="spacer"></div> 109 </div> 110 <!-- scroll to midpoint + reverse 111 top-box: 112 transform: none (before phase) 113 bg-color: gray (at active-before boundary with exclusive endpoint) 114 bottom-box: 115 transform: none (at active-before boundary with exclusive endpoint) 116 bg-color: #9f9 (at active-before boundary with inclusive endpoint) 117 --> 118 <div id="scroller-6" class="scroller"> 119 <div class="spacer"></div> 120 <div class="box reverse"></div> 121 <div class="box reverse"></div> 122 <div class="spacer"></div> 123 </div> 124 </body> 125 <script src="/common/reftest-wait.js"></script> 126 <script src="/web-animations/testcommon.js"></script> 127 <script> 128 function scrollTo(scroller_id, relative_offset) { 129 const scroller = document.getElementById(scroller_id); 130 const max_scroll = scroller.scrollHeight - scroller.clientHeight; 131 scroller.scrollTop = relative_offset * max_scroll; 132 } 133 134 window.onload = async () => { 135 await waitForCompositorReady(); 136 document.querySelectorAll('.reverse').forEach(elem => { 137 elem.getAnimations().forEach(anim => { 138 anim.reverse(); 139 }); 140 }); 141 // Playing forward 142 scrollTo('scroller-1', 1); 143 scrollTo('scroller-2', 0); 144 scrollTo('scroller-3', 0.5); 145 // Playing reverse 146 scrollTo('scroller-4', 1); 147 scrollTo('scroller-5', 0); 148 scrollTo('scroller-6', 0.5); 149 await waitForNextFrame(); 150 takeScreenshot(); 151 }; 152 </script> 153 </html>