third_party/WebKit/LayoutTests/fast/transforms/transform-positioned-container.html

   1 <!DOCTYPE html>
   2 <style>
   3 #old-container {
   4     position: relative;
   5 }
   6
   7 #positioned-child {
   8     position: absolute;
   9 }
  10
  11 #descendant-needing-layout {
  12     display: none;
  13     width: 100px;
  14     height: 100px;
  15     background-color: green;
  16 }
  17 </style>
  18 This test verifies adding transform to a block correctly update container status.
  19 <div id="old-container">
  20     <div id="new-container">
  21         <div id="positioned-child">
  22             <div id="descendant-needing-layout">
  23             </div>
  24         </div>
  25     </div>
  26 </div>
  27 <script>
  28 function runTest() {
  29     document.body.offsetTop;
  30
  31     var newContainer = document.getElementById("new-container");
  32     var descendantNeedingLayout = document.getElementById("descendant-needing-layout");
  33
  34     newContainer.style.transform = "translateX(0)";
  35     descendantNeedingLayout.style.display = "block";
  36 }
  37
  38 runTest();
  39 </script>