clip-no-stacking-context.html (984B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Clip does not create a stacking context</title> 4 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip"> 5 <link rel="match" href="clip-no-stacking-context-ref.html"> 6 <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> 7 8 <style> 9 #bottom { 10 position: absolute; 11 width: 100px; 12 height: 100px; 13 background: red; 14 z-index: 1; 15 } 16 #clip { 17 position: absolute; 18 clip: rect(0px, 100px, 100px, 0px); 19 } 20 #top { 21 position: absolute; 22 width: 100px; 23 height: 100px; 24 background: green; 25 z-index: 3; 26 } 27 </style> 28 29 <p>Expected: A green box with no red visible.</p> 30 <div id="bottom"></div> 31 <!-- If #clip creates a stacking context, it will be below #bottom (which has a 32 higher z-index) which will force #top to be below #bottom as well. This 33 should not happen because #clip should not create a stacking context. --> 34 <div id="clip"> 35 <div id="top"></div> 36 </div>