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