Quelle test_hover_quirk.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/style/test/test_hover_quirk.html

<html>

<head>
  <meta charset="utf-8">
  <title>Test for the :active and :hover quirk</title>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
  <style type="text/css">
    /* Should apply to all elements: */
    #content :hover:first-of-type {
      color: rgb(255, 0, 0);
    }
    #content :-moz-any(:hover) {
      text-transform: lowercase;
    }
    #content :hover::after {
      content: "any element";
    }

    #content :hover:first-of-type .child::after {
      content: "any child";
    }

    #content .parent .child::after {
      content: "wrong" !important;
    }

    #content .parent:hover .child::after {
      content: "any child" !important;
    }

    /* Should apply only to links: */
    #content :hover {
      color: rgb(0, 255, 0) !important;
      text-transform: uppercase !important;
    }
    #content :hover .child::after {
      content: "link child" !important;
    }

    #dynamic-test {
      width: 100px;
      height: 100px;
      background: green;
    }

    #dynamic-test > * {
      width: 100%;
      height: 100%;
      background: red;
    }

    #dynamic-test:hover > * {
      background: rgb(0, 255, 0);
    }

    #dynamic-test-2 :is(button,input,a){
      background-color:yellow !important;
    }

    #dynamic-test-2 :is(button,input,a):hover{
      background-color:lime !important;
    }

    #dynamic-test-2 :is(button,input):focus{
      background-color:skyblue !important;
    }
  </style>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="application/javascript">
    /** Test for the :active and :hover quirk **/
    function test(element, isLink) {
      if (!isLink)
        var styles = {color: "rgb(255, 0, 0)", textTransform: "lowercase",
                      childContent: '"any child"'};
      else
        var styles = {color: "rgb(0, 255, 0)", textTransform: "uppercase",
                      childContent: '"link child"'};

      // Trigger the :hover pseudo-class.
      synthesizeMouseAtCenter(element, {type: "mousemove"});

      var computedStyle = getComputedStyle(element);
      is(computedStyle.color, styles.color, "Unexpected color value");
      is(computedStyle.textTransform, styles.textTransform,
         "Unexpected text-transform value");

      computedStyle = getComputedStyle(element, "::after");
      is(computedStyle.content, '"any element"',
         "Unexpected pseudo-element content");

      computedStyle = getComputedStyle(
          element.getElementsByClassName("child")[0], "::after");
      is(computedStyle.content, styles.childContent,
         "Unexpected pseudo-element content for child");
    }

    SimpleTest.waitForExplicitFinish();
    SimpleTest.waitForFocus(function() {
      test(document.getElementById("span"), false);
      test(document.getElementById("label"), false);
      test(document.getElementById("link"), true);
      test(document.getElementById("div"), false);
      // Dynamic change test.
      // Trigger the :hover pseudo-class.
      synthesizeMouseAtCenter(document.getElementById('dynamic-test'), {type: "mousemove"});
      is(getComputedStyle(document.getElementById('should-be-green-on-hover')).backgroundColor,
         "rgb(0, 255, 0)",
         "Dynamic change should invalidate properly");

      synthesizeMouseAtCenter(document.getElementById('button'), {type: "mousemove"});
      is(getComputedStyle(document.getElementById('button')).backgroundColor,
        "rgb(0, 255, 0)",
        "Button hover should be green");

      synthesizeMouseAtCenter(document.getElementById('input'), {type: "mousemove"});
      is(getComputedStyle(document.getElementById('input')).backgroundColor,
        "rgb(0, 255, 0)",
        "Input hover should be green");

      synthesizeMouseAtCenter(document.getElementById('link-2'), {type: "mousemove"});
      is(getComputedStyle(document.getElementById('link-2')).backgroundColor,
        "rgb(0, 255, 0)",
        "Link hover should be green");
      SimpleTest.finish();
    });
  </script>
</head>
<body>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783213">Mozilla Bug 783213</a>
  <p id="display"></p>
  <div id="dynamic-test">
    <div id="should-be-green-on-hover"></div>
  </div>
  <div id="content">
    <span id="span">Span<span class="child"></span></span><br>
    <label id="label">Label<span class="child"></span></label><br>
    <a id="link" href="#">Link<span class="child"></span></a><br>
    <div id="div" class="parent">Div <span><span class="child"></span></span></div><br>
  </div>
  <div id="dynamic-test-2">
    <button id="button">Button</button>
    <input id="input" value="Input">
    <a id="link-2"href="">Link</a>
  </div>
  <pre id="test"></pre>
</body>
</html>

Messung V0.5 in Prozent

¤ Dauer der Verarbeitung: 0.11 Sekunden (vorverarbeitet am 2026-06-04) ¤

Wurzel

Suchen

PVS Prover

Isabelle Prover

NIST Cobol Testsuite

Cephes Mathematical Library

Vienna Development Method

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.