961887-3.html (758B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>Test container background searching with clipped display items</title> 5 6 <style> 7 8 div { 9 box-sizing: border-box; 10 width: 200px; 11 height: 200px; 12 margin-bottom: -200px; 13 } 14 15 #outer { 16 background-color: red; 17 } 18 19 #container { 20 will-change: opacity; 21 } 22 23 #backgroundCover { 24 background-color: lime; 25 } 26 27 #roundedClip { 28 overflow: hidden; 29 border-radius: 20px; 30 } 31 32 #clippedItem { 33 background-color: lime; 34 } 35 36 #separatePaintedLayer { 37 position: sticky; 38 border: 1px solid lime; 39 } 40 41 </style> 42 43 <div id="outer"> 44 <div id="container"> 45 <div id="backgroundCover"></div> 46 <div id="roundedClip"> 47 <div id="clippedItem"></div> 48 </div> 49 <div id="separatePaintedLayer"></div> 50 </div> 51 </div>