<!DOCTYPE html> <html reftest-async-scroll reftest-displayport-x="0" reftest-displayport-y="0" reftest-displayport-w="800" reftest-displayport-h="2000" reftest-async-scroll-x="0" reftest-async-scroll-y="200"> <title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title> <style> body { margin: 0; height: 4000px; } .blueBox { margin: 10px; width: 200px; height: 200px; box-sizing: border-box; border: 1px solid blue; } .opacity { opacity: 0.8; } .absoluteClip { position: absolute; top: 300px; left: 100px; width: 200px; height: 200px; clip: rect(auto auto auto auto); } .fixed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(lime 300px, black 0); } .absoluteCyanBox { position: absolute; top: 200px; left: 400px; width: 200px; height: 200px; box-sizing: border-box; border: 1px solid cyan; } </style> <div class="blueBox" reftest-assigned-layer="page-background"></div> <div class="absoluteClip"> <div class="opacity"> <div class="fixed"></div> </div> </div> <div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div>