Issue 7450 - Implement hide-if-contains-visible-text snippet

test/browser/snippets.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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 "use strict";
 
 const library = require("../../lib/content/snippets.js");
-const {timeout, expectHidden, expectVisible} = require("./_utils");
+const {timeout} = require("./_utils");
 
 // We need this stub for the injector.
 window.browser = {
   runtime: {
     getURL: () => ""
   }
 };
+
+function expectHidden(test, element, id)
+{
+  let withId = "";
+  if (typeof id != "undefined")
+    withId = ` with ID '${id}'`;
+
+  test.equal(
+    window.getComputedStyle(element).display, "none",
+    `The element${withId}'s display property should be set to 'none'`);
+}
+
+function expectVisible(test, element, id)
+{
+  let withId = "";
+  if (typeof id != "undefined")
+    withId = ` with ID '${id}'`;
+
+  test.notEqual(
+    window.getComputedStyle(element).display, "none",
+    `The element${withId}'s display property should not be set to 'none'`);
+}
 
 async function runSnippet(test, snippetName, ...args)
 {
   let snippet = library[snippetName];
 
   test.ok(snippet);
 
   snippet(...args);
 
   // For snippets that run in the context of the document via a <script>
@@ skipping 149 matching lines @@
       element.textContent = atob("dGhpcyBpcyBhIGJ1Zw==");
     }
     catch (e)
     {
       let msg = document.getElementById("message1");
       msg.textContent = e.name;
     }`;
 
   injectInlineScript(document, script);
 
-  let e = document.getElementById("result1");
-  test.ok(e, "Element 'result1' was not found");
+  let element = document.getElementById("result1");
+  test.ok(element, "Element 'result1' was not found");
 
   let msg = document.getElementById("message1");
   test.ok(msg, "Element 'message1' was not found");
 
-  if (e && msg)
+  if (element && msg)
   {
-    test.equals(e.textContent, "", "Result element should be empty");
+    test.equals(element.textContent, "", "Result element should be empty");
     test.equals(msg.textContent, "ReferenceError",
                 "There should have been an error");
   }
 
   script = `
     try
     {
       let element = document.getElementById("result2");
       document.write("<p>btoa: " + btoa("this is a bug") + "</p>");
       element.textContent = btoa("this is a bug");
     }
     catch (e)
     {
       let msg = document.getElementById("message2");
       msg.textContent = e.name;
     }`;
 
   injectInlineScript(document, script);
 
-  e = document.getElementById("result2");
-  test.ok(e, "Element 'result2' was not found");
+  element = document.getElementById("result2");
+  test.ok(element, "Element 'result2' was not found");
 
   msg = document.getElementById("message2");
   test.ok(msg, "Element 'message2' was not found");
 
-  if (e && msg)
+  if (element && msg)
   {
-    test.equals(e.textContent, "", "result element should be empty");
+    test.equals(element.textContent, "", "Result element should be empty");
     test.equals(msg.textContent, "ReferenceError",
                 "There should have been an error");
   }
 
   test.done();
 };
 
 exports.testHideIfContainsVisibleText = async function(test)
 {
   document.body.innerHTML = `
@@ skipping 23 matching lines @@
       .vis_hid {
         visibility: hidden;
       }
       .vis_collapse {
         visibility: collapse;
       }
       .same_colour {
         color: rgb(255,255,255);
         background-color: rgb(255,255,255);
       }
+      .transparent {
+        color: transparent;
+      }
       #label {
         overflow-wrap: break-word;
       }
     </style>
     <div id="parent">
       <div id="middle">
         <div id="middle1"><div id="inside" class="inside"></div></div>
       </div>
       <div id="sibling">
         <div id="tohide">to hide \ud83d\ude42!</div>
       </div>
       <div id="sibling2">
         <div id="sibling21"><div id="sibling211" class="inside">Ad*</div></div>
       </div>
-      <div id="label"><div id="content"><div class="a transparent">Sp</div><div class="a">Sp</div><div class="a zerosize">S</div><div class="a transparent">on</div><div class="a">on</div><div class="a zerosize">S</div></div></div>
-      <div id="label2"><div class="a vis_hid">Visibility: hidden</div><div class="a">S</div><div class="a vis_collapse">Visibility: collapse</div><div class="a">p</div><div class="a disp_none">Display: none</div><div class="a">o</div><div class="a same_colour">Same colour</div><div class="a">n</div></div>
-      <article id="article"><div style="display: none"><a href="foo"><div>Spon</div></a>Visit us</div></article>
-      <article id="article2"><div><a href="foo"><div>Spon</div></a>By this</div></article>
-      <article id="article3"><div><a href="foo"><div>by Writer</div></a> about the Sponsorship.</div></article>
+      <div id="label">
+        <div id="content"><div class="a transparent">Sp</div><div class="a">Sp</div><div class="a zerosize">S</div><div class="a transparent">on</div><div class="a">on</div><div class="a zerosize">S</div></div>
+      </div>
+      <div id="label2">
+        <div class="a vis_hid">Visibility: hidden</div><div class="a">S</div><div class="a vis_collapse">Visibility: collapse</div><div class="a">p</div><div class="a disp_none">Display: none</div><div class="a">o</div><div class="a same_colour">Same colour</div><div class="a transparent">Transparent</div><div class="a">n</div>
+      </div>
+      <article id="article">
+        <div style="display: none"><a href="foo"><div>Spon</div></a>Visit us</div>
+      </article>
+      <article id="article2">
+        <div><a href="foo"><div>Spon</div></a>By this</div>
+      </article>
+      <article id="article3">
+        <div><a href="foo"><div>by Writer</div></a> about the Sponsorship.</div>
+      </article>
     </div>`;
 
   await runSnippet(
     test, "hide-if-contains-visible-text", "Spon", "#parent > div"
   );
 
   let element = document.getElementById("label");
   expectHidden(test, element, "label");
   element = document.getElementById("label2");
   expectHidden(test, element, "label2");
 
   element = document.getElementById("article");
   expectVisible(test, element, "article");
   element = document.getElementById("article2");
   expectVisible(test, element, "article2");
 
   await runSnippet(
-    test, "hide-if-contains-visible-text", "Spon", "#parent > article", "a"
+    test, "hide-if-contains-visible-text", "Spon", "#parent > article", "#parent > article a"
   );
 
   element = document.getElementById("article");
-  expectHidden(test, element, "article");
+  expectVisible(test, element, "article");
   element = document.getElementById("article2");
   expectHidden(test, element, "article2");
   element = document.getElementById("article3");
   expectVisible(test, element, "article3");
 
   test.done();
 };