negative-w-component.html (1421B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Change a layer's transform making negative w component.</title> 5 6 <style> 7 8 body { 9 background-color: white; 10 overflow: hidden; 11 } 12 13 #outer { 14 perspective: 500px; 15 perspective-origin: 350px 250px; 16 width: 700px; 17 height: 500px; 18 display: block; 19 top: 10px; 20 left: 10px; 21 position: absolute; 22 overflow: visible; 23 } 24 25 #container1 { 26 transform-style: preserve-3d; 27 transform: translateX(-50px) translateZ(350px) rotateY(-90deg); 28 } 29 30 #container2 { 31 transform-style: preserve-3d; 32 transform: translateY(-200px) translateX(50px) translateZ(350px) rotateY(90deg); 33 } 34 35 #scale { 36 transform-style: preserve-3d; 37 } 38 39 .negw { 40 transform: translateZ(1px); 41 } 42 43 .posw { 44 transform: translateZ(-500px);; 45 } 46 47 #dummy { 48 transform-style: preserve-3d; 49 transform: translateY(150px); 50 } 51 52 #square1, #square2 { 53 background-color: red; 54 width: 700px; 55 height: 200px; 56 } 57 58 </style> 59 60 <body> 61 62 <div id="outer"> 63 <div id="scale" class="negw"> 64 <div id="dummy"> 65 <div id="container1"> 66 <div id="square1"></div> 67 </div> 68 <div id="container2"> 69 <div id="square2"></div> 70 </div> 71 </div> 72 </div> 73 </div> 74 75 <script> 76 77 var scale = document.getElementById("scale"); 78 79 function doTest() { 80 scale.className = "posw"; 81 document.documentElement.removeAttribute("class"); 82 } 83 84 document.addEventListener("MozReftestInvalidate", doTest); 85 86 </script>