src/third_party/WebKit/LayoutTests/fast/sub-pixel/transformed-iframe-copy-on-scroll.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style type="text/css" media="screen">
   5 .subpixelPusher {
   6     position: relative;
   7     top: 0.4px;
   8     z-index: 1;
   9 }
  10 .container {
  11     display: inline-block;
  12     padding-left: 80px;
  13     padding-top: 10px;
  14 }
  15 .transform {
  16   transform: rotate3d(0, 0, 1, 45deg);
  17 }
  18 </style>
  19 <script src="../../resources/run-after-display.js" type="text/javascript"></script>
  20 <script>
  21 if (window.testRunner) {
  22   testRunner.waitUntilDone();
  23   testRunner.dumpAsTextWithPixelResults();
  24   internals.settings.setMockScrollbarsEnabled(true);
  25 }
  26
  27 function setupIframes() {
  28   setupIframe(document.getElementById('iframe1').contentWindow.document);
  29   setupIframe(document.getElementById('iframe2').contentWindow.document);
  30   document.getElementById('iframe1').contentWindow.scrollTo(0, 10);
  31 }
  32
  33 function setupIframe(iframe) {
  34   iframe.open('text/html', 'replace');
  35   iframe.write("<!DOCTYPE html>\n<html><body style=\"background-color: silver;height: 1000px;\"></body>");
  36   iframe.close();
  37 }
  38
  39 function repaintTest() {
  40   document.getElementById('iframe1').contentWindow.scrollTo(0, 0);
  41   document.getElementById('iframe2').contentWindow.scrollTo(0, 10);
  42   if (window.testRunner)
  43     testRunner.notifyDone();
  44 }
  45 </script>
  46 </head>
  47 <body onload="setupIframes();runAfterDisplay(repaintTest);">
  48   <p>The iframes below should remain grey with no repaint artifacts when scrolling.</p>
  49   <div>
  50     <div class="container">
  51       <div class="transform">
  52         <div class="subpixelPusher">
  53           <div class="subpixelPusher">
  54             <iframe id="iframe1"  style="width: 150px; height: 200px;"></iframe>
  55           </div>
  56         </div>
  57       </div>
  58     </div>
  59     <div class="container">
  60       <div class="subpixelPusher">
  61         <div class="subpixelPusher">
  62           <div class="subpixelPusher">
  63             <div class="transform">
  64               <div class="subpixelPusher">
  65                 <div class="subpixelPusher">
  66                   <div class="subpixelPusher">
  67                     <div class="transform">
  68                       <div class="subpixelPusher">
  69                         <iframe id="iframe2"  style="width: 150px; height: 200px;"></iframe>
  70                       </div>
  71                     </div>
  72                   </div>
  73                 </div>
  74               </div>
  75             </div>
  76           </div>
  77         </div>
  78       </div>
  79     </div>
  80   </div>
  81 </body>
  82 </html>