third_party/WebKit/LayoutTests/fast/sub-pixel/float-list-inside.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             body {
   6
   7             }
   8             nav {
   9                 position: absolute;
  10                 top: 100px;
  11                 width: 400px;
  12                 height: 40px;
  13                 border: 1px solid blue;
  14             }
  15             nav > ul {
  16                 float: right;
  17                 list-style: inside;
  18             }
  19             nav > ul > li {
  20                 float: left;
  21             }
  22             nav > ul > li > a {
  23                 text-decoration: none;
  24             }
  25         </style>
  26         <script src="../../resources/js-test.js"></script>
  27     </head>
  28     <body>
  29         <nav>
  30             <ul>
  31                 <li><a href="#">About Us</a></li>
  32                 <li><a href="#">Contact Us</a></li>
  33             </ul>
  34         </nav>
  35         <script>
  36             if (window.testRunner)
  37                 testRunner.waitUntilDone();
  38
  39             var list = document.getElementsByTagName('ul')[0];
  40             var firstLinkTop = list.firstElementChild.getBoundingClientRect().top;
  41             var lastLinkTop = list.lastElementChild.getBoundingClientRect().top;
  42
  43             if (firstLinkTop == lastLinkTop)
  44                 testPassed('Links are on the same line.');
  45             else
  46                 shouldBe('firstLinkTop', 'lastLinkTop');
  47
  48             window.onload = function() {
  49                 list.style.marginRight = '-10px';
  50                 list.offsetTop;
  51                 list.style.marginRight = 'auto';
  52
  53                 if (firstLinkTop == list.firstElementChild.getBoundingClientRect().top)
  54                     testPassed('First link didn\'t move after layout.');
  55                 else
  56                     shouldBe('list.firstElementChild.getBoundingClientRect().top', 'firstLinkTop');
  57
  58                 if (lastLinkTop == list.lastElementChild.getBoundingClientRect().top)
  59                     testPassed('Last link didn\'t move after layout.');
  60                 else
  61                     shouldBe('list.lastElementChild.getBoundingClientRect().top', 'lastLinkTop');
  62
  63                 if (window.testRunner)
  64                     testRunner.notifyDone();
  65             };
  66         </script>
  67     </body>
  68 </html>