Bug 1193593 - Test fingerprinting resistance for media queries in picture elements. r=heycam

Based on Tor Browser #16315
https://trac.torproject.org/projects/tor/ticket/16315

layout/style/test/chrome/bug418986-2.js

@@ -4,8 +4,6 @@
 /* jshint loopfunc:true */
 /* global window, screen, ok, SpecialPowers, matchMedia */
 
-SimpleTest.waitForExplicitFinish();
-
 // Expected values. Format: [name, pref_off_value, pref_on_value]
 // If pref_*_value is an array with two values, then we will match
 // any value in between those two values. If a value is null, then
@@ -166,19 +164,22 @@ let cssLine = function (query, clazz, id, color) {
          " { background-color: " + color + "; } }\n";
 };
 
+// __constructQuery(key, val)__.
+// Creates a CSS media query from key and val. If key is an array of
+// two elements, constructs a range query (using min- and max-).
+let constructQuery = function (key, val) {
+  return Array.isArray(val) ?
+    "(min-" + key + ": " + val[0] + ") and (max-" +  key + ": " + val[1] + ")" :
+    "(" + key + ": " + val + ")";
+};
+
 // __mediaQueryCSSLine(key, val, color)__.
 // Creates a line containing a CSS media query and a CSS expression.
 let mediaQueryCSSLine = function (key, val, color) {
   if (val === null) {
     return "";
   }
-  let query;
-  if (Array.isArray(val)) {
-    query = "(min-" + key + ": " + val[0] + ") and (max-" +  key + ": " + val[1] + ")";
-  } else {
-    query = "(" + key + ": " + val + ")";
-  }
-  return cssLine(query, "spoof", key, color);
+  return cssLine(constructQuery(key, val), "spoof", key, color);
 };
 
 // __suppressedMediaQueryCSSLine(key, color)__.
@@ -248,33 +249,67 @@ let testOSXFontSmoothing = function (resisting) {
                "-moz-osx-font-smoothing");
 };
 
-// An iterator yielding pref values for two consecutive tests.
-let prefVals = (for (prefVal of [false, true]) prefVal);
+// __sleep(timeoutMs)__.
+// Returns a promise that resolves after the given timeout.
+let sleep = function (timeoutMs) {
+  return new Promise(function(resolve, reject) {
+    window.setTimeout(resolve);
+  });
+};
+
+// __testMediaQueriesInPictureElements(resisting)__.
+// Test to see if media queries are properly spoofed in picture elements
+// when we are resisting fingerprinting. A generator function
+// to be used with SpawnTask.js.
+let testMediaQueriesInPictureElements = function* (resisting) {
+  let lines = "";
+  for (let [key, offVal, onVal] of expected_values) {
+    let expected = resisting ? onVal : offVal;
+    if (expected) {
+      let query = constructQuery(key, expected);
+      lines += "<picture>\n";
+      lines += " <source srcset='/tests/layout/style/test/chrome/match.png' media='" + query + "' />\n";
+      lines += " <img title='" + key + ":" + expected + "' class='testImage' src='/tests/layout/style/test/chrome/mismatch.png' alt='" + key + "' />\n";
+      lines += "</picture><br/>\n";
+    }
+  }
+  document.getElementById("pictures").innerHTML = lines;
+  var testImages = document.getElementsByClassName("testImage");
+  yield sleep(0);
+  for (let testImage of testImages) {
+    ok(testImage.currentSrc.endsWith("/match.png"), "Media query '" + testImage.title + "' in picture should match.");
+  }
+};
+
+// __pushPref(key, value)__.
+// Set a pref value asynchronously, returning a promise that resolves
+// when it succeeds.
+let pushPref = function (key, value) {
+  return new Promise(function(resolve, reject) {
+    SpecialPowers.pushPrefEnv({"set": [[key, value]]}, resolve);
+  });
+};
 
 // __test(isContent)__.
-// Run all tests.
-let test = function(isContent) {
-  let {value: prefValue, done} = prefVals.next();
-  if (done) {
-    SimpleTest.finish();
-    return;
+// Run all tests. A generator function to be used
+// with SpawnTask.js.
+let test = function* (isContent) {
+  for (prefValue of [false, true]) {
+    yield pushPref("privacy.resistFingerprinting", prefValue);
+    let resisting = prefValue && isContent;
+    expected_values.forEach(
+      function ([key, offVal, onVal]) {
+        testMatch(key, resisting ? onVal : offVal);
+      });
+    testToggles(resisting);
+    if (OS === "WINNT") {
+      testWindowsSpecific(resisting, "-moz-os-version", windows_versions);
+      testWindowsSpecific(resisting, "-moz-windows-theme", windows_themes);
+    }
+    testCSS(resisting);
+    if (OS === "Darwin") {
+      testOSXFontSmoothing(resisting);
+    }
+    yield testMediaQueriesInPictureElements(resisting);
   }
-  SpecialPowers.pushPrefEnv({set: [["privacy.resistFingerprinting", prefValue]]},
-    function () {
-      let resisting = prefValue && isContent;
-      expected_values.forEach(
-        function ([key, offVal, onVal]) {
-          testMatch(key, resisting ? onVal : offVal);
-        });
-      testToggles(resisting);
-      if (OS === "WINNT") {
-        testWindowsSpecific(resisting, "-moz-os-version", windows_versions);
-        testWindowsSpecific(resisting, "-moz-windows-theme", windows_themes);
-      }
-      testCSS(resisting);
-      if (OS === "Darwin") {
-        testOSXFontSmoothing(resisting);
-      }
-      test(isContent);
-    });
 };

layout/style/test/chrome/chrome.ini

@@ -6,6 +6,8 @@ support-files =
   bug535806-html.html
   bug535806-xul.xul
   hover_helper.html
+  match.png
+  mismatch.png
 
 [test_addSheet.html]
 [test_additional_sheets.html]

layout/style/test/chrome/test_bug418986-2.xul

@@ -7,13 +7,14 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=418986
 <window title="Mozilla Bug 418986"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SpawnTask.js"/>
   <!-- test results are displayed in the html:body -->
   <body xmlns="http://www.w3.org/1999/xhtml">
   <style id="test-css" scoped="true"></style>
   <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=418986"
      target="_blank">Mozilla Bug 418986</a>
   <p id="display"></p>
-
+  <p id="pictures"></p>
   </body>
 
   <script type="text/javascript;version=1.7" src="bug418986-2.js"></script>
@@ -21,7 +22,9 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=418986
   <script type="text/javascript;version=1.7">
     // Run all tests now.
     window.onload = function () {
-      test(false);
+      add_task(function* () {
+        yield test(false);
+      });
     };
   </script>
 </window>

layout/style/test/mochitest.ini

@@ -6,6 +6,8 @@ support-files =
   ccd-standards.html
   css_properties.js
   chrome/bug418986-2.js
+  chrome/match.png
+  chrome/mismatch.png
   descriptor_database.js
   empty.html
   media_queries_dynamic_xbl_binding.xml

layout/style/test/test_bug418986-2.html

@@ -7,13 +7,16 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=418986
   <meta charset="utf-8">
   <title>Test 2/3 for Bug #418986: Resist fingerprinting by preventing exposure of screen and system info</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/SpawnTask.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   <style id="test-css"></style>
   <script type="text/javascript;version=1.7" src="chrome/bug418986-2.js"></script>
   <script type="text/javascript;version=1.7">
     // Run all tests now.
     window.onload = function () {
-      test(true);
+      add_task(function* () {
+        yield test(true);
+      });
     };
   </script>
 </head>
@@ -23,6 +26,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=418986
 <div id="content" style="display: none">
 
 </div>
+<p id="pictures"></p>
 <pre id="test">
 </pre>
 </body>