clip-path-on-fixed-position-scroll.html (820B)
1 <!DOCTYPE html> 2 <title>CSS Masking: Test out-of-view clip-path above fixed-position element scrolled into view</title> 3 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#fixed-position"> 5 <link rel="help" href="https://crbug.com/1400107"> 6 <link rel="match" href="clip-path-on-fixed-position-scroll-ref.html"> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 } 12 .clip { 13 clip-path: inset(0); 14 } 15 .fixed { 16 position: fixed; 17 background: red; 18 z-index: -1; 19 bottom: 0; 20 } 21 .green { 22 position: relative; 23 background: green; 24 } 25 </style> 26 <div style="height: 800px">Scroll to the bottom. </div> 27 <div class="clip"> 28 <div class="fixed"></div> 29 <div class="green"></div> 30 </div> 31 <script> 32 onload = () => { 33 window.scrollTo(0, 400); 34 }; 35 </script>