layout/reftests/invalidation/negative-w-component.html

   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>