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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2005593002: Initial ResizeObserver implementation (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix global-interface-listing test Created 4 years, 5 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 | « no previous file | 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..532be33d4bb051e850d6b9bafe4e8094c0904ab6
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/resize-observer/notify.html
@@ -0,0 +1,359 @@
+<!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>
+<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">
+<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');
+
+setup({allow_uncaught_exception: true});
+
+function test0() {
+ helper.createTest(
+ "test0: notification ordering",
+ setup => {
+ helper.observer.disconnect();
+ 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");
+ t1.style.width = "100px";
+ t2.style.width = "100px";
+ t3.style.width = "100px";
+ test1();
+ }
+ );
+}
+
+function test1() {
+ helper.createTest(
+ "test1: display:none triggers notification",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(t1);
+ },
+ entries => {
+ // initial observation happens here
+ }
+ );
+ helper.createTest(
+ "display:none triggers notification, part 2",
+ setup => {
+ t1.style.display = "none";
+ },
+ entries => {
+ // initial observation happens here
+ t1.style.display = "";
+ test2();
+ }
+ );
+}
+
+
+function test2() {
+ helper.createTest(
+ "test2: remove/reinsert",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(t1);
+ },
+ entries => {
+ // initial observation
+ }
+ );
+ helper.createTest(
+ "removeChild triggers notification",
+ setup => {
+ t1.parentNode.removeChild(t1);
+ },
+ entries => {
+ assert_equals(entries[0].target, t1);
+ }
+ );
+ helper.createTest(
+ "appendChild triggers notification",
+ setup => {
+ document.body.appendChild(t1);
+ },
+ entries => {
+ assert_equals(entries[0].target, t1);
+ test3();
+ }
+ );
+}
+
+
+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";
eae 2016/07/13 23:39:47 It would be nice to have a test with borders and m
atotic1 2016/07/15 01:43:17 Done.
+ },
+ 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();
+ }
+ );
+}
+
+function test4() {
+ helper.createTest(
+ "test4: transform do not cause notifications",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(t2);
+ },
+ entries => {
+ // initial notification
+ }
+ );
+ 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();
+ }
+ );
+}
+
+
+function test5() {
+ helper.createTest(
+ "test5: moving an element does not trigger notifications",
+ setup => {
+ helper.observer.disconnect();
+ helper.observer.observe(abs);
+ },
+ entries => {
+ // initial observation
+ }
+ );
+ 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();
+ }
+ );
+}
+
+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.createTest(
+ "inline element that becomes block should notify",
+ setup => {
+ inline.style.display = "block";
+ },
+ entries => {
+ assert_equals(entries[0].target, inline);
+ test7();
+ }
+ );
+}
+
+function test7() {
+ let test = async_test("test7: unobserve inside notify callback");
+
+ let notifyStep = 0;
+ let notify = entries => {
+ switch(notifyStep) {
+ case 0:
+ // initial setup
+ 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();
+ helper.startTests();
+ test.done();
+ ro.disconnect();
+ });
+ break;
+ }
+ notifyStep++;
+ }
+
+ let 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
+ 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");
+ test9();
+ test.done();
+ ro.disconnect();
+ });
+ break;
+ }
+ notifyStep++;
+ }
+
+ let 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:
+ // intial 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++;
+ }
+
+ let ro = new ResizeObserver(notify);
+ ro.observe(t1);
+}
+
+var onErrorCalled = false;
+
+window.onerror = err => {
+ onErrorCalled = true;
+}
+
+function test10() {
+ helper.createTest(
+ "test10: multiple notifications inside same event loop, with limit exceeded",
+ setup => {
+ onErrorCalled = false;
+ helper.observer.disconnect();
+ helper.observer.observe(t1);
+ },
+ entries => {
+ // initial notification
+ }
+ );
+ let rAF = 0;
+
+ // Following tests should all complete within
+ // a same event loop. Use rAF to detect loop end.
+ for (let i=0; i<20; i++) {
+ helper.createTest(
+ "notify with error" + i,
+ setup => {
+ if (i == 0)
+ window.requestAnimationFrame(_ => { rAF++; });
+ t1.style.width = i * 10 + "px";
+ },
+ entries => {
+ if (i < 15) {
+ assert_equals(rAF, 0, "must stay in same notify loop for 16 loops");
+ }
+ else if (i >= 15) {
+ assert_true(onErrorCalled, "window.onerror should be called if limit exceeded");
+ assert_equals(rAF, 1, "raf was called after limit was exceeded");
+ }
+ }
+ );
+ }
+ helper.startTests();
+};
+
+test0();
+helper.startTests();
+
+</script>
+<!-- file:///usr/local/google/home/atotic/chromium/src/third_party/WebKit/LayoutTests/resize-observer/notify.html -->
« no previous file with comments | « no previous file | 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