third_party/WebKit/LayoutTests/fast/inline/fixed-pos-moves-with-abspos-parent-relative-ancestor.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         #wrap {
   6             position: relative;
   7             width: 400px;
   8             height: 200px;
   9             border: 2px solid black;
  10         }
  11
  12         #outer {
  13             position: absolute;
  14             width:200px;
  15             height:200px;
  16             background-color:grey;
  17         }
  18
  19         #inner {
  20             width: 100px;
  21             height: 100px;
  22             background-color:green;
  23             position: fixed;
  24         }
  25
  26         #outer p {
  27             margin-left: 110px;
  28         }
  29     </style>
  30 </head>
  31 <body>
  32     <div id='wrap'>
  33         <div id='outer'>
  34             <div>
  35                 <div id='inner'></div>
  36                 <p>Foo</p>
  37             </div>
  38         </div>
  39     </div>
  40     <div id="output">Failure</div>
  41     <script>
  42         if (window.testRunner) {
  43             testRunner.dumpAsText();
  44         }
  45
  46         function measure() {
  47             var output = document.getElementById("output");
  48             if (document.getElementById('inner').offsetLeft == 210) {
  49                 output.innerHTML = "Success"
  50             }
  51         }
  52
  53         document.getElementById('outer').style.left = '200px';
  54         measure();
  55     </script>
  56 </body>
  57 </html>