preserve3d-and-flattening-z-order-004.html (999B)
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 .flattener { 27 transform: translateX(0); 28 } 29 .child { 30 background: green; 31 } 32 </style> 33 34 <p>Pass if there is NO red below:</p> 35 36 <div class="outer"> 37 <div class="sibling"></div> 38 <div class="flattener"><div class="child"></div></div> 39 </div>