Issue 5438 - Observer DOM changes to reapply filters.

test/browser/elemHideEmulation.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 115 matching lines @@
         let selector = newSelectors.join(", ");
         insertStyleRule(selector + "{display: none !important;}");
       },
       elems =>
       {
         for (let elem of elems)
           elem.style.display = "none";
       }
     );
 
-    elemHideEmulation._invocationInterval = 100;

[Wladimir Palant, 2017/08/25 07:44:59]

REFRESH_INTERVAL / 2?

[hub, 2017/08/25 13:48:13]

Done.

+    elemHideEmulation.MIN_INVOCATION_INTERVAL = REFRESH_INTERVAL / 2;
     elemHideEmulation.apply();
     return elemHideEmulation;
   });
 }
 
 exports.testVerbatimPropertySelector = function(test)
 {
   let toHide = createElementWithStyle("{background-color: #000}");
   applyElemHideEmulation(
     [":-abp-properties(background-color: rgb(0, 0, 0))"]
@@ skipping 104 matching lines @@
 exports.testDynamicallyChangedProperty = function(test)
 {
   let toHide = createElementWithStyle("{}");
   applyElemHideEmulation(
     [":-abp-properties(background-color: rgb(0, 0, 0))"]
   ).then(() =>
   {
     expectVisible(test, toHide);
     insertStyleRule("#" + toHide.id + " {background-color: #000}");
 
-    // Re-evaluation will only happen after a few seconds

[Wladimir Palant, 2017/08/25 07:44:59]

"after hundred milliseconds" or just "after a delay"?

[hub, 2017/08/25 13:48:12]

Done.

+    return timeout(0);
+  }).then(() =>
+  {
+    // Re-evaluation will only happen after a delay
     expectVisible(test, toHide);

[Wladimir Palant, 2017/08/25 07:44:59]

Testing for synchronous changes here and below is a bit pointless, mutation
observers aren't synchronous. Maybe `return timeout(0)` before reevaluating the
state?

[hub, 2017/08/25 13:48:14]

Done.

[Wladimir Palant, 2017/08/25 20:57:40]

You only fixed one instance of this issue. I noted the other ones.

     return timeout(REFRESH_INTERVAL);
   }).then(() =>
   {
     expectHidden(test, toHide);
   }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPseudoClassWithPropBeforeSelector = function(test)
 {
   let parent = createElementWithStyle("{}");
@@ skipping 232 matching lines @@
   let parent = createElementWithStyle("{}");
   let child = createElementWithStyle("{}", parent);
   applyElemHideEmulation(
     ["div:-abp-has(:-abp-properties(background-color: rgb(0, 0, 0)))"]
   ).then(() =>
   {
     expectVisible(test, child);
     expectVisible(test, parent);
 
     insertStyleRule("body #" + parent.id + " > div { background-color: #000}");
-
+    return timeout(0);
+  }).then(() =>
+  {
     expectVisible(test, child);
     expectVisible(test, parent);
     return timeout(REFRESH_INTERVAL);
   }).then(() =>
   {
     expectVisible(test, child);
     expectHidden(test, parent);
   }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testDomUpdatesContent = function(test)
 {
   let parent = createElementWithStyle("{}");
   let child = createElementWithStyle("{}", parent);
   applyElemHideEmulation(
     ["div > div:-abp-contains(hide me)"]
   ).then(() =>
   {
     expectVisible(test, parent);
     expectVisible(test, child);
 
     child.textContent = "hide me";
-
+    return timeout(0);
+  }).then(() =>
+  {
     expectVisible(test, parent);
     expectVisible(test, child);
     return timeout(REFRESH_INTERVAL);
   }).then(() =>
   {
     expectVisible(test, parent);
     expectHidden(test, child);
   }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testDomUpdatesNewElement = function(test)
 {
   let parent = createElementWithStyle("{}");
   let child = createElementWithStyle("{ background-color: #000}", parent);
   let sibling;
   let child2;
   applyElemHideEmulation(
     ["div:-abp-has(:-abp-properties(background-color: rgb(0, 0, 0)))"]
   ).then(() =>
   {
     expectHidden(test, parent);
     expectVisible(test, child);
 
     sibling = createElementWithStyle("{}");
-    expectVisible(test, sibling);
-

[Wladimir Palant, 2017/08/25 07:44:59]

I guess the two lines above should be removed? You are testing the state of
sibling below.

[hub, 2017/08/25 13:48:14]

Done.

+    return timeout(0);
+  }).then(() =>
+  {
     expectHidden(test, parent);
     expectVisible(test, child);
     expectVisible(test, sibling);
 
     return timeout(REFRESH_INTERVAL);
   }).then(() =>
   {
     expectHidden(test, parent);
     expectVisible(test, child);
     expectVisible(test, sibling);
 
     child2 = createElementWithStyle("{ background-color: #000}",
                                     sibling);
+    return timeout(0);
+  }).then(() =>
+  {
     expectVisible(test, child2);
     return timeout(REFRESH_INTERVAL);
   }).then(() =>
   {
     expectHidden(test, parent);
     expectVisible(test, child);
     expectHidden(test, sibling);
     expectVisible(test, child2);
   }).catch(unexpectedError.bind(test)).then(() => test.done());
 };