| <!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| const params = new URLSearchParams(window.location.search); |
| let metaTagContent = 'width=device-width,minimum-scale=1'; |
| if (params.has('resizes-content')) |
| metaTagContent += ',interactive-widget=resizes-content'; |
| else if (params.has('resizes-visual')) |
| metaTagContent += ',interactive-widget=resizes-visual'; |
| else if (params.has('overlays-content')) { |
| metaTagContent += ',interactive-widget=overlays-content'; |
| } |
| |
| let meta = document.createElement('meta'); |
| meta.name = 'viewport'; |
| meta.content = metaTagContent; |
| document.head.appendChild(meta); |
| </script> |
| <script src="view_transition_util.js"></script> |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| input { |
| /* Invisible so that blinking cursor doesn't affect pixel tests */ |
| position: absolute; |
| top: 50px; |
| opacity: 0; |
| } |
| |
| #bottomfixed { |
| position: fixed; |
| left: 20px; |
| bottom: 10px; |
| width: 100px; |
| height: 30px; |
| background-color: coral; |
| view-transition-name: bottom; |
| contain: paint; |
| } |
| |
| #topfixed { |
| position: fixed; |
| left: 20px; |
| top: 10px; |
| width: 100px; |
| height: 30px; |
| background-color: dodgerblue; |
| view-transition-name: top; |
| contain: paint; |
| } |
| |
| #inflow { |
| position: absolute; |
| left: 100px; |
| top: 200px; |
| width: 100px; |
| height: 300px; |
| background-color: rebeccapurple; |
| } |
| |
| /* This element will cover and show the position:fixed viewport to make it |
| * easier to see in screenshot what's being rendered below the keyboard. */ |
| #background { |
| width: 100dvw; |
| height: 100dvh; |
| background-color: whitesmoke; |
| } |
| |
| /* Step function means we'll keep the old snapshots in their initial state |
| * for half the duration, then the new snapshots in their final state for |
| * the last half of the duration. Note that tests pause the animation |
| * and control the progress programmatically so the duration is used only |
| * for live testing. */ |
| ::view-transition-group(*), |
| ::view-transition-new(*), |
| ::view-transition-old(*) { |
| animation-duration: 5s; |
| animation-timing-function: steps(2, jump-none); |
| } |
| </style> |
| <script> |
| updateDOM = function() { |
| document.getElementById("inflow").style.transform = "translateX(100px)"; |
| document.getElementById("bottomfixed").style.transform = "translateX(100px)"; |
| document.getElementById("topfixed").style.transform = "translateX(100px)"; |
| } |
| </script> |
| </head> |
| <body> |
| <div id="background"> |
| <input id="inputElement" type="text"> |
| <div id="inflow"></div> |
| <div id="bottomfixed"></div> |
| <div id="topfixed"></div> |
| </div> |
| </body> |
| </html> |
