diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /layout/style/test/chrome/bug418986-2.js | |
parent | Initial commit. (diff) | |
download | thunderbird-upstream.tar.xz thunderbird-upstream.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/style/test/chrome/bug418986-2.js')
-rw-r--r-- | layout/style/test/chrome/bug418986-2.js | 329 |
1 files changed, 329 insertions, 0 deletions
diff --git a/layout/style/test/chrome/bug418986-2.js b/layout/style/test/chrome/bug418986-2.js new file mode 100644 index 0000000000..99ca030116 --- /dev/null +++ b/layout/style/test/chrome/bug418986-2.js @@ -0,0 +1,329 @@ +// # Bug 418986, part 2. + +const is_chrome_window = window.location.protocol === "chrome:"; + +const HTML_NS = "http://www.w3.org/1999/xhtml"; + +// 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 +// we skip the media query. +var expected_values = [ + ["color", null, 8], + ["color-index", null, 0], + ["aspect-ratio", null, window.innerWidth + "/" + window.innerHeight], + [ + "device-aspect-ratio", + screen.width + "/" + screen.height, + window.innerWidth + "/" + window.innerHeight, + ], + ["device-height", screen.height + "px", window.innerHeight + "px"], + ["device-width", screen.width + "px", window.innerWidth + "px"], + ["grid", null, 0], + ["height", window.innerHeight + "px", window.innerHeight + "px"], + ["monochrome", null, 0], + // Square is defined as portrait: + [ + "orientation", + null, + window.innerWidth > window.innerHeight ? "landscape" : "portrait", + ], + ["resolution", null, "96dpi"], + [ + "resolution", + [ + 0.999 * window.devicePixelRatio + "dppx", + 1.001 * window.devicePixelRatio + "dppx", + ], + "1dppx", + ], + ["width", window.innerWidth + "px", window.innerWidth + "px"], + ["-moz-device-pixel-ratio", window.devicePixelRatio, 1], + [ + "-moz-device-orientation", + screen.width > screen.height ? "landscape" : "portrait", + window.innerWidth > window.innerHeight ? "landscape" : "portrait", + ], +]; + +// These media queries return value 0 or 1 when the pref is off. +// When the pref is on, they should not match. +var suppressed_toggles = [ + "-moz-mac-graphite-theme", + // Not available on most OSs. + // "-moz-maemo-classic", + "-moz-scrollbar-end-backward", + "-moz-scrollbar-end-forward", + "-moz-scrollbar-start-backward", + "-moz-scrollbar-start-forward", + "-moz-windows-compositor", + "-moz-windows-default-theme", + "-moz-windows-glass", + "-moz-gtk-csd-available", + "-moz-gtk-csd-minimize-button", + "-moz-gtk-csd-maximize-button", + "-moz-gtk-csd-close-button", + "-moz-gtk-csd-reversed-placement", +]; + +var toggles_enabled_in_content = []; + +// Read the current OS. +var OS = SpecialPowers.Services.appinfo.OS; + +// If we are using Windows, add an extra toggle only +// available on that OS. +if (OS === "WINNT") { + suppressed_toggles.push("-moz-windows-classic"); +} + +// __keyValMatches(key, val)__. +// Runs a media query and returns true if key matches to val. +var keyValMatches = (key, val) => + matchMedia("(" + key + ":" + val + ")").matches; + +// __testMatch(key, val)__. +// Attempts to run a media query match for the given key and value. +// If value is an array of two elements [min max], then matches any +// value in-between. +var testMatch = function (key, val) { + if (val === null) { + return; + } else if (Array.isArray(val)) { + ok( + keyValMatches("min-" + key, val[0]) && + keyValMatches("max-" + key, val[1]), + "Expected " + key + " between " + val[0] + " and " + val[1] + ); + } else { + ok(keyValMatches(key, val), "Expected " + key + ":" + val); + } +}; + +// __testToggles(resisting)__. +// Test whether we are able to match the "toggle" media queries. +var testToggles = function (resisting) { + suppressed_toggles.forEach(function (key) { + var exists = keyValMatches(key, 0) || keyValMatches(key, 1); + if (!toggles_enabled_in_content.includes(key) && !is_chrome_window) { + ok(!exists, key + " should not exist."); + } else { + ok(exists, key + " should exist."); + if (resisting) { + ok( + keyValMatches(key, 0) && !keyValMatches(key, 1), + "Should always match as false" + ); + } + } + }); +}; + +// __generateHtmlLines(resisting)__. +// Create a series of div elements that look like: +// `<div class='spoof' id='resolution'>resolution</div>`, +// where each line corresponds to a different media query. +var generateHtmlLines = function (resisting) { + let fragment = document.createDocumentFragment(); + expected_values.forEach(function ([key, offVal, onVal]) { + let val = resisting ? onVal : offVal; + if (val) { + let div = document.createElementNS(HTML_NS, "div"); + div.setAttribute("class", "spoof"); + div.setAttribute("id", key); + div.textContent = key; + fragment.appendChild(div); + } + }); + suppressed_toggles.forEach(function (key) { + let div = document.createElementNS(HTML_NS, "div"); + div.setAttribute("class", "suppress"); + div.setAttribute("id", key); + div.textContent = key; + fragment.appendChild(div); + }); + return fragment; +}; + +// __cssLine__. +// Creates a line of css that looks something like +// `@media (resolution: 1ppx) { .spoof#resolution { background-color: green; } }`. +var cssLine = function (query, clazz, id, color) { + return ( + "@media " + + query + + " { ." + + clazz + + "#" + + id + + " { 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-). +var 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. +var mediaQueryCSSLine = function (key, val, color) { + if (val === null) { + return ""; + } + return cssLine(constructQuery(key, val), "spoof", key, color); +}; + +// __suppressedMediaQueryCSSLine(key, color)__. +// Creates a CSS line that matches the existence of a +// media query that is supposed to be suppressed. +var suppressedMediaQueryCSSLine = function (key, color, suppressed) { + let query = "(" + key + ": 0), (" + key + ": 1)"; + return cssLine(query, "suppress", key, color); +}; + +// __generateCSSLines(resisting)__. +// Creates a series of lines of CSS, each of which corresponds to +// a different media query. If the query produces a match to the +// expected value, then the element will be colored green. +var generateCSSLines = function (resisting) { + let lines = ".spoof { background-color: red;}\n"; + expected_values.forEach(function ([key, offVal, onVal]) { + lines += mediaQueryCSSLine(key, resisting ? onVal : offVal, "green"); + }); + lines += + ".suppress { background-color: " + (resisting ? "green" : "red") + ";}\n"; + suppressed_toggles.forEach(function (key) { + if ( + !toggles_enabled_in_content.includes(key) && + !resisting && + !is_chrome_window + ) { + lines += "#" + key + " { background-color: green; }\n"; + } else { + lines += suppressedMediaQueryCSSLine(key, "green"); + } + }); + return lines; +}; + +// __green__. +// Returns the computed color style corresponding to green. +var green = "rgb(0, 128, 0)"; + +// __testCSS(resisting)__. +// Creates a series of divs and CSS using media queries to set their +// background color. If all media queries match as expected, then +// all divs should have a green background color. +var testCSS = function (resisting) { + document.getElementById("display").appendChild(generateHtmlLines(resisting)); + document.getElementById("test-css").textContent = generateCSSLines(resisting); + let cssTestDivs = document.querySelectorAll(".spoof,.suppress"); + for (let div of cssTestDivs) { + let color = window.getComputedStyle(div).backgroundColor; + ok(color === green, "CSS for '" + div.id + "'"); + } +}; + +// __testOSXFontSmoothing(resisting)__. +// When fingerprinting resistance is enabled, the `getComputedStyle` +// should always return `undefined` for `MozOSXFontSmoothing`. +var testOSXFontSmoothing = function (resisting) { + let div = document.createElementNS(HTML_NS, "div"); + div.style.MozOsxFontSmoothing = "unset"; + document.documentElement.appendChild(div); + let readBack = window.getComputedStyle(div).MozOsxFontSmoothing; + div.remove(); + let smoothingPref = SpecialPowers.getBoolPref( + "layout.css.osx-font-smoothing.enabled", + false + ); + is( + readBack, + resisting ? "" : smoothingPref ? "auto" : "", + "-moz-osx-font-smoothing" + ); +}; + +// __sleep(timeoutMs)__. +// Returns a promise that resolves after the given timeout. +var 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. +var testMediaQueriesInPictureElements = async function (resisting) { + const MATCH = "/tests/layout/style/test/chrome/match.png"; + let container = document.getElementById("pictures"); + let testImages = []; + for (let [key, offVal, onVal] of expected_values) { + let expected = resisting ? onVal : offVal; + if (expected) { + let picture = document.createElementNS(HTML_NS, "picture"); + let query = constructQuery(key, expected); + ok(matchMedia(query).matches, `${query} should match`); + + let source = document.createElementNS(HTML_NS, "source"); + source.setAttribute("srcset", MATCH); + source.setAttribute("media", query); + + let image = document.createElementNS(HTML_NS, "img"); + image.setAttribute("title", key + ":" + expected); + image.setAttribute("class", "testImage"); + image.setAttribute("src", "/tests/layout/style/test/chrome/mismatch.png"); + image.setAttribute("alt", key); + + testImages.push(image); + + picture.appendChild(source); + picture.appendChild(image); + container.appendChild(picture); + } + } + const matchURI = new URL(MATCH, document.baseURI).href; + await sleep(0); + for (let testImage of testImages) { + is( + testImage.currentSrc, + matchURI, + "Media query '" + testImage.title + "' in picture should match." + ); + } +}; + +// __pushPref(key, value)__. +// Set a pref value asynchronously, returning a promise that resolves +// when it succeeds. +var pushPref = function (key, value) { + return new Promise(function (resolve, reject) { + SpecialPowers.pushPrefEnv({ set: [[key, value]] }, resolve); + }); +}; + +// __test(isContent)__. +// Run all tests. +var test = async function (isContent) { + for (prefValue of [false, true]) { + await pushPref("privacy.resistFingerprinting", prefValue); + let resisting = prefValue && isContent; + expected_values.forEach(function ([key, offVal, onVal]) { + testMatch(key, resisting ? onVal : offVal); + }); + testToggles(resisting); + testCSS(resisting); + if (OS === "Darwin") { + testOSXFontSmoothing(resisting); + } + await testMediaQueriesInPictureElements(resisting); + } +}; |