1 files changed, 362 insertions, 0 deletions
diff --git a/testing/web-platform/tests/resize-observer/notify.html b/testing/web-platform/tests/resize-observer/notify.html
new file mode 100644
index 0000000000..7f0e448540
--- /dev/null
+++ b/testing/web-platform/tests/resize-observer/notify.html
@@ -0,0 +1,362 @@
+<!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();
+}
+
+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(() => { guard.done(); });
+
+</script>