display-contents-pseudo-click-target.html (1267B)
1 <!doctype html> 2 <title>Clicking a display: contents pseudo-element targets that element</title> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1959364"> 6 <link rel="help" href="https://drafts.csswg.org/css-display-4/#valdef-display-contents"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <style> 13 div { 14 width: 100px; 15 height: 100px; 16 background-color: green; 17 position: relative; 18 } 19 a { 20 display: contents; 21 22 &::after { 23 content: ""; 24 position: absolute; 25 inset: 0; 26 } 27 } 28 </style> 29 <div> 30 <a href="#"></a> 31 </div> 32 <script> 33 promise_test(async function() { 34 let target = document.querySelector("a"); 35 let hitLink = false; 36 target.addEventListener("click", function(e) { 37 hitLink = true; 38 e.preventDefault(); 39 }); 40 await test_driver.click(target.parentElement); 41 assert_true(hitLink, "Link should've been clicked"); 42 }); 43 </script>