<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Test for clicking on an element which is restyled/reframed by mousedown event</title> <script src="/tests/SimpleTest/SimpleTest.js"></script> <script src="/tests/SimpleTest/EventUtils.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> <style> .before-pseudo-element *:active::before { content: ""; display: block; height: 2px; position: absolute; top: -2px; left: 0; width: 100%; } .position-relative *:active { position: relative; top: 1px; } </style> </head> <body> <section class="before-pseudo-element"><a href="about:blank">link</a></section><!-- bug 1398196 --> <section class="before-pseudo-element"><span>span</span></section> <section class="position-relative"><a href="about:blank">link</a></section><!-- bug 1506508 --> <section class="position-relative"><span>span</span></section> <script type="application/javascript"> SimpleTest.waitForExplicitFinish(); SimpleTest.waitForFocus(function doTest() { for (let sectionId of ["before-pseudo-element", "position-relative"]) { for (let element of ["a", "span"]) { let target = document.querySelector(`section.${sectionId} ${element}`); target.scrollIntoView(true); let clicked = false; target.addEventListener("click", (aEvent) => { is(aEvent.target, target, `click event is fired on the <${element}> element in ${sectionId} section as expected`); aEvent.preventDefault(); clicked = true; }, {once: true}); synthesizeMouseAtCenter(target, {}); ok(clicked, `Click event should've been fired on the <${element}> element in ${sectionId} section`); } } SimpleTest.finish(); }); </script> </body> </html>