third_party/WebKit/LayoutTests/fast/repaint/obscured-background-no-repaint.html

   1 <html>
   2 <head>
   3 <script src="../../resources/run-after-layout-and-paint.js"></script>
   4 <script src="resources/text-based-repaint.js"></script>
   5 <style type="text/css">
   6     #test1 div {
   7         height: 100px;
   8         width: 100px;
   9     }
  10     #test1 .parent {
  11         background-image: url(resources/animated.gif)
  12     }
  13     #test1 .child {
  14         background-color: green;
  15     }
  16
  17     #test2 .parent {
  18         position: relative;
  19         height: 100px;
  20         width: 100px;
  21         background-image: url(resources/animated.gif);
  22         background-repeat: no-repeat;
  23         background-position: center;
  24     }
  25
  26     #test2 .child {
  27         background-color: green;
  28         position: relative;
  29         left: 25px;
  30         top: 25px;
  31         height: 50px;
  32         width: 50px;
  33     }
  34     #test3 img {
  35         background-image: url(resources/animated.gif)
  36     }
  37     #test4 .parent {
  38         position: relative;
  39         height: 100px;
  40         width: 100px;
  41         background-color: red;
  42         background-repeat: no-repeat;
  43         background-position: center;
  44         background-image: url(resources/animated.gif)
  45     }
  46 </style>
  47 <script>
  48     // Test that obscured animated gif does not trigger repaints.
  49     if (window.testRunner)
  50         testRunner.waitUntilDone();
  51     window.testIsAsync = true;
  52     function repaintTest()
  53     {
  54         runAfterLayoutAndPaint(finishRepaintTest);
  55     }
  56
  57     function start() {
  58         if (!window.testRunner || !window.internals)
  59             return;
  60
  61         var img = new Image();
  62         img.onload = runRepaintTest;
  63         img.src = "resources/animated.gif";
  64     }
  65 </script>
  66 </head>
  67 <body onload="start()">
  68 <div id="test1">
  69     <div class="parent">
  70         <div class="child">
  71         </div>
  72     </div>
  73 </div>
  74 <div id="test2">
  75     <div class="parent">
  76         <div class="child">
  77         </div>
  78     </div>
  79 </div>
  80 <div id="test3">
  81     <img src="resources/apple.jpg">
  82 </div>
  83 <div id="test4">
  84     <div class="parent">
  85         <a>
  86             <div></div>
  87             <div>
  88                 <img src="resources/apple.jpg">
  89             </div>
  90         </a>
  91     </div>
  92 </div>
  93 </body>
  94 </html>