dialog-open-pseudo-invalidation.html (446B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel=help href="https://drafts.csswg.org/selectors-4/#open-state"> 4 <link rel="match" href="dialog-open-pseudo-invalidation-ref.html"> 5 6 <p>The dialog should be open and green:</p> 7 <dialog>Dialog</dialog> 8 9 <style> 10 dialog { 11 background-color: red; 12 } 13 dialog:open { 14 background-color: green; 15 } 16 </style> 17 18 <script> 19 const d = document.querySelector('dialog'); 20 d.show(); 21 d.blur(); 22 </script>