Quelle notify.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/testing/web-platform/tests/resize-observer/notify.html

<!doctype html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/resizeTestHelper.js"></script>
<style>
  div {
    border: 1px dotted gray
  }
  .transform {
    transform: scale(2,2) rotate(90deg)
  }
</style>
<p>ResizeObserver tests</p>
<div id="target1" style="width:100px;height:100px;">t1
  <div id="target2" style="width:100px;height:100px;">t2
    <div id="target3" style="width:100px;height:100px;">t3
      <span id="inline">inline</span>
    </div>
  </div>
</div>
<div id="absolute" style="width:100.5px;height:100.5px;position:absolute;top:10.3px;left:10.3px"></div>
<script>
'use strict';

let t1 = document.querySelector('#target1');
let t2 = document.querySelector('#target2');
let t3 = document.querySelector('#target3');
let abs = document.querySelector('#absolute');
let inline = document.querySelector('#inline');

function test0() {
  let helper = new ResizeTestHelper(
    "test0: notification ordering",
  [
    {
      setup: observer => {
        observer.observe(t3);
        observer.observe(t2);
        observer.observe(t1);
        t1.style.width = "5px";
        t3.style.width = "5px";
        t2.style.width = "5px";
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 3, "3 resizes");
        assert_equals(entries[0].target, t3, "ordering");
        assert_equals(entries[1].target, t2, "ordering");
        assert_equals(entries[2].target, t1, "ordering");
        observer.disconnect();
        t1.style.width = "100px";
        t2.style.width = "100px";
        t3.style.width = "100px";
      }
    }
  ]);
  return helper.start();
}

function test1() {
  let helper = new ResizeTestHelper(
    "test1: display:none triggers notification",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        t1.style.display = "none";
      },
      notify: (entries, observer) => {
        t1.style.display = "";
      }
    }
  ]);
  return helper.start();
}

function test2() {
  let helper = new ResizeTestHelper(
    "test2: remove/appendChild trigger notification",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    { // "removeChild triggers notification"
      setup: observer => {
        t1.parentNode.removeChild(t1);
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].target, t1);
        return true;  // Delay next step
      }
    },
    { // "appendChild triggers notification",
      setup: observer => {
        document.body.appendChild(t1);
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].target, t1)
      }
    }
  ]);
  return helper.start();
}

function test3() {
  let helper = new ResizeTestHelper(
    "test3: dimensions match",
  [
    {
      setup: observer => {
        observer.observe(t1);
        t1.style.width = "200.5px";
        t1.style.height = "100px";
        t1.style.paddingLeft = "20px";
        t1.style.paddingTop = "10px";
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].contentRect.left,20);
        assert_equals(entries[0].contentRect.top,10);
        assert_between_inclusive(entries[0].contentRect.width, 200.4, 200.6, "width is not rounded");
        assert_equals(entries[0].contentRect.height, 100);
      }
    }
  ]);
  return helper.start();
}

function test4() {
  let helper = new ResizeTestHelper(
    "test4: transform do not cause notifications",
  [
    {
      setup: observer => {
        observer.observe(t2);
      },
      notify: (entries, observer) => {
        return true; // Delay next step
      }
    },
    {
      setup: observer => {
        t2.classList.add("transform");
      },
      notify: (entries, observer) => {
        assert_unreached("transform must not trigger notifications");
      },
      timeout: () => {
        t2.classList.remove("transform");
      }
    }
  ]);
  return helper.start();
}

function test5() {
  let helper = new ResizeTestHelper(
    "test5: moving an element does not trigger notifications",
  [
    {
      setup: observer => {
        observer.observe(abs);
      },
      notify: (entries, observer) => {
        return true; // Delay next step
      }
    },
    {
      setup: observer => {
        abs.style.top = "20.33px";
        abs.style.left = "20.33px";
      },
      notify: (entries, observer) => {
        assert_unreached("movement should not cause resize notifications");
      },
      timeout: () => {
      }
    }
  ]);
  return helper.start();
}

function test6() {
  let helper = new ResizeTestHelper(
    "test6: inline element notifies once with 0x0.",
  [
    {
      setup: observer => {
        observer.observe(inline);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "observing inline element triggers notification");
        assert_equals(entries[0].target, inline, "observing inline element triggers notification");
        assert_equals(entries[0].contentRect.width, 0);
        assert_equals(entries[0].contentRect.height, 0);
        return true; // Delay next step
      }
    },
    {
      setup: observer => {
        inline.style.width = "66px";
      },
      notify: (entries, observer) => {
        assert_unreached("resizing inline element should not cause resize notifications");
      },
      timeout: () => {
        // expected
      }
    },
    { // "inline element that becomes block should notify",
      setup: observer => {
        inline.style.display = "block";
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "inline element becoming a non-zero sized block triggers a notification");
        assert_equals(entries[0].target, inline, "inline element becoming a non-zero sized block triggers a notification");
      }
    }
  ]);
  return helper.start();
}

function test7() {
  let helper = new ResizeTestHelper(
    "test7: unobserve inside notify callback",
  [
    {
      setup: observer => {
        observer.observe(t1);
        observer.observe(t2);
      },
      notify: (entries, observer) => {
        t1.style.width = "777px";
        t2.style.width = "777px";
        observer.unobserve(t1);
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "only t2 is observed");
        assert_equals(entries[0].target, t2, "only t2 is observed");
      }
    }
  ]);
  return helper.start();
}

function test8() {
  let helper = new ResizeTestHelper(
    "test8: observe inside notify callback",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        observer.observe(t2);
        t2.style.width = "888px";
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "only t2 is observed");
        assert_equals(entries[0].target, t2, "only t2 is observed");
      }
    }
  ]);
  return helper.start();
}

function test9() {
  let helper = new ResizeTestHelper(
    "test9: disconnect inside notify callback",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        t1.style.width = "999px";
        observer.disconnect();
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_unreached("there should be no notifications after disconnect");
      },
      timeout: () => {
      }
    }
  ]);
  return helper.start();
}

function test10() {
  var parent = t1.parentNode;
  let helper = new ResizeTestHelper(
    "test10: element notifies when parent removed",
  [
    {
      setup: observer => {
        observer.observe(t3);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        t1.parentNode.removeChild(t1);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].target, t3);
        parent.appendChild(t1);
      }
    }
  ]);
  return helper.start();
}

function test11() {
  let t = createAndAppendElement("div");
  t.style.display = "none";

  let helper = new ResizeTestHelper(
    "test11: display:none element should be notified",
    [
      {
        setup: observer => {
          observer.observe(t);
        },
        notify: entries => {
          assert_equals(entries.length, 1, "1 pending notification");
          assert_equals(entries[0].target, t, "target is t");
          assert_equals(entries[0].contentRect.width, 0, "target width");
          assert_equals(entries[0].contentRect.height, 0, "target height");
        }
      }
    ]);
  return helper.start(() => t.remove());
}

function test12() {
  let t = createAndAppendElement("div");
  t.style.width = "0px";

  let helper = new ResizeTestHelper(
    "test12: element sized 0x0 should be notified",
    [
      {
        setup: observer => {
          observer.observe(t);
        },
        notify: entries => {
          assert_equals(entries.length, 1, "1 pending notification");
          assert_equals(entries[0].target, t, "target is t");
          assert_equals(entries[0].contentRect.width, 0, "target width");
          assert_equals(entries[0].contentRect.height, 0, "target height");
        }
      }
    ]);
  return helper.start(() => t.remove());
}

let guard;
test(_ => {
  assert_own_property(window, "ResizeObserver");
  guard = async_test('guard');
}, "ResizeObserver implemented")

test0()
  .then(() => { return test1(); })
  .then(() => { return test2(); })
  .then(() => { return test3(); })
  .then(() => { return test4(); })
  .then(() => { return test5(); })
  .then(() => { return test6(); })
  .then(() => { return test7(); })
  .then(() => { return test8(); })
  .then(() => { return test9(); })
  .then(() => { return test10(); })
  .then(() => { return test11(); })
  .then(() => { return test12(); })
  .then(() => { guard.done(); });

</script>

quality95%

¤ Dauer der Verarbeitung: 0.5 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 ist noch experimentell.