position-fixed-in-scroll-container.html (1130B)
1 <!DOCTYPE html> 2 <html reftest-async-scroll> 3 <!-- In this test, the div |fixed| is fixed with respect to the 4 page's root scroll frame, but there's also a subframe |scrollbox| 5 which is async-scrolled and which generates a container layer 6 (because of the opacity), so that its async transform is on an 7 ancestor layer of |fixed|'s layer. We are testing that this 8 async transform is correctly unapplied to keep |fixed| fixed. --> 9 <style> 10 11 body { 12 height: 10000px; 13 } 14 15 .outer-opacity { 16 opacity: 0.8; 17 } 18 19 .scrollbox { 20 border: 1px solid black; 21 width: 200px; 22 height: 400px; 23 overflow: scroll; 24 scrollbar-width: none; 25 } 26 27 .inner-opacity { 28 height: 1000px; 29 opacity: 0.8; 30 } 31 32 .fixed { 33 background: blue; 34 width: 100px; 35 height: 100px; 36 position: fixed; 37 } 38 39 </style> 40 <div class="outer-opacity"> 41 <div class="scrollbox" 42 reftest-displayport-x="0" reftest-displayport-y="0" 43 reftest-displayport-w="200" reftest-displayport-h="1000" 44 reftest-async-scroll-x="0" reftest-async-scroll-y="50"> 45 <div class="inner-opacity"> 46 <div class="fixed"></div> 47 </div> 48 </div> 49 </div> 50 </html>