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

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: Added test for moving dom inside eventloop 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
« third_party/WebKit/LayoutTests/resize-observer/eventloop.html ('K') | « third_party/WebKit/LayoutTests/resize-observer/eventloop.html ('k') | third_party/WebKit/LayoutTests/resize-observer/observe.html » ('j') | third_party/WebKit/Source/core/frame/FrameView.cpp » ('J')
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..dcc29e26d21d0fde09019090816f51ee3f4b035b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/resize-observer/notify.html
@@ -0,0 +1,365 @@
+<!doctype html>
+<head>
+ <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>
+</head>
+<body>
+<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';
+
+var helper = new ResizeTestHelper();
+
+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() {
+ helper.createTest(
+ "test0: notification ordering",
+ setup => {
+ helper.observer.observe(t3);
+ helper.observer.observe(t2);
+ helper.observer.observe(t1);
+ t1.style.width = "5px";
+ t3.style.width = "5px";
+ t2.style.width = "5px";
+
+ },
+ entries => {
+ 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");
+ helper.observer.disconnect();
+ t1.style.width = "100px";
+ t2.style.width = "100px";
+ t3.style.width = "100px";
+ test1();
+ }
+ );
+ helper.nextTestRaf();
+}
+
+function test1() {
+ helper.createTest(
+ "test1: display:none triggers notification",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(t1);
+ },
+ entries => {
+ // initial observation happens here
+ helper.nextTestRaf();
+ }
+ );
+ helper.createTest(
+ "display:none triggers notification, part 2",
+ setup => {
+ t1.style.display = "none";
+ },
+ entries => {
+ helper.observer.disconnect();
+ t1.style.display = "";
+ test2();
+ }
+ );
+ helper.nextTestRaf();
+}
+
+
+function test2() {
+ helper.createTest(
+ "test2: remove/reinsert",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(t1);
+ },
+ entries => {
+ // initial observation
+ helper.nextTestRaf();
+ }
+ );
+ helper.createTest(
+ "removeChild triggers notification",
+ setup => {
+ t1.parentNode.removeChild(t1);
+ },
+ entries => {
+ assert_equals(entries[0].target, t1);
+ helper.nextTestRaf();
+ }
+ );
+ helper.createTest(
+ "appendChild triggers notification",
+ setup => {
+ document.body.appendChild(t1);
+ },
+ entries => {
+ assert_equals(entries[0].target, t1);
+ test3();
+ }
+ );
+ helper.nextTestRaf();
+}
+
+
+function test3() {
+ helper.createTest(
+ "test3: dimensions match",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(t1);
+ t1.style.width = "200.5px";
+ t1.style.height = "100px";
+ t1.style.paddingLeft = "20px";
+ t1.style.paddingTop = "10px";
+ },
+ entries => {
+ 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);
+ test4();
+ }
+ );
+ helper.nextTestRaf();
+}
+
+function test4() {
+ helper.createTest(
+ "test4: transform do not cause notifications",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(t2);
+ },
+ entries => {
+ // initial notification
+ helper.nextTestRaf();
+ }
+ );
+ helper.createTest(
+ "transform do not cause notification, part 2",
+ setup => {
+ t2.classList.add("transform");
+ },
+ entries => {
+ assert_unreached("transform must not trigger notifications");
+ },
+ timeout => {
+ t2.classList.remove("transform");
+ test5();
+ }
+ );
+ helper.nextTestRaf();
+
+}
+
+
+function test5() {
+ helper.createTest(
+ "test5: moving an element does not trigger notifications",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(abs);
+ },
+ entries => {
+ // initial observation
+ helper.nextTest();
+ }
+ );
+ helper.createTest(
+ "moving an element does not trigger notifications, part 2",
+ setup => {
+ abs.style.top = "20.33px";
+ abs.style.left = "20.33px";
+ },
+ entries => {
+ assert_unreached("movement should not cause resize notifications");
+ },
+ timeout => {
+ test6();
+ }
+ );
+ helper.nextTestRaf();
+}
+
+function test6() {
+ helper.createTest(
+ "test6: inline element does not notify",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(inline);
+ helper.observer.observe(t1);
+ t1.style.width = "66px";
+ inline.style.width = "66px";
+ },
+ entries => {
+ assert_equals(entries.length, 1, "inline elements must not trigger notifications");
+ assert_equals(entries[0].target, t1, "inline elements must not trigger notifications");
+ helper.nextTestRaf();
+ }
+ );
+ helper.createTest(
+ "inline element that becomes block should notify",
+ setup => {
+ inline.style.display = "block";
+ },
+ entries => {
+ assert_equals(entries[0].target, inline);
+ helper.observer.disconnect();
+ test7();
+ }
+ );
+ helper.nextTestRaf();
+}
+
+function test7() {
+ let test = async_test("test7: unobserve inside notify callback");
+
+ let notifyStep = 0;
+ let notify = entries => {
+ switch(notifyStep) {
+ case 0:
+ // initial setup
+ window.requestAnimationFrame( _ => {
+ t1.style.width = "777px";
+ t2.style.width = "777px";
+ ro.unobserve(t1);
+ });
+ break;
+ case 1:
+ test.step(_ => {
+ assert_equals(entries.length, 1, "only t2 is observed");
+ assert_equals(entries[0].target, t2, "only t2 is observed");
+ test8();
+ ro.disconnect();
+ test.done();
+ });
+ break;
+ }
+ notifyStep++;
+ }
+
+ var ro;
+ window.requestAnimationFrame( _ => {
+ ro = new ResizeObserver(notify);
+ ro.observe(t1);
+ ro.observe(t2);
+ });
+}
+
+function test8() {
+ let test = async_test("test8: observe inside notify callback");
+
+ let notifyStep = 0;
+ let notify = entries => {
+ switch(notifyStep) {
+ case 0:
+ // intial setup
+ window.requestAnimationFrame( _ => {
+ ro.observe(t2);
+ t2.style.width = "888px";
+ });
+ break;
+ case 1:
+ test.step( _ => {
+ assert_equals(entries.length, 1, "only t2 is observed");
+ assert_equals(entries[0].target, t2, "only t2 is observed");
+ ro.disconnect();
+ test9();
+ test.done();
+ });
+ break;
+ }
+ notifyStep++;
+ }
+ var ro;
+ window.requestAnimationFrame( _ => {
+ ro = new ResizeObserver(notify);
+ ro.observe(t1);
+ });
+}
+
+function test9() {
+ let test = async_test("test9: disconnect inside notify callback");
+
+ let notifyStep = 0;
+ let timeoutId = 0;
+ let notify = entries => {
+ switch(notifyStep) {
+ case 0:
+ // initial setup
+ t1.style.width = "888px";
+ ro.disconnect();
+ timeoutId = test.step_timeout(_ => {
+ test10();
+ test.done();
+ }, ResizeTestHelper.TIMEOUT);
+ break;
+ case 1:
+ window.clearTimeout(timeoutId);
+ test.step( _ => {
+ assert_unreached("there should be no notifications after disconnect");
+ });
+ break;
+ }
+ notifyStep++;
+ }
+
+ var ro;
+ window.requestAnimationFrame( _ => {
+ ro = new ResizeObserver(notify);
+ ro.observe(t1);
+ });
+}
+
+function test10() {
+ var parent = t1.parentNode;
+ helper.createTest(
+ "test10: element notifies when parent removed",
+ setup => {
+ helper.observer.observe(t3);
+ },
+ entries => {
+ helper.nextTestRaf();
+ }
+ );
+ helper.createTest(
+ "test10, part 2: element notifies when parent removed",
+ setup => {
+ t1.parentNode.removeChild(t1);
+ },
+ entries => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].target, t3);
+ helper.observer.disconnect();
+ parent.appendChild(t1);
+ }
+ );
+ helper.nextTestRaf();
+}
+
+test0();
+
+</script>
+</body>
« third_party/WebKit/LayoutTests/resize-observer/eventloop.html ('K') | « third_party/WebKit/LayoutTests/resize-observer/eventloop.html ('k') | third_party/WebKit/LayoutTests/resize-observer/observe.html » ('j') | third_party/WebKit/Source/core/frame/FrameView.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698