Quelle has-basic.html Sprache: HTML

products/sources/formale Sprachen/C/Firefox/testing/web-platform/tests/css/selectors/has-basic.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Basic matching behavior of :has pseudo class</title>
<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">

<main id=main>
  <div id=a class="ancestor">
    <div id=b class="parent ancestor">
      <div id=c class="sibling descendant">
        <div id=d class="descendant"></div>
      </div>
      <div id=e class="target descendant"></div>
    </div>
    <div id=f class="parent ancestor">
      <div id=g class="target descendant"></div>
    </div>
    <div id=h class="parent ancestor">
      <div id=i class="target descendant"></div>
      <div id=j class="sibling descendant">
        <div id=k class="descendant"></div>
      </div>
    </div>
  </div>
</main>

<script>
  function formatElements(elements) {
    return elements.map(e => e.id).sort().join();
  }

  // Test that |selector| returns the given elements in #main.
  function test_selector_all(selector, expected) {
    test(function() {
      let actual = Array.from(main.querySelectorAll(selector));
      assert_equals(formatElements(actual), formatElements(expected));
    }, `${selector} matches expected elements`);
  }

  // Test that |selector| returns the given element in #main.
  function test_selector(selector, expected) {
    test(function() {
      assert_equals(main.querySelector(selector), expected);
    }, `${selector} matches expected element`);
  }

  // Test that |selector| returns the given closest element.
  function test_closest(node, selector, expected) {
    test(function() {
      assert_equals(node.closest(selector), expected);
    }, `closest(${selector}) returns expected element`);
  }

  // Test that |selector| returns matching status.
  function test_matches(node, selector, expected) {
    test(function() {
      assert_equals(node.matches(selector), expected);
    }, `${selector} matches expectedly`);
  }

  test_selector_all(':has(#a)', []);
  test_selector_all(':has(.ancestor)', [a]);
  test_selector_all(':has(.target)', [a, b, f, h]);
  test_selector_all(':has(.descendant)', [a, b, c, f, h, j]);
  test_selector_all('.parent:has(.target)', [b, f, h]);
  test_selector_all(':has(.sibling ~ .target)', [a, b]);
  test_selector_all('.parent:has(.sibling ~ .target)', [b]);
  test_selector_all(':has(:is(.target ~ .sibling .descendant))', [a, h, j]);
  test_selector_all('.parent:has(:is(.target ~ .sibling .descendant))', [h]);
  test_selector_all('.sibling:has(.descendant) ~ .target', [e]);
  test_selector_all(':has(> .parent)', [a]);
  test_selector_all(':has(> .target)', [b, f, h]);
  test_selector_all(':has(> .parent, > .target)', [a, b, f, h]);
  test_selector_all(':has(+ #h)', [f]);
  test_selector_all('.parent:has(~ #h)', [b, f]);
  test_selector('.sibling:has(.descendant)', c);
  test_closest(k, '.ancestor:has(.descendant)', h);
  test_matches(h, ':has(.target ~ .sibling .descendant)', true);
</script>

Messung V0.5

¤ Dauer der Verarbeitung: 0.4 Sekunden ¤

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.