src/third_party/WebKit/LayoutTests/transitions/resources/opacity-transform-transitions-inside-iframe-inner.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4 <style>
   5     #background {
   6         width: 200px;
   7         height: 200px;
   8         display: block;
   9         background-color: green;
  10     }
  11     .overlay {
  12         width: 50px;
  13         height: 50px;
  14         background-color: rgba(255, 255, 255, 1);
  15         -webkit-transition: opacity 1s;
  16     }
  17
  18     #popup {
  19         width: 20px;
  20         height: 20px;
  21         background-color: red;
  22         border-radius: 6px;
  23         -webkit-transition: -webkit-transform 1s;
  24     }
  25
  26     .transparent {
  27         opacity: 0;
  28     }
  29
  30     [hidden] {
  31         display: none;
  32     }
  33
  34     .overlay.transparent .page {
  35         transform: scale(1) translateY(0px);
  36     }
  37
  38 </style>
  39 <script type="text/javascript" charset="utf-8">
  40     function runTest()
  41     {
  42         var solid_color_overlay = document.getElementById("solid_color_overlay");
  43         solid_color_overlay.removeAttribute('hidden');
  44
  45         var popup = document.getElementById("popup");
  46         popup.removeAttribute('hidden');
  47
  48         // NOTE: This is a hacky way to force the container to layout which
  49         // will allow us to trigger the webkit transition.
  50         // See crbug.com/324685
  51         solid_color_overlay.scrollTop;
  52         solid_color_overlay.classList.remove('transparent');
  53
  54         // dump the pixel in the middle of the transition
  55         if (window.internals) {
  56             window.internals.forceCompositingUpdate(document);
  57             window.internals.pauseAnimations(0.5);
  58         }
  59         triggerPixelResults();
  60     }
  61
  62     function triggerPixelResults()
  63     {
  64         parent.postMessage("TriggerPixelResults", '*');
  65     }
  66
  67     window.addEventListener('load', runTest, false);
  68 </script>
  69 </head>
  70 <body>
  71 <div id="background">
  72     <div id="solid_color_overlay" class="overlay transparent" hidden=true>
  73         <div id="popup" class="page" hidden=true></div>
  74     </div>
  75 </div>
  76 </body>
  77 </html>