third_party/WebKit/LayoutTests/dialog/top-layer-display-none.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 dialog {
   6     height: 150px;
   7     width: 150px;
   8 }
   9
  10 ::backdrop {
  11     display: none;
  12 }
  13
  14 .red {
  15     background-color: red;
  16     top: 200px;
  17 }
  18
  19 #bottomDialog {
  20     background-color: blue;
  21     top: 50px;
  22     display: none;
  23 }
  24
  25 #topDialog {
  26     background-color: green;
  27     top: 100px;
  28     left: 50px;
  29 }
  30 </style>
  31 </head>
  32 <body>
  33 This tests that a top layer element is not rendered if it, or an ancestor, has display: none.
  34 It passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
  35
  36 <dialog id="hiddenDialog" class="red" style="display: none;"></dialog>
  37 <div id="container">
  38     <div>
  39         <dialog id="displayNoneChild1" class="red"></dialog>
  40         <dialog id="displayNoneChild2" class="red"></dialog>
  41     </div>
  42 </div>
  43 <dialog id="bottomDialog"></dialog>
  44 <dialog id="topDialog"></dialog>
  45 <script>
  46 document.getElementById('hiddenDialog').showModal();
  47 document.getElementById('displayNoneChild1').showModal();
  48 document.getElementById('container').style.display = 'none';
  49 document.getElementById('displayNoneChild2').showModal();
  50
  51 // Test that stacking works even if an element is added to the top layer when it has no renderer.
  52 document.getElementById('bottomDialog').showModal();
  53 document.getElementById('topDialog').showModal();
  54 document.getElementById('bottomDialog').style.display = 'block';
  55 </script>
  56 </body>
  57 </html>