backdrop-dynamic-style-change.html (691B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="match" href="backdrop-dynamic-style-change-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 top: 100px; 15 left: 100px; 16 height: 100px; 17 width: 100px; 18 background-color: red; 19 } 20 21 .green::backdrop { 22 background-color: green; 23 } 24 </style> 25 </head> 26 <body> 27 Test dynamic changes to ::backdrop style. The test passes if there is a green box below. 28 <dialog></dialog> 29 <script> 30 dialog = document.querySelector('dialog'); 31 dialog.showModal(); 32 dialog.classList.add('green'); 33 </script> 34 </body> 35 </html>