layout/style/test/bug1729861.js

   1 // # Bug 1729861
   2
   3 // Expected values. Format: [name, pref_off_value, pref_on_value]
   4 var expected_values = [
   5   [
   6     "device-aspect-ratio",
   7     screen.width + "/" + screen.height,
   8     window.innerWidth + "/" + window.innerHeight,
   9   ],
  10   ["device-height", screen.height + "px", window.innerHeight + "px"],
  11   ["device-width", screen.width + "px", window.innerWidth + "px"],
  12 ];
  13
  14 // Create a line containing a CSS media query and a rule to set the bg color.
  15 var mediaQueryCSSLine = function (key, val, color) {
  16   return (
  17     "@media (" +
  18     key +
  19     ": " +
  20     val +
  21     ") { #" +
  22     key +
  23     " { background-color: " +
  24     color +
  25     "; } }\n"
  26   );
  27 };
  28
  29 var green = "rgb(0, 128, 0)";
  30 var blue = "rgb(0, 0, 255)";
  31
  32 // Set a pref value asynchronously, returning a promise that resolves
  33 // when it succeeds.
  34 var pushPref = function (key, value) {
  35   return SpecialPowers.pushPrefEnv({ set: [[key, value]] });
  36 };
  37
  38 // Set the resistFingerprinting pref to the given value, and then check that the background
  39 // color has been updated properly as a result of re-evaluating the media queries.
  40 var checkColorForPref = async function (setting, testDivs, expectedColor) {
  41   await pushPref("privacy.resistFingerprinting", setting);
  42   for (let div of testDivs) {
  43     let color = window.getComputedStyle(div).backgroundColor;
  44     is(color, expectedColor, "background for '" + div.id + "' is " + color);
  45   }
  46 };
  47
  48 var test = async function () {
  49   // If the "off" and "on" expected values are the same, we can't actually
  50   // test anything here. (Might this be the case on mobile?)
  51   let skipTest = false;
  52   for (let [key, offVal, onVal] of expected_values) {
  53     if (offVal == onVal) {
  54       todo(false, "Unable to test because '" + key + "' is invariant");
  55       return;
  56     }
  57   }
  58
  59   let css =
  60     ".test { margin: 1em; padding: 1em; color: white; width: max-content; font: 2em monospace }\n";
  61
  62   // Create a test element for each of the media queries we're checking, and append the matching
  63   // "on" and "off" media queries to the CSS.
  64   let testDivs = [];
  65   for (let [key, offVal, onVal] of expected_values) {
  66     let div = document.createElement("div");
  67     div.textContent = key;
  68     div.setAttribute("class", "test");
  69     div.setAttribute("id", key);
  70     testDivs.push(div);
  71     document.getElementById("display").appendChild(div);
  72     css += mediaQueryCSSLine(key, onVal, "green");
  73     css += mediaQueryCSSLine(key, offVal, "blue");
  74   }
  75   document.getElementById("test-css").textContent = css;
  76
  77   // Check that the test elements change color as expected when we flip the resistFingerprinting pref.
  78   await checkColorForPref(true, testDivs, green);
  79   await checkColorForPref(false, testDivs, blue);
  80   await checkColorForPref(true, testDivs, green);
  81 };