third_party/WebKit/LayoutTests/fast/repaint/fixed-child-of-transformed-scrolled.html

   1 <!DOCTYPE html>
   2 <script src="resources/text-based-repaint.js"></script>
   3 <script>
   4 function repaintTest() {
   5   document.getElementById('fixed').style.backgroundColor = 'green';
   6 }
   7 onload = function() {
   8   document.getElementById('transformed').scrollTop = 50;
   9   runRepaintTest();
  10 }
  11 </script>
  12 <style>
  13 #transformed {
  14   position: absolute;
  15   top: 50px;
  16   left: 100px;
  17   transform: translateX(0);
  18   overflow: scroll;
  19   width: 300px;
  20   height: 300px;
  21 }
  22 #fixed {
  23   position: fixed;
  24   top: 150px;
  25   left: 100px;
  26   width: 100px;
  27   height: 100px;
  28   background-color: red;
  29 }
  30 #relative {
  31   position: relative;
  32   top: 50px;
  33   left: 50px;
  34 }
  35 /* to make the transformed container scrollable */
  36 #content {
  37   width: 1000px;
  38   height: 1000px;
  39 }
  40 </style>
  41 Tests invalidation of a fixed-position child of a transformed scrolled element.
  42 Passes if there is a green box at the center of the scrollable area.
  43 <div id="transformed">
  44   <div id="fixed"></div>
  45   <div id="content"></div>
  46 </div>