blob: 06a0347d4500ac3222abc7fe5036c83e91be8916 [file] [log] [blame]
<!DOCTYPE html>
dialog {
visibility: hidden;
::backdrop {
position: absolute;
height: 100px;
width: 100px;
background: red;
/* This shouldn't be matched, dialog is not the parent of ::backdrop.
* It is given high specificity so we actually test something.
#dialog-parent > #dialog > ::backdrop,
#dialog-parent > #dialog ::backdrop {
background: red;
#dialog-parent > ::backdrop {
top: 100px;
left: 100px;
background: green;
#backdrop-ancestor ::backdrop {
top: 100px;
left: 300px;
background: green;
Test ::backdrop used in descendant selectors. The test passes if there are two green boxes and no red.
<div id="dialog-parent">
<dialog id="dialog"></dialog>
<div id="backdrop-ancestor">
var dialogs = document.querySelectorAll('dialog');
for (var i = 0; i < dialogs.length; ++i)