1<!DOCTYPE html> 2 3<html> 4<head> 5 <style> 6 #container, #container2 { 7 height: 100px; 8 width: 100px; 9 margin: 10px 0; 10 -webkit-perspective: 1000px; 11 } 12 13 #container.transformed, #container2.transformed { 14 -webkit-transform: translateX(0); 15 } 16 17 .box { 18 margin-bottom: 5px; 19 height: 100px; 20 width: 100px; 21 background-color: green; 22 opacity: 0.5; 23 } 24 </style> 25 <script> 26 function doTest() 27 { 28 window.setTimeout(function() { 29 document.getElementById('container').className = 'transformed'; 30 document.getElementById('container2').className = ''; 31 32 if (window.layoutTestController) 33 layoutTestController.notifyDone(); 34 }, 100); 35 } 36 window.addEventListener('load', doTest, false); 37 </script> 38</head> 39<body> 40 <p>All squares should have the same pale green color></p> 41 <div class="box"></div> 42 <div id="container"> 43 <div class="box"> 44 </div> 45 </div> 46 47 <div id="container2" class="transformed"> 48 <div class="box"> 49 </div> 50 </div> 51</body> 52</html> 53