third_party/WebKit/LayoutTests/dialog/backdrop-descendant-selector.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 dialog {
   6     visibility: hidden;
   7 }
   8
   9 ::backdrop {
  10     position: absolute;
  11     height: 100px;
  12     width: 100px;
  13     background: red;
  14 }
  15
  16 /* This shouldn't be matched, dialog is not the parent of ::backdrop.
  17  * It is given high specificity so we actually test something.
  18  */
  19 #dialog-parent > #dialog > ::backdrop,
  20 #dialog-parent > #dialog ::backdrop {
  21     background: red;
  22 }
  23
  24 #dialog-parent > ::backdrop {
  25     top: 100px;
  26     left: 100px;
  27     background: green;
  28 }
  29
  30 #backdrop-ancestor ::backdrop {
  31     top: 100px;
  32     left: 300px;
  33     background: green;
  34 }
  35 </style>
  36 </head>
  37 <body>
  38 Test ::backdrop used in descendant selectors. The test passes if there are two green boxes and no red.
  39
  40 <div id="dialog-parent">
  41     <dialog id="dialog"></dialog>
  42 </div>
  43 <div id="backdrop-ancestor">
  44     <p><span><dialog></dialog></span></p>
  45 </div>
  46 <script>
  47 var dialogs = document.querySelectorAll('dialog');
  48 for (var i = 0; i < dialogs.length; ++i)
  49     dialogs[i].showModal();
  50 </script>
  51 </body>
  52 </html>