Quelle slotchange.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/testing/web-platform/tests/shadow-dom/slotchange.html

<!DOCTYPE html>
<title>Shadow DOM: slotchange Events</title>
<meta name="author" title="Hayato Ito" href="mailto:hayato@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/shadow-dom.js"></script>

<div id="test1">
  <div id="host1">
    <template data-mode="open">
      <slot id="s1" name="slot1"></slot>
    </template>
    <div id="c1" slot="slot1"></div>
  </div>
</div>

<script>
function arraysEqual(a, b) {
  if (a === b) return true;
  if (a == null || b == null) return false;
  if (a.length !== b.length) return false;
  for (var i = 0; i < a.length; ++i) {
    if (a[i] !== b[i]) return false;
  }
  return true;
}
function doneIfSlotChange(slots, expectedAssignedNodes, test) {
  let matched = Array(slots.length).fill(false);
  for (let i=0; i<slots.length; i++) {
    slots[i].addEventListener('slotchange', test.step_func((e) => {
      matched[i] = arraysEqual(slots[i].assignedNodes(), expectedAssignedNodes[i]);
      if (matched.every(v => v)) {
        test.done();
      }
    }))
  }
}

async_test((test) => {
  let n = createTestTree(test1);
  removeWhiteSpaceOnlyTextNodes(n.test1);

  let d1 = document.createElement('div');
  d1.setAttribute('slot', 'slot1');

  n.host1.shadowRoot.onslotchange = test.step_func(() => {
    arraysEqual(n.s1.assignedNodes(), [n.c1, d1]);
    test.done()
  });

  n.host1.appendChild(d1);
}, 'slotchange event: Append a child to a host (onslotchange).');

async_test((test) => {
  let n = createTestTree(test1);
  removeWhiteSpaceOnlyTextNodes(n.test1);

  let d1 = document.createElement('div');
  d1.setAttribute('slot', 'slot1');

  doneIfSlotChange([n.s1], [[n.c1, d1]], test);

  n.host1.appendChild(d1);
}, 'slotchange event: Append a child to a host.');

async_test((test) => {
  let n = createTestTree(test1);
  removeWhiteSpaceOnlyTextNodes(n.test1);

  doneIfSlotChange([n.s1], [[]], test);

  n.c1.remove();
}, 'slotchange event: Remove a child from a host.');

async_test((test) => {
  let n = createTestTree(test1);
  removeWhiteSpaceOnlyTextNodes(n.test1);

  n.c1.remove();

  doneIfSlotChange([n.s1], [[]], test);
}, 'slotchange event: Remove a child before adding an event listener.');

async_test((test) => {
  let n = createTestTree(test1);
  removeWhiteSpaceOnlyTextNodes(n.test1);

  doneIfSlotChange([n.s1], [[]], test);

  n.c1.setAttribute('slot', 'slot-none');
}, 'slotchange event: Change slot= attribute to make it un-assigned.');

async_test((test) => {
  let n = createTestTree(test1);
  removeWhiteSpaceOnlyTextNodes(n.test1);

  doneIfSlotChange([n.s1], [[]], test);

  n.s1.setAttribute('name', 'slot-none');
}, 'slotchange event: Change slot\'s name= attribute so that none is assigned.');
</script>

<div id="test2">
  <div id="host1">
    <template data-mode="open">
      <slot id="s1" name="slot1"></slot>
    </template>
    <div id="c2" slot="slot2"></div>
  </div>
</div>

<script>
async_test((test) => {
  let n = createTestTree(test2);
  removeWhiteSpaceOnlyTextNodes(n.test2);

  doneIfSlotChange([n.s1], [[n.c2]], test);

  n.c2.setAttribute('slot', 'slot1');
}, 'slotchange event: Change slot= attribute to make it assigned.');

async_test((test) => {
  let n = createTestTree(test2);
  removeWhiteSpaceOnlyTextNodes(n.test2);

  doneIfSlotChange([n.s1], [[n.c2]], test);

  n.s1.setAttribute('name', 'slot2');
}, 'slotchange event: Change slot\'s name= attribute so that a node is assigned to the slot.');
</script>

<div id="test_fallback">
  <div id="host1">
    <template data-mode="open">
      <slot id="s1"></slot>
    </template>
  </div>
</div>

<script>
async_test((test) => {
  let n = createTestTree(test_fallback);
  removeWhiteSpaceOnlyTextNodes(n.test_fallback);

  doneIfSlotChange([n.s1], [[]], test);

  n.s1.appendChild(document.createElement('div'));
}, 'slotchange event: Change fallback content - assignedNodes still empty.');
</script>

<div id="test_fallback2">
  <div id="host1">
    <template data-mode="open">
      <slot id="s1">
        <div id="f1"></div>
      </slot>
    </template>
  </div>
</div>

<script>
async_test((test) => {
  let n = createTestTree(test_fallback2);
  removeWhiteSpaceOnlyTextNodes(n.test_fallback2);

  doneIfSlotChange([n.s1], [[]], test);

  n.f1.remove();
}, 'slotchange event: Remove a fallback content - assignedNodes still empty.');
</script>

<div id="test_fallback3">
  <div id="host1">
    <template data-mode="open">
      <slot id="s2">
        <slot id="s1">
          <div id="f1"></div>
        </slot>
      </slot>
    </template>
  </div>
</div>

<script>
async_test((test) => {
  let n = createTestTree(test_fallback3);
  removeWhiteSpaceOnlyTextNodes(n.test_fallback3);

  doneIfSlotChange([n.s1, n.s2], [[],[]], test);

  n.s1.appendChild(document.createElement('div'));
}, 'slotchange event: Add a fallback content to nested slots - assignedNodes still empty.');

async_test((test) => {
  let n = createTestTree(test_fallback3);
  removeWhiteSpaceOnlyTextNodes(n.test_fallback3);

  doneIfSlotChange([n.s1, n.s2], [[],[]], test);

  n.f1.remove();
}, 'slotchange event: Remove a fallback content from nested slots - assignedNodes still empty.');
</script>

<div id="test3">
  <div id="host1">
    <template id="shadowroot" data-mode="open">
      <slot id="s1" name="slot1"></slot>
    </template>
    <div id="c1" slot="slot1"></div>
  </div>
</div>

<script>
async_test((test) => {
  let n = createTestTree(test3);
  removeWhiteSpaceOnlyTextNodes(n.test3);

  doneIfSlotChange([n.s1], [[]], test);

  let slot = document.createElement('slot');
  slot.setAttribute('name', 'slot1');
  n.shadowroot.insertBefore(slot, n.s1);
}, "slotchange event: Insert a slot before an existing slot.");
</script>

<div id="test4">
  <div id="host1">
    <template id="shadowroot" data-mode="open">
      <slot id="s1" name="slot1"></slot>
      <slot id="s2" name="slot1"></slot>
    </template>
    <div id="c1" slot="slot1"></div>
  </div>
</div>

<script>
async_test((test) => {
  let n = createTestTree(test4);
  removeWhiteSpaceOnlyTextNodes(n.test4);

  doneIfSlotChange([n.s2], [[n.c1]], test);

  n.s1.remove();
}, "slotchange event: Remove a preceding slot.");
</script>

<div id="test5">
  <div id="host1">
    <template data-mode="open">
      <div id="host2">
        <template data-mode="open">
          <slot id="s2" name="slot2"></slot>
        </template>
        <slot id="s1" name="slot1" slot="slot2"></slot>
      </div>
    </template>
    <div id="c1" slot="slot1"></div>
  </div>
</div>

<script>
async_test((test) => {
  let n = createTestTree(test5);
  removeWhiteSpaceOnlyTextNodes(n.test5);

  doneIfSlotChange([n.s1, n.s2], [[],[n.s1]], test);

  n.c1.remove();
}, "slotchange event: A slot is assigned to another slot.");
</script>

<div id="test6">
  <div id="host1">
    <template data-mode="open">
      <div id="host2">
        <template data-mode="open">
          <slot id="s2" name="slot2"></slot>
        </template>
        <slot id="s1" name="slot1" slot="slot2"></slot>
      </div>
    </template>
  </div>
</div>

<script>
async_test((test) => {
  let n = createTestTree(test6);
  removeWhiteSpaceOnlyTextNodes(n.test6);

  doneIfSlotChange([n.s2], [[]], test);

  n.s1.remove();
}, "slotchange event: Slotchange should be fired if assigned nodes are changed.");
</script>

<div id="test7">
  <div id="host1">
    <template data-mode="open">
      <div id="host2">
        <template data-mode="open">
          <slot id="s2" name="slot2"></slot>
        </template>
        <slot id="s1" name="slot1" slot="slot2"></slot>
      </div>
    </template>
  </div>
</div>

<script>
async_test((test) => {
  let n = createTestTree(test7);
  removeWhiteSpaceOnlyTextNodes(n.test7);

  let d1 = document.createElement('div');
  d1.setAttribute('slot', 'slot1');
  doneIfSlotChange([n.s1, n.s2], [[d1],[n.s1]], test);

  n.host1.appendChild(d1);
}, "slotchange event: Child content is added to nested slots.");
</script>

Messung V0.5 in Prozent

¤ Dauer der Verarbeitung: 0.5 Sekunden ¤

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.