Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(78)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/resize-observer/notify.html

Issue 2204503002: ResizeObserver pt6: integration (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Restore missing code that was blown away by rebase Created 4 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/resize-observer/eventloop.html ('k') | third_party/WebKit/LayoutTests/resize-observer/observe.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/resize-observer/notify.html
diff --git a/third_party/WebKit/LayoutTests/resize-observer/notify.html b/third_party/WebKit/LayoutTests/resize-observer/notify.html
new file mode 100644
index 0000000000000000000000000000000000000000..cd06c06c7bac1df94bb5b96c3d92e0a075ff5764
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/resize-observer/notify.html
@@ -0,0 +1,346 @@
+<!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 does not notify",
+ [
+ {
+ setup: observer => {
+ observer.observe(inline);
+ observer.observe(t1);
+ t1.style.width = "66px";
+ inline.style.width = "66px";
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1, "inline elements must not trigger notifications");
+ assert_equals(entries[0].target, t1, "inline elements must not trigger notifications");
+ return true; // Delay next step
+ }
+ },
+ { // "inline element that becomes block should notify",
+ setup: observer => {
+ inline.style.display = "block";
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries[0].target, inline);
+ }
+ }
+ ]);
+ 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 = async_test('guard');
+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>
« no previous file with comments | « third_party/WebKit/LayoutTests/resize-observer/eventloop.html ('k') | third_party/WebKit/LayoutTests/resize-observer/observe.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698