Expand element hiding privacy test page (#130)

* add csp

* expand element hiding tests to cover improved heuristics

Author: dharb

features/element-hiding/index.html

@@ -9,6 +9,7 @@
         .container {
             width: 400px;
             height: 200px;
+            display: block;
             background-color: rgb(249, 251, 251);
             color: rgb(88, 104, 113);
             font-size: 16px;
@@ -76,6 +77,27 @@
             <iframe scrolling="no" width="400" height="200" src="about:blank" id="hide-empty-about-blank-frame" style="border: none; overflow: hidden; display: block;">
             </iframe>
         </div>
+        <div class="container hide-empty-test" id="hide-empty-img-element">
+            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" width='25' height='25'/>
+        </div>
+        <div class="container hide-empty-test" id="hide-empty-svg-element">
+            <svg>
+                <circle cx="50" cy="50" r="40" stroke="orange" stroke-width="5" fill="blue"></circle>
+            </svg>
+        </div>
+        <div class="container hide-empty-test" id="hide-empty-pixel-element">
+            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" width='1' height='1'/>
+        </div>
+        <input class="hide-empty-test" id="hide-empty-input">
+        <div class="container hide-empty-test" id="hide-empty-form-element">
+            <form>
+                <input>
+            </form>
+        </div>
+        <div class="container hide-empty-test" id="hide-empty-media-element">
+            <canvas id="demo-canvas">
+            </canvas>
+        </div>
     </div>
 
     <div id="closest-empty">
@@ -107,10 +129,9 @@
             <div class="container closest-empty-test frame-container-delayed">
             </div>
         </div>
-        <div class="container">
-            <div id="closest-empty-intermediate-element">
-                <div class="closest-empty-test">
-                </div>
+        <div id="closest-empty-img-element">
+            <div class="container closest-empty-test">
+                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" width='25' height='25'/>
             </div>
         </div>
         <div id="closest-empty-delayed-parent">

features/element-hiding/main.js

@@ -7,18 +7,24 @@ const expectedResults = [
     { id: 'hide-empty-no-content', description: 'hide-empty rule: element containing no content is hidden', hidden: true },
     { id: 'hide-empty-ad-label', description: 'hide-empty rule: element containing ad label content is hidden', hidden: true },
     { id: 'hide-empty-delayed', description: 'hide-empty rule: empty element added to page after delay is hidden', hidden: true },
+    { id: 'hide-empty-pixel-element', description: 'hide-empty rule: element should be hidden when it contains tracking pixels', hidden: true },
     { id: 'closest-empty-single-div', description: 'closest-empty rule: element containing no content is hidden', hidden: true },
     { id: 'closest-empty-single-nested-div', description: 'closest-empty rule: parent of target element is hidden', hidden: true },
     { id: 'closest-empty-siblings-nested-div', description: 'closest-empty rule: parent of target element with empty siblings is hidden', hidden: true },
     { id: 'closest-empty-delayed-parent', description: 'closest-empty rule: parent of empty element added to page after delay is hidden', hidden: true },
+    { id: 'hide-empty-img-element', description: 'hide-empty rule: element should not be hidden when it contains image content', hidden: false },
+    { id: 'hide-empty-svg-element', description: 'hide-empty rule: element should not be hidden when it contains image content', hidden: false },
+    { id: 'hide-empty-input', description: 'hide-empty rule: input elements should not be hidden', hidden: false },
+    { id: 'hide-empty-form-element', description: 'hide-empty rule: elements containing forms should not be hidden', hidden: false },
+    { id: 'hide-empty-media-element', description: 'hide-empty rule: elements containing media should not be hidden', hidden: false },
     { id: 'hide-empty-text-content', description: 'hide-empty rule: element containing text content is not hidden', hidden: false },
     { id: 'hide-empty-frame-content', description: 'hide-empty rule: element containing iframe is not hidden', hidden: false },
     { id: 'hide-empty-delayed-frame', description: 'hide-empty rule: element that loads 3p frame after delay is not hidden', hidden: false },
     { id: 'hide-empty-frame-changed', description: 'hide-empty rule: about:blank iframe that changes src to load content after delay is not hidden', hidden: false },
     { id: 'closest-empty-siblings-content-nested-div', description: 'closest-empty rule: parent of target element with non-empty siblings is not hidden', hidden: false },
     { id: 'closest-empty-frame-content', description: 'closest-empty rule: parent of element containing iframe is not hidden', hidden: false },
     { id: 'closest-empty-delayed-frame', description: 'closest-empty rule: parent of element that loads 3p frame after delay is not hidden', hidden: false },
-    { id: 'closest-empty-intermediate-element', description: 'closest-empty rule: intermediate elements should not be hidden when target is nested', hidden: false },
+    { id: 'closest-empty-img-element', description: 'closest-empty rule: element should not be hidden when it contains image content', hidden: false },
     { id: 'override-basic', description: 'override rule: element is not hidden when override rule present', hidden: false }
 ];
 
@@ -41,14 +47,18 @@ function init () {
     // inject frames and other content after delay
     injectDelayedContent();
 
+    // initialize canvas
+    initializeCanvas();
+
     // wait 2s then check results
     setTimeout(checkResults, 2000);
 }
 
 function checkResults () {
     for (const testCase of expectedResults) {
         const element = document.getElementById(testCase.id);
-        const isHidden = element.style.getPropertyValue('display') === 'none';
+        const boundingRect = element.getBoundingClientRect();
+        const isHidden = boundingRect.height === 0 && boundingRect.width === 0;
         const result = testCase.hidden === isHidden;
         updateTable(testCase.id, testCase.description, result);
     }
@@ -80,6 +90,13 @@ function updateTable (name, description, testPassed) {
     results.results.push(result);
 }
 
+function initializeCanvas () {
+    const canvas = document.getElementById('demo-canvas');
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = '#FF0000';
+    ctx.fillRect(0, 0, 80, 80);
+}
+
 function injectDelayedContent () {
     setTimeout(() => {
         // inject iframes