third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/top-layer-position-relative.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .green-box {
   6     background-color: green;
   7     height: 50px;
   8     width: 50px;
   9     border: none;
  10     padding: 0;
  11     margin: 0;
  12 }
  13
  14 #left-div {
  15     position: absolute;
  16     top: 100px;
  17     left: 100px;
  18 }
  19
  20 #middle-dialog {
  21     position: relative;
  22     top: 100px;
  23     left: 150px;
  24 }
  25
  26 #right-dialog {
  27     position: relative;
  28     top: 100px;
  29     left: 200px;
  30 }
  31 </style>
  32 <script src="../../../resources/check-layout.js"></script>
  33 </head>
  34 <body onload="checkLayout('dialog')">
  35 <p>Bug <a href="http://webkit.org/b/106538">106538</a>: Top layer fails for inline elements
  36 <p>This tests that position 'relative' computes to 'absolute' in the top layer. The test passes if you see a single green box.</p>
  37 <div id="left-div" class="green-box"></div>
  38 <dialog id="middle-dialog" class="green-box" data-offset-x="150" data-offset-y="100"></dialog>
  39 <dialog id="right-dialog" class="green-box" data-offset-x="200" data-offset-y="100"></dialog>
  40 <script>
  41 document.getElementById('middle-dialog').showModal();
  42 var rightDialog = document.getElementById('right-dialog');
  43 rightDialog.showModal();
  44 rightDialog.style.position = 'absolute';
  45 </script>
  46 </body>
  47 </html>