backdrop-receives-element-events.html (1251B)
1 <!DOCTYPE html> 2 <html> 3 <title>Test that ::backdrop receives events for the associated element</title> 4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 5 <body> 6 <style> 7 /* ::backdrop takes up whole screen, actual <dialog> is hidden */ 8 dialog { 9 visibility: hidden; 10 pointer-events: none; 11 } 12 13 dialog::backdrop { 14 visibility: visible; 15 pointer-events: initial; 16 background-color: red; 17 top: 0; 18 bottom: 0; 19 left: 0; 20 right: 0; 21 } 22 23 dialog.clicked::backdrop { 24 background-color: green; 25 } 26 </style> 27 <dialog></dialog> 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script src="/resources/testdriver.js"></script> 31 <script src="/resources/testdriver-actions.js"></script> 32 <script src="/resources/testdriver-vendor.js"></script> 33 <script> 34 setup({ single_test: true }); 35 36 const dialog = document.querySelector("dialog"); 37 dialog.showModal(); 38 dialog.addEventListener("click", () => { 39 // Change style for debugging purposes, done() actually makes the test pass 40 dialog.className = "clicked"; 41 done(); 42 }); 43 new test_driver.Actions() 44 .pointerMove(0, 0, {origin: "viewport"}) 45 .pointerDown() 46 .pointerUp() 47 .send(); 48 </script> 49 </body> 50 </html>