preserve3d-and-flattening-z-order-008.html (1612B)
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 <meta name="fuzzy" content="maxDifference=1; totalPixels=0-3244"> 10 <link rel="match" href="reference/green.html"> 11 12 <style> 13 div, span { 14 height: 100px; 15 width: 100px; 16 background: red; 17 } 18 span { 19 display: inline-block; 20 vertical-align: bottom; 21 } 22 .outer, .sibling { 23 transform-style: preserve-3d; 24 } 25 .sibling { 26 margin-top: -100px; 27 transform: translateZ(-10px); 28 } 29 30 .flattener:first-child { 31 background: linear-gradient(to bottom, green 0%, green 25%, red 25%, red 100%); 32 } 33 .flattener:first-child > .child { 34 background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%); 35 margin-top: 50px; 36 height: 50px; 37 } 38 .flattener:last-child { 39 background: linear-gradient(to bottom, green 0px, green 25px, red 25px, red 75px); 40 margin-top: -75px; 41 height: 75px; 42 } 43 .flattener:last-child > .child { 44 background: green; 45 margin-top: 50px; 46 height: 25px; 47 } 48 </style> 49 50 <p>Pass if there is NO red below:</p> 51 52 <div class="outer"> 53 <div class="flattener"><span class="child"></span></div> 54 <div class="sibling"></div> 55 <div class="flattener"><span class="child"></span></div> 56 </div>