third_party/WebKit/LayoutTests/fast/repaint/outline-child-repaint.html

   1 <html>
   2 <head>
   3     <script src="resources/text-based-repaint.js" type="text/javascript"></script>
   4     <script type="text/javascript">
   5         function repaintTest()
   6         {
   7             var container = document.getElementById('container');
   8             container.style.top = "250px";
   9         }
  10     </script>
  11     <style type="text/css" media="screen">
  12       #container {
  13         position: absolute;
  14         left: 10px;
  15         top: 150px;
  16         width: 200px;
  17         height: 50px;
  18       }
  19       .outlined {
  20         outline: 10px solid green;
  21         height: 30px;
  22         background-color: #DDD;
  23       }
  24
  25       #underlay {
  26         position: absolute;
  27         top: 240px;
  28         left: 0px;
  29         width: 200px;
  30         height: 30px;
  31         border: 10px solid red;
  32       }
  33     </style>
  34 </head>
  35 <body onload="runRepaintTest();">
  36     <p>
  37         This is a repaint test for <i><a href="https://bugs.webkit.org/show_bug.cgi?id=22159">https://bugs.webkit.org/show_bug.cgi?id=22159</a>
  38         Repaint issue with outlines in child objects</i>.
  39     </p>
  40     <p>If the test passes, you should not see any red below</p>
  41     <hr>
  42
  43     <div id="underlay">
  44     </div>
  45     <div id="container">
  46       <div class="outlined">
  47       </div>
  48     </div>
  49 </body>
  50 </html>