jetstream-scroll.html (3389B)
1 <!DOCTYPE html> 2 <html class="reftest-wait" reftest-async-scroll><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover"> 5 <style> 6 figure { 7 position: relative; 8 width: 100vw; 9 left: 50%; 10 transform: translate(-50%); 11 } 12 13 figure img { 14 filter: url(#invertLightness) 15 } 16 17 main { scrollbar-width: none; width: 400px; height: 500px; overflow: auto; border: 1px solid black; } 18 </style> 19 20 </head> 21 22 <body> 23 24 <svg xmlns="http://www.w3.org/2000/svg"> <style>svg{display:block;width:0;height:0}</style> 25 <filter id="invertLightness" x="0" y="0" style="color-interpolation-filters:sRGB"> 26 <feColorMatrix type="matrix" in="SourceGraphic" result="red" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1"> 27 </feColorMatrix> 28 <feColorMatrix type="matrix" in="SourceGraphic" result="green" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1"> 29 </feColorMatrix> 30 <feColorMatrix type="matrix" in="SourceGraphic" result="blue" values="0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1"> 31 </feColorMatrix> 32 <feBlend in="red" in2="green" mode="lighten" result="maxyellow"></feBlend> 33 <feBlend in="maxyellow" in2="blue" mode="lighten" result="max"></feBlend> 34 <feBlend in="red" in2="green" mode="darken" result="minyellow"></feBlend> 35 <feBlend in="minyellow" in2="blue" mode="darken" result="min"></feBlend> 36 <feComponentTransfer result="adjustment" in="min"> 37 <feFuncR type="linear" intercept="1" slope="-1"></feFuncR> 38 <feFuncG type="linear" intercept="1" slope="-1"></feFuncG> 39 <feFuncB type="linear" intercept="1" slope="-1"></feFuncB> 40 </feComponentTransfer> 41 <feComposite operator="arithmetic" in="SourceGraphic" in2="adjustment" k1="0" k2="1" k3="1" k4="-1" result="channelAdjustment"></feComposite> 42 <feComposite operator="arithmetic" in="channelAdjustment" in2="max" k1="0" k2="1" k3="-1" k4="1" result="finalColors"> 43 </feComposite> 44 <feComposite operator="in" in="finalColors" in2="SourceAlpha"></feComposite> 45 </filter> 46 </svg> 47 <main id="content" 48 reftest-displayport-x="0" 49 reftest-displayport-y="0" 50 reftest-displayport-w="400" 51 reftest-displayport-h="500"> 52 <div> 53 <article> 54 <div> 55 <div style="height: 1000px"></div> 56 <figure> 57 <img id=telement src="data:image/webp;base64,UklGRugAAABXRUJQVlA4TNsAAAAvOEuOAQfQxhK3sf8BBW3bMOUPvzuO6H+G//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//qwEA" alt="JetStream 2 Scores. Bigger is Better."> 58 </figure> 59 </div> 60 </article> 61 </div> 62 </main> 63 </body> 64 <script> 65 66 document.getElementById("content").scrollTop = 800; 67 document.addEventListener("MozReftestInvalidate", function() { 68 document.getElementById("content").scrollTop = 1100; 69 document.documentElement.removeAttribute("class"); 70 }); 71 </script> 72 73 </html>