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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/resize-observer/eventloop.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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/resize-observer/notify.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/eventloop.html
diff --git a/third_party/WebKit/LayoutTests/resize-observer/eventloop.html b/third_party/WebKit/LayoutTests/resize-observer/eventloop.html
new file mode 100644
index 0000000000000000000000000000000000000000..e60c410bbfd206a8ff71ff00c3565169567d62cc
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/resize-observer/eventloop.html
@@ -0,0 +1,268 @@
+<!doctype html>
+<head>
esprehn 2016/08/10 04:27:09 I'd leave out the <head> and <body> in all of your
atotic1 2016/08/10 18:25:32 Done.
+ <script src="../resources/testharness.js"></script>
+ <script src="../resources/testharnessreport.js"></script>
+ <script src="./resources/resizeTestHelper.js"></script>
+ <style>
+ div {
+ border: 1px dotted gray
+ }
+ </style>
+</head>
+<p>ResizeObserver notification event loop tests</p>
+<div id="target1" style="width:100px;height:100px;">t1
+</div>
+<div id="container">
+ <div id="a1" style="width:100px;height:100px">
+ <div id="a2" style="width:100px;height:100px">
+ </div>
+ </div>
+ <div id="b1" style="width:100px;height:100px">
+ <div id="b2" style="width:100px;height:100px">
+ </div>
+ </div>
+</div>
+<script>
+'use strict';
+
+var helper = new ResizeTestHelper();
+
+let t1 = document.querySelector('#target1');
+
+// allow uncaught exception because ResizeObserver posts exceptions
+// to window error handler when limit is exceeded.
+// This codepath is tested in this file.
+
+setup({allow_uncaught_exception: true});
+
+var onErrorCalled = false;
+
+window.onerror = err => {
+ onErrorCalled = true;
+}
+
+function test0() {
+
+ let divs = [t1];
+
+ helper.createTest(
+ "test0: multiple notifications inside same event loop",
+ setup => {
+ onErrorCalled = false;
+ helper.observer.disconnect();
+ let t2 = document.createElement('div');
+ let t3 = document.createElement('div');
+ t2.appendChild(t3);
+ t1.appendChild(t2);
+ divs.push(t2);
+ divs.push(t3);
+ helper.observer.observe(t1);
+ helper.observer.observe(t2);
+ helper.observer.observe(t3);
+ },
+ entries => {
+ assert_equals(entries.length, 3, "3 notifications");
+ helper.nextTest();
+ }
+ );
+ let rAF = 0;
+
+ // This test happens in the same Resize notification loop,
+ // only t2 and t3 get notified
+ helper.createTest(
+ "test0: multiple notifications pt 2",
+ setup => {
+ divs.forEach( el => { el.style.width = "101px";});
+ window.requestAnimationFrame(_ => { rAF++; });
+ },
+ entries => {
+ // t1 is not delivered
+ assert_equals(entries.length, 2, "2 notifications");
+ helper.nextTest();
+ }
+ );
+ // Only t3 gets notified, t2 and t1 are not deep enough
+ helper.createTest(
+ "test0: multiple notifications pt 3",
+ setup => {
+ divs.forEach( el => { el.style.width = "102px";});
+ },
+ entries => {
+ assert_equals(entries.length, 1, "1 notifications");
+ assert_equals(rAF, 0, "same loop");
+ helper.nextTest();
+ }
+ );
+ // t1 and t2 get notified
+ helper.createTest(
+ "test0: multiple notifications pt 4, new loop",
+ setup => {
+ },
+ entries => {
+ assert_equals(entries.length, 2, "2 notifications");
+ assert_equals(rAF, 1, "new loop");
+ assert_equals(onErrorCalled, true, "error was fired");
+ helper.observer.disconnect();
+ while (t1.childNodes.length > 0)
+ t1.removeChild(t1.childNodes[0]);
+ test1();
+ }
+ );
+
+ helper.nextTestRaf();
+}
+
+function test1() {
+
+ var resizers = [t1];
+ // Testing depths of shadow roots
+ // DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5
+ helper.createTest(
+ "test1: limit with shadowRoot",
+ setup => {
+ onErrorCalled = false;
+
+ let t2 = document.createElement('div');
+ t1.appendChild(t2);
+ resizers.push(t2);
+ let t3 = document.createElement('div');
+ resizers.push(t3);
+ t2.appendChild(t3);
+ let shadow = t3.createShadowRoot();
+ let t4 = document.createElement('div');
+ resizers.push(t4);
+ shadow.appendChild(t4);
+ let t5 = document.createElement('div');
+ resizers.push(t5);
+ t4.appendChild(t5);
+ resizers.forEach( el => helper.observer.observe(el) );
+ },
+ entries => {
+ assert_equals(entries.length, 5, "all entries resized");
+ helper.nextTest();
+ }
+ );
+
+ helper.createTest(
+ "test1: limit with shadowRoot",
+ setup => {
+ resizers.forEach( el => el.style.width = "111px" );
+ },
+ entries => {
+ assert_equals(entries.length, 4, "depth limited");
+ helper.nextTest();
+ }
+ );
+
+ helper.createTest(
+ "test1: limit with shadowRoot",
+ setup => {
+ resizers.forEach( el => el.style.width = "112px" );
+ },
+ entries => {
+ assert_equals(entries.length, 3, "depth limited");
+ helper.nextTest();
+ }
+ );
+
+ helper.createTest(
+ "test1: limit with shadowRoot",
+ setup => {
+ resizers.forEach( el => el.style.width = "113px" );
+ },
+ entries => {
+ assert_equals(entries.length, 2, "depth limited");
+ helper.nextTest();
+ }
+ );
+
+ helper.createTest(
+ "test1: limit with shadowRoot",
+ setup => {
+ resizers.forEach( el => el.style.width = "114px" );
+ },
+ entries => {
+ assert_equals(entries.length, 1, "depth limited");
+ helper.nextTestRaf();
+ }
+ );
+
+ helper.createTest(
+ "test1: limit with shadowRoot end",
+ setup => {
+ },
+ entries => {
+ assert_equals(entries.length, 4, "limit notifications");
+ assert_equals(onErrorCalled, true, "breached limit");
+ helper.observer.disconnect();
+ t1.removeChild(t1.firstChild);
+ test2();
+ }
+ );
+
+ helper.nextTestRaf();
+}
+
+function test2() {
+ let container = document.querySelector('#container');
+ let a1 = document.querySelector('#a1');
+ let a2 = document.querySelector('#a2');
+ let b1 = document.querySelector('#b1');
+ let b2 = document.querySelector('#b2');
+ let targets = [a1, a2, b1, b2];
+ helper.createTest(
+ "test2: move target in dom while inside event loop",
+ setup => {
+ for (let t of targets)
+ helper.observer.observe(t);
+ },
+ entries => {
+ helper.nextTestRaf();
+ }
+ );
+ helper.createTest(
+ "test2, pt2: resize them all",
+ setup => {
+ for (let t of targets)
+ t.style.width = "110px";
+ },
+ entries => {
+ assert_equals(entries.length, targets.length);
+ helper.nextTest();
+ }
+ );
+ helper.createTest(
+ "test2, pt3: resize all, move dom upwardsa",
+ setup => {
+ // still in same event loop as pt2
+ for (let t of targets)
+ t.style.width = "120px";
+ container.appendChild(b2);
+ },
+ entries => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].target, a2);
+ helper.nextTest();
+ }
+ );
+ helper.createTest(
+ "test2, pt4, resize all, move dom downwards",
+ setup => {
+ for (let t of targets)
+ t.style.width = "130px";
+ a2.appendChild(b2);
+ },
+ entries => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].target, b2);
+ a1.appendChild(a2);
+ helper.observer.disconnect();
+ }
+ );
+ helper.nextTestRaf();
+}
+
+test0();
+
+</script>
+
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/resize-observer/notify.html » ('j') | third_party/WebKit/Source/core/frame/FrameView.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698