Quelle test_slotted_mouse_event.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/dom/events/test/test_slotted_mouse_event.html

<!doctype html>
<meta charset="utf-8">
<title>Bug 1481500: mouse enter / leave events in slotted content</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<script>
// We move the mouse from the #host to #target, then to #child-target.
//
// By the time we get to #child-target, we shouldn't have fired any mouseleave.
function runTests() {
  let iframe = document.createElement('iframe');
  iframe.style.width = "600px";
  iframe.style.height = "600px";
  document.body.appendChild(iframe);
  iframe.onload = () => frameLoaded(iframe);
  iframe.srcdoc = `
    <style>
      body {
        padding: 20px;
      }
      #child-target {
        width: 80px;
        height: 80px;
        background: yellow;
      }
    </style>
    <div id="host"><div id="target"><div id="child-target"></div></div></div>
  `;
}

function frameLoaded(iframe) {
  let host = iframe.contentDocument.getElementById('host');
  let target = iframe.contentDocument.getElementById('target');
  let childTarget = iframe.contentDocument.getElementById('child-target');
  let sawHost = false;
  let sawTarget = false;
  let finished = false;

  host.attachShadow({ mode: 'open' }).innerHTML = `
    <style>
      :host {
        width: 500px;
        height: 500px;
        background: purple;
      }
      ::slotted(div) {
        width: 200px;
        height: 200px;
        background: green;
      }
    </style>
    <slot></slot>
  `;

  synthesizeMouse(document.body, 10, 10, { type: "mousemove" });

  host.addEventListener("mouseenter", e => {
    if (finished)
      return;
    sawHost = true;
    ok(true, "Should fire mouseenter on the host.");
  });

  host.addEventListener("mouseleave", e => {
    if (finished)
      return;
    ok(false, "Should not fire mouseleave when moving the cursor to the slotted target");
  });

  target.addEventListener("mouseenter", () => {
    if (finished)
      return;
    ok(sawHost, "Should've seen the hostmouseenter already");
    sawTarget = true;
    ok(true, "Moving the mouse into the target should trigger a mouseenter there");
  });

  target.addEventListener("mouseleave", () => {
    if (finished)
      return;
    ok(false, "Should not fire mouseleave when moving the cursor to the slotted target's child");
  });

  childTarget.addEventListener("mouseenter", () => {
    if (finished)
      return;
    ok(sawTarget, "Should've seen the target mouseenter already");
    finished = true;
    SimpleTest.finish();
  });

  synthesizeMouseAtCenter(host, { type: "mousemove" });
  synthesizeMouseAtCenter(target, { type: "mousemove" });
  synthesizeMouseAtCenter(childTarget, { type: "mousemove" });
}

SimpleTest.waitForExplicitFinish();
window.onload = () => {
  SimpleTest.waitForFocus(runTests);
};
</script>

Messung V0.5

¤ Dauer der Verarbeitung: 0.21 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.