<!DOCTYPE html>
<meta charset="utf-8">
<title>:focus-visible matches on accesskey after a previous element was focused via mouse</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
:focus {
  background: lime;
}
:focus-visible {
  outline: solid 5px blue;
}
</style>

<div id="initial" tabindex="0">Initial</div>
<div id="target" tabindex="0" accesskey="t">Target</div>

<script>

function pressAccessKey(key)
{
    if (navigator.userAgent.search(/\bMac OS X\b/) != -1)
        modifiers = ["ctrlKey", "altKey"];
    else
        modifiers = ["altKey"];
    eventSender.keyDown(key, modifiers);
}

function clickElement(element)
{
    eventSender.mouseMoveTo(element.offsetLeft + element.offsetWidth / 2, element.offsetTop + element.offsetTop / 2);
    eventSender.mouseDown();
    eventSender.mouseUp()
}

test(() => {
    clickElement(initial);
    assert_equals(document.activeElement, initial);
    assert_equals(getComputedStyle(initial).backgroundColor, "rgb(0, 255, 0)", `background-color for ${initial.tagName}#${initial.id} shoult be lime`);
    assert_not_equals(getComputedStyle(initial).outlineColor, "rgb(0, 0, 255)", `outline-color for ${initial.tagName}#${initial.id} shoult NOT be blue`);
}, "Initial element focused via click does NOT match :focus-visible");

test(() => {
    pressAccessKey("t");
    assert_equals(document.activeElement, target);
    assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", `background-color for ${target.tagName}#${target.id} shoult be lime`);
    assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 0, 255)", `outline-color for ${target.tagName}#${target.id} shoult be blue`);
}, "Target element focused via accesskey matches :focus-visible");
</script>