will-change-stacking-context-opacity-2.html (1067B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: will-change: opacity should create a stacking context for inlines.</title> 4 <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> 5 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1119651"> 6 <link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> 7 <link rel="match" href="green-square-100-by-100-ref.html"> 8 <style> 9 html, body { margin: 0; } 10 .indicator { 11 position: absolute; 12 width: 100px; 13 height: 100px; 14 background: green; 15 z-index: 1; 16 } 17 .will-change-opacity { 18 will-change: opacity; 19 width: 100px; 20 height: 100px; 21 } 22 .top { 23 position: absolute; 24 width: 100px; 25 height: 100px; 26 background: red; 27 z-index: 3; 28 } 29 </style> 30 31 <div class="indicator"></div> 32 <span class="will-change-opacity"> 33 <!-- Because will-change: opacity creates a stacking context, this child 34 remains on bottom even though it has a higher z-index than the indicator 35 box. --> 36 <div class="top"></div> 37 </span>