src/third_party/WebKit/LayoutTests/compositing/geometry/outline-change.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>untitled</title>
   8   <style type="text/css" media="screen">
   9
  10     #container {
  11       position: relative;
  12       height: 100px;
  13       width: 100px;
  14       margin: 50px;
  15       border: 1px solid black;
  16       transform: translateZ(0);
  17     }
  18
  19     #outer {
  20       position: absolute;
  21       left: -25px;
  22       top: -25px;
  23       height: 50px;
  24       width: 50px;
  25       border: 1px solid blue;
  26     }
  27
  28     #tester {
  29       width: 10px;
  30       height: 10px;
  31     }
  32
  33   </style>
  34   <script type="text/javascript" charset="utf-8">
  35     if (window.testRunner)
  36       testRunner.waitUntilDone();
  37
  38     function test()
  39     {
  40       window.setTimeout(function() {
  41         document.getElementById('tester').style.outline = '5px solid green';
  42         if (window.testRunner)
  43           testRunner.notifyDone();
  44       }, 0);
  45     }
  46     window.addEventListener('load', test, false);
  47   </script>
  48 </head>
  49 <body>
  50
  51 <p>Adding outline should not affect layer positions</p>
  52 <div id="container">
  53   <div id="outer"></div>
  54 </div>
  55 <div id="tester">
  56 </div>
  57
  58 </body>
  59 </html>