perspective-split-by-zero-w-ref.html (1235B)
1 <!DOCTYPE html> 2 <title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 6 <style> 7 html, body { 8 margin: 0; 9 padding: 0; 10 height: 100%; 11 width: 100%; 12 } 13 html { overflow: hidden } 14 body { 15 perspective: 500px; 16 perspective-origin: 400px 299px; 17 background: rgb(200, 200, 200); 18 } 19 div { 20 width: 1140px; 21 height: 990px; 22 transform-style: preserve-3d; 23 position: absolute; 24 top: 299.5px; 25 left: 400px; 26 transform: translate3d(-570px, -495px, 500px) rotateY(64.24deg) translateY(23px) rotateX(90deg); 27 background-image: url('support/tile-bg.png'); 28 background-size: 100% 100%; 29 } 30 31 p.patch { 32 margin: 0; 33 position: absolute; 34 background: red; 35 height: 200px; 36 width: 800px; 37 left: 0px; 38 top: 400px; 39 z-index: -1; 40 } 41 </style> 42 43 <div></div> 44 45 <!-- 46 This reference is the same as the test, but with this additional red 47 patch underneath it (in z-order). This means that if any content is 48 missing when drawing the test, the red patch will show through and the 49 test will fail. But if all the content is drawn, then the test will 50 pass. 51 --> 52 <p class="patch"></p>