<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>CSS Test: 'contain: paint' with 'display: contents'.</title> <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com"> <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint"> <link rel="match" href="contain-paint-ignored-cases-no-principal-box-001-ref.html"> <meta name="assert" content="Contain:paint should have no effect when no principle box is generated."> <style> div { position: relative; width: 100px; } #div1, #div3 { background-color: #cfc; height: 100px; } #div1 { z-index: 5; } #div2 { display: contents; contain: paint; background-color: #fdd; height: 100px; top: -20px; } #div2_1 { background-color: #ffc; z-index: 6; top: -10px; height: 100px; } #div2_2 { z-index: 3; position: absolute; top: -15px; width: 40px; height: 300px; background-color: #ddf; } #div3 { z-index: 2; top: -50px; } </style> </head> <body> <div id="div1"></div> <div id="div2"> <div id="div2_1"></div> <div id="div2_2"></div> </div> <div id="div3"></div> </body> </html>