update_hover_after_layout_change.html

<!DOCTYPE html>
<script src='../../resources/gesture-util.js'></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<style>
#blue {
    background-color: rgb(0, 0, 255);
    position: absolute;
    left: 75px;
    top: 75px;
    height: 100px;
    width: 100px;
}
#blue:hover {
    background-color: rgb(255, 255, 0);
}
</style>

<script>
var eventList = [];
var x = 100;
var y = 100;

function addBlue() {
  var blue = document.createElement('div');
  blue.id = "blue";
  var events = ['mouseover', 'mousemove', 'mouseout', 'mouseenter', 'mouseleave'];
  events.forEach(function (event) {
      blue.addEventListener(event, addMouseEvents);
  });
  document.body.appendChild(blue);
}

function addMouseEvents(event) {
  eventList.push(event.type);
}

promise_test (async () => {
  document.addEventListener('click', addBlue);
  await mouseClickOn(x, y);
  var result = eventList.join();
  assert_true(result == 'mouseover,mouseenter');
  assert_true(document.getElementById("blue").matches(':hover'));
}, 'Tests that the mouseover event is fired and the element has hover effect when the element underneath the mouse cursor is changed.');
</script>
chromium/third_party/blink/web_tests/fast/events/update_hover_after_layout_change.html
