preserve3d-and-flattening-z-order-001.html (980B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> 4 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> 5 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 6 <link rel="author" title="Google" href="http://www.google.com/"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> 8 <meta name="assert" content="Elements are drawn in the correct z-order."> 9 <link rel="match" href="reference/green.html"> 10 11 <style> 12 div { 13 position: absolute; 14 height: 100px; 15 width: 100px; 16 top: 0; 17 left: 0; 18 background: red; 19 } 20 .outer { 21 position: relative; 22 } 23 .outer, .sibling { 24 transform-style: preserve-3d; 25 } 26 </style> 27 28 <p>Pass if there is NO red below:</p> 29 30 <div class="outer"> 31 <div class="sibling"></div> 32 <div class="flattener"><div class="child"></div></div> 33 <div class="sibling" style="background: green"></div> 34 </div>