<title>CSS Basic User Interface Test: interactivity:inert blocks click events</title>

<link rel="help" href="https://drafts.csswg.org/css-ui-4/#inertness">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

#inert {

interactivity: inert;

width: 100px;

height: 100px;

background: lime;

}

<div id="inert"></div>

let clicked = false;

inert.addEventListener('click', () => clicked = true);

promise_test(async () => {

try {

await test_driver.click(inert);

assert_false(clicked);

} catch (e) {

// test driver detects inert elements as unclickable and throws an error

assert_false(clicked);

}

}, "No click event for interactivity:inert element");

promise_test(async () => {

inert.style.interactivity = 'auto';

await test_driver.click(inert);

assert_true(clicked);

}, "Click event should work after interactivity change");