Bug 1545239 - Make each test cases independent in resize-observer/observe.html. r=dholbert
authorBoris Chiou <boris.chiou@gmail.com>
Wed, 08 May 2019 20:54:39 +0000
changeset 531969 01338a1e26b7d838ddd591fca9a7495e338c6c96
parent 531968 dc3570e93c4150f913a20baa6ee42c109ab85d60
child 531970 b34ea6abce97b002de66d2d0376b84e347f3151a
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
bugs1545239
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 1545239 - Make each test cases independent in resize-observer/observe.html. r=dholbert I think it's better to make sure each test is independent from others, so we create elements inside each test function. (Only change observe.html because I touch only this file in this bug.) Differential Revision: https://phabricator.services.mozilla.com/D29889
testing/web-platform/tests/resize-observer/observe.html
testing/web-platform/tests/resize-observer/resources/image.png
testing/web-platform/tests/resize-observer/resources/resizeTestHelper.js
--- a/testing/web-platform/tests/resize-observer/observe.html
+++ b/testing/web-platform/tests/resize-observer/observe.html
@@ -1,77 +1,82 @@
 <!doctype html>
+<title>ResizeObserver tests</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="./resources/resizeTestHelper.js"></script>
-<p>ResizeObserver tests</p>
-<div id="target1" style="width:100px;height:100px;">t1</div>
-<div id="target2" style="width:100px;height:100px;">t2</div>
-<img id="target3" style="width:100px;height:100px;">
-<iframe src="./resources/iframe.html" width="300px" height="100px" style="display:block"></iframe>
+<div id="log"></div>
 <script>
 'use strict';
 
-let t1 = document.querySelector('#target1');
-let t2 = document.querySelector('#target2');
-
 // allow uncaught exception because ResizeObserver posts exceptions
 // to window error handler when limit is exceeded.
 setup({allow_uncaught_exception: true});
 
 function test0() {
+  let t = createAndAppendElement("div");
+  t.style.width = "100px";
+
   let helper = new ResizeTestHelper(
     "test0: simple observation",
   [
     {
       setup: observer => {
-        observer.observe(t1);
-        t1.style.width = "5px";
+        observer.observe(t);
+        t.style.width = "5px";
       },
       notify: entries => {
         assert_equals(entries.length, 1, "1 pending notification");
-        assert_equals(entries[0].target, t1, "target is t1");
+        assert_equals(entries[0].target, t, "target is t");
         assert_equals(entries[0].contentRect.width, 5, "target width");
       }
     }
   ]);
-  return helper.start();
+  return helper.start(() => t.remove());
 }
 
 function test1() {
+  let t = createAndAppendElement("div");
+  t.style.width = "100px";
+
   let helper = new ResizeTestHelper(
     "test1: multiple observation on same element trigger only one",
   [
     {
       setup: observer => {
-        observer.observe(t1);
-        observer.observe(t1);
-        t1.style.width = "10px";
+        observer.observe(t);
+        observer.observe(t);
+        t.style.width = "10px";
       },
       notify: entries => {
         assert_equals(entries.length, 1, "1 pending notification");
       }
     }
   ]);
-  return helper.start();
+  return helper.start(() => t.remove());
 }
 
 function test2() {
   test(() => {
       assert_throws({name: "TypeError"}, _=> {
         let ro = new ResizeObserver(() => {});
         ro.observe({});
       });
     },
     "test2: throw exception when observing non-element"
   );
   return Promise.resolve();
 }
 
 function test3() {
+  let t1 = createAndAppendElement("div");
+  let t2 = createAndAppendElement("div");
+  t1.style.width = "100px";
+  t2.style.width = "100px";
+
   let helper = new ResizeTestHelper(
     "test3: disconnect stops all notifications", [
     {
       setup: observer => {
         observer.observe(t1);
         observer.observe(t2);
         observer.disconnect();
         t1.style.width = "30px";
@@ -79,20 +84,28 @@ function test3() {
       notify: entries => {
          assert_unreached("no entries should be observed");
       },
       timeout: () => {
         // expected
       }
     }
   ]);
-  return helper.start();
+  return helper.start(() => {
+    t1.remove();
+    t2.remove();
+  });
 }
 
 function test4() {
+  let t1 = createAndAppendElement("div");
+  let t2 = createAndAppendElement("div");
+  t1.style.width = "100px";
+  t2.style.width = "100px";
+
   let helper = new ResizeTestHelper(
     "test4: unobserve target stops notifications, unobserve non-observed does nothing", [
     {
       setup: observer => {
         observer.observe(t1);
         observer.observe(t2);
         observer.unobserve(t1);
         observer.unobserve(document.body);
@@ -100,71 +113,93 @@ function test4() {
         t2.style.width = "40px";
       },
       notify: entries => {
         assert_equals(entries.length, 1, "only t2");
         assert_equals(entries[0].target, t2, "t2 was observed");
       }
     }
   ]);
-  return helper.start();
+  return helper.start(() => {
+    t1.remove();
+    t2.remove();
+  });
 }
 
 function test5() {
-  let t3 = document.querySelector('#target3');
+  let img = createAndAppendElement("img");
+  img.style.width = "15px";
+  img.style.height = "15px";
+  img.src = "resources/image.png";
+
   var helper = new ResizeTestHelper("test5: observe img",[
     {
       setup: observer => {
-        observer.observe(t3);
+        observer.observe(img);
       },
       notify: entries => {
       }
     },
     {
       setup: observer => {
-        t3.style.width = "100.5px";
+        img.style.width = "15.5px";
       },
       notify: entries => {
         assert_equals(entries.length, 1);
-        assert_equals(entries[0].contentRect.width, 100.5);
+        assert_equals(entries[0].contentRect.width, 15.5);
       }
     }
   ]);
-  return helper.start();
+  return new Promise((resolve, reject) => {
+    img.onload = () => resolve();
+  }).then(() => {
+    return helper.start(() => img.remove());
+  });
 }
 
 function test6() {
-  let resolvePromise;
-  let promise = new Promise((resolve) => {
-    resolvePromise = resolve;
-  });
-  let test = async_test('test6: iframe notifications');
-  let testRequested = false;
-  let iframe = document.querySelector('iframe');
-  window.addEventListener('message', event => {
-    switch(event.data) {
-    case 'readyToTest':
-      if (!testRequested) {
-        iframe.contentWindow.postMessage('startTest', '*');
-        testRequested = true;
+  let iframe = createAndAppendElement("iframe");
+  iframe.src = "./resources/iframe.html";
+  iframe.width = "300px";
+  iframe.height = "100px";
+  iframe.style.display = "block";
+
+  return new Promise(function(resolve, reject) {
+    iframe.onload = () => resolve();
+  }).then(() => {
+    let resolvePromise;
+    let promise = new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+    let test = async_test('test6: iframe notifications');
+    let testRequested = false;
+    test.add_cleanup(() => iframe.remove());
+
+    window.addEventListener('message', event => {
+      switch(event.data) {
+      case 'readyToTest':
+        if (!testRequested) {
+          iframe.contentWindow.postMessage('startTest', '*');
+          testRequested = true;
+        }
+      break;
+      case 'success':
+      case 'fail':
+        window.requestAnimationFrame(() => {
+          test.step( () => {
+            assert_equals(event.data, 'success');
+            test.done();
+            resolvePromise();
+          });
+        });
+      break;
       }
-    break;
-    case 'success':
-    case 'fail':
-      window.requestAnimationFrame(() => {
-        test.step( () => {
-          assert_equals(event.data, 'success');
-          test.done();
-          resolvePromise();
-        });
-      });
-    break;
-    }
-  }, false);
-  return promise;
+    }, false);
+    return promise;
+  });
 }
 
 function test7() {
   let harnessTest = async_test("test7: callback.this");
   let resolvePromise;
   let ro = new ResizeObserver( function(entries, obs)  {
     let callbackThis = this;
     resolvePromise();
@@ -176,32 +211,37 @@ function test7() {
       // to avoid triggering test leak-detection
       ro = null;
       callbackThis = null;
       obs = null;
       harnessTest.done();
      });
     }
   );
-  ro.observe(t1);
+
+  let t = createAndAppendElement("div");
+  t.style.width = "100px";
+  harnessTest.add_cleanup(() => t.remove());
+
+  ro.observe(t);
 
   return new Promise( (resolve, reject) => {
     resolvePromise = resolve;
   });
 }
 
 let guard;
 test(_ => {
   assert_own_property(window, "ResizeObserver");
   guard = async_test('guard');
 }, "ResizeObserver implemented")
 
 test0()
-  .then(() => { return test1(); })
-  .then(() => { return test2(); })
-  .then(() => { return test3(); })
-  .then(() => { return test4(); })
-  .then(() => { return test5(); })
-  .then(() => { return test6(); })
-  .then(() => { return test7(); })
-  .then(() => { guard.done(); });
+  .then(() => test1())
+  .then(() => test2())
+  .then(() => test3())
+  .then(() => test4())
+  .then(() => test5())
+  .then(() => test6())
+  .then(() => test7())
+  .then(() => guard.done());
 
 </script>
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..51741584a07a915c9efc356c08aa04535fd056bf
GIT binary patch
literal 170
zc%17D@N?(olHy`uVBq!ia0vp^{2<K11|+SoP4xm&Ea{HEjtmSN`?>!lvI6;>1s;*b
z3=DjSK$uZf!>a)(C{f}XQ4*Y=R#Ki=l*$m0n3-3i=jR%tP-d)WWVC&vcr8$khNp{T
zh=qT0N=Cwu^A2VVnQG#b*9yK#D$13;>f<)0x6Q1x(ap1gk)giEdf%FmKv$q122WQ%
Jmvv4FO#u1lE&c!i
--- a/testing/web-platform/tests/resize-observer/resources/resizeTestHelper.js
+++ b/testing/web-platform/tests/resize-observer/resources/resizeTestHelper.js
@@ -107,42 +107,63 @@ ResizeTestHelper.prototype = {
     this._harnessTest.done();
     if (this._rafCountRequest) {
       window.cancelAnimationFrame(this._rafCountRequest);
       delete this._rafCountRequest;
     }
     window.requestAnimationFrame(() => { this._resolvePromise(); });
   },
 
-  start: function() {
+  start: function(cleanup) {
     this._harnessTest = async_test(this._name);
+
+    if (cleanup) {
+      this._harnessTest.add_cleanup(cleanup);
+    }
+
     this._harnessTest.step(() => {
       assert_equals(this._stepIdx, -1, "start can only be called once");
       this._nextStep();
     });
     return new Promise( (resolve, reject) => {
       this._resolvePromise = resolve;
       this._rejectPromise = reject;
     });
   },
 
   get rafCount() {
     if (!this._rafCountRequest)
       throw "rAF count is not active";
     return this._rafCount;
   },
 
+  get test() {
+    if (!this._harnessTest) {
+      throw "_harnessTest is not initialized";
+    }
+    return this._harnessTest;
+  },
+
   _incrementRaf: function() {
     if (this._rafCountRequest) {
       this._rafCount++;
       this._rafCountRequest = window.requestAnimationFrame(this._incrementRafBind);
     }
   },
 
   startCountingRaf: function() {
     if (this._rafCountRequest)
       window.cancelAnimationFrame(this._rafCountRequest);
     if (!this._incrementRafBind)
       this._incrementRafBind = this._incrementRaf.bind(this);
     this._rafCount = 0;
     this._rafCountRequest = window.requestAnimationFrame(this._incrementRafBind);
   }
 }
+
+function createAndAppendElement(tagName, parent) {
+  if (!parent) {
+    parent = document.body;
+  }
+  const element = document.createElement(tagName);
+  parent.appendChild(element);
+  return element;
+}