Bug 1545309 - Make test function independent from others in eventloop.html. r=dholbert
authorBoris Chiou <boris.chiou@gmail.com>
Mon, 06 May 2019 22:52:54 +0000
changeset 531992 57b5cbfc0d7a0857e896d0a41c366fc7a4d77da0
parent 531991 6cc70607d8afbe3a56fc6a3f3bc6544da4c8dba5
child 531993 2c165cc039113c935d13a630528173f2e34cdfe2
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1545309
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1545309 - Make test function independent from others in eventloop.html. r=dholbert Differential Revision: https://phabricator.services.mozilla.com/D29904
testing/web-platform/tests/resize-observer/eventloop.html
--- a/testing/web-platform/tests/resize-observer/eventloop.html
+++ b/testing/web-platform/tests/resize-observer/eventloop.html
@@ -1,35 +1,17 @@
 <!doctype html>
+<title>ResizeObserver notification event loop tests</title>
 <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>
-<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>
+<div id="log"></div>
 <script>
 'use strict';
 
-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});
 
 function template() {
   let helper = new ResizeTestHelper(
@@ -48,31 +30,28 @@ function template() {
 
 var onErrorCalled = false;
 
 window.onerror = err => {
   onErrorCalled = true;
 }
 
 function test0() {
+  let t1 = createAndAppendElement("div");
+  let t2 = createAndAppendElement("div", t1);
+  let t3 = createAndAppendElement("div", t2);
 
-  let divs = [t1];
+  let divs = [t1, t2, t3];
   let rAF = 0;
   let helper = new ResizeTestHelper(
     "test0: multiple notifications inside same event loop",
   [
     {
       setup: observer => {
         onErrorCalled = false;
-        let t2 = document.createElement('div');
-        let t3 = document.createElement('div');
-        t2.appendChild(t3);
-        t1.appendChild(t2);
-        divs.push(t2);
-        divs.push(t3);
         observer.observe(t1);
         observer.observe(t2);
         observer.observe(t3);
       },
       notify: (entries, observer) => {
         assert_equals(entries.length, 3, "3 notifications");
       }
     },
@@ -99,48 +78,41 @@ function test0() {
     { // t1 and t2 get notified
       setup: observer => {
       },
       notify: (entries, observer) => {
         assert_equals(entries.length, 2, "2 notifications");
         assert_equals(helper.rafCount, 1, "new loop");
         assert_equals(onErrorCalled, true, "error was fired");
         observer.disconnect();
-        while (t1.childNodes.length > 0)
-          t1.removeChild(t1.childNodes[0]);
       }
     }
   ]);
-  return helper.start();
+  return helper.start(() => t1.remove());
 }
 
 function test1() {
+  let t1 = createAndAppendElement("div");
+  t1.style.width = '100px';
+  let t2 = createAndAppendElement("div", t1);
+  let t3 = createAndAppendElement("div", t2);
+  let shadow = t3.attachShadow({ mode: "open" });
+  let t4 = createAndAppendElement("div", shadow);
+  let t5 = createAndAppendElement("div", t4);
 
-  var resizers = [t1];
+  let resizers = [t1, t2, t3, t4, t5];
+
   // Testing depths of shadow roots
   // DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5
   let helper = new ResizeTestHelper(
     "test1: depths of shadow roots",
   [
     {
       setup: observer => {
         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.attachShadow({ mode: "open" });
-        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 => observer.observe(el) );
       },
       notify: (entries, observer) => {
         assert_equals(entries.length, 5, "all entries resized");
       }
     },
     {
       setup: observer => {
@@ -176,29 +148,36 @@ function test1() {
     },
     {
       setup: observer => {
       },
       notify: (entries, observer) => {
         assert_equals(entries.length, 4, "limit notifications");
         assert_equals(onErrorCalled, true, "breached limit");
         observer.disconnect();
-        t1.removeChild(t1.firstChild);
       }
     },
   ]);
-  return helper.start();
+  return helper.start(() => t1.remove());
 }
 
 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');
+  // <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>
+  let container = createAndAppendElement("div");
+  let a1 = createAndAppendElement("div", container);
+  let a2 = createAndAppendElement("div", a1);
+  let b1 = createAndAppendElement("div", container);
+  let b2 = createAndAppendElement("div", b1);
   let targets = [a1, a2, b1, b2];
 
   let helper = new ResizeTestHelper(
     "test2: move target in dom while inside event loop",
   [
     {
       setup: observer => {
         for (let t of targets)
@@ -232,28 +211,26 @@ function test2() {
       setup: observer => {
         for (let t of targets)
           t.style.width = "130px";
         a2.appendChild(b2);
       },
       notify: (entries, observer) => {
         assert_equals(entries.length, 1, "b2 moved downwards");
         assert_equals(entries[0].target, b2);
-        a1.appendChild(a2);
       }
     },
   ]);
-  return helper.start();
+  return helper.start(() => container.remove());
 }
 
 let guard;
 test(_ => {
   assert_own_property(window, "ResizeObserver");
   guard = async_test('guard');
 }, "ResizeObserver implemented")
 
 test0()
-  .then(() => { return test1(); })
-  .then(() => { return test2(); })
-  .then(() => { guard.done(); });
+  .then(() => test1())
+  .then(() => test2())
+  .then(() => guard.done());
 
 </script>
-