third_party/WebKit/LayoutTests/dialog/backdrop-dynamic-style-change.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 dialog {
   6     visibility: hidden;
   7 }
   8
   9 ::backdrop {
  10     position: absolute;
  11     top: 100px;
  12     left: 100px;
  13     height: 100px;
  14     width: 100px;
  15     background-color: red;
  16 }
  17
  18 .green::backdrop {
  19     background-color: green;
  20 }
  21 </style>
  22 </head>
  23 <body>
  24 Test dynamic changes to ::backdrop style. The test passes if there is a green box below.
  25 <dialog></dialog>
  26 <script>
  27 dialog = document.querySelector('dialog');
  28 dialog.showModal();
  29 dialog.classList.add('green');
  30 </script>
  31 </body>
  32 </html>