1042104-1.html (984B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <head> 4 <style> 5 #container { 6 height: 500px; 7 width: 500px; 8 position: relative; 9 overflow: hidden; 10 } 11 #panel { 12 position:absolute; 13 height: 100%; 14 width: 100%; 15 top: 0; 16 left: 0; 17 transform: translateX(-500px); 18 background-color: yellow; 19 } 20 #tog { 21 position: absolute; 22 height: 50px; 23 width: 50px; 24 left: 0; 25 bottom: 0; 26 background-color: black; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="container"> 32 <div id="panel"> 33 <div style="width:300px; height:50px; background:blue;"></div> 34 </div> 35 </div> 36 <div id="tog"></div> 37 <script> 38 console.log(panel.getBoundingClientRect()); 39 panel.style.transform = "translateX(-450px)"; 40 console.log(panel.getBoundingClientRect()); 41 panel.style.transform = "translateX(-400px)"; 42 function doTest() { 43 panel.style.transform = "translateX(0)"; 44 tog.style.visibility = "hidden"; 45 document.documentElement.removeAttribute("class"); 46 } 47 window.addEventListener("MozReftestInvalidate", doTest); 48 </script>