Bug 1376931 Part 5: Add test to verify that media queries with a resolution set to window.devicePixelRatio dppx match for all zoom values exposed by the UI. r=heycam
authorBrad Werth <bwerth@mozilla.com>
Fri, 22 Sep 2017 17:00:01 -0700
changeset 384585 abdc7d29ddf851e80f2e594ccbed3770fcca9aad
parent 384584 914b4cd64a4a99f6dc94728020bb42246fa68445
child 384586 645f013cd54f5c2b621a77e15c6a2b259d9d0a55
push id32631
push userarchaeopteryx@coole-files.de
push dateThu, 05 Oct 2017 08:51:33 +0000
treeherdermozilla-central@66042a706980 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1376931
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1376931 Part 5: Add test to verify that media queries with a resolution set to window.devicePixelRatio dppx match for all zoom values exposed by the UI. r=heycam MozReview-Commit-ID: Kr7J4ZkZ1hZ
dom/tests/mochitest/general/mochitest.ini
dom/tests/mochitest/general/test_media_queries_with_zoom.html
--- a/dom/tests/mochitest/general/mochitest.ini
+++ b/dom/tests/mochitest/general/mochitest.ini
@@ -97,16 +97,17 @@ subsuite = clipboard
 skip-if = toolkit == 'android' #TIMED_OUT
 [test_for_of.html]
 [test_framedhistoryframes.html]
 [test_frameElementWrapping.html]
 [test_img_mutations.html]
 [test_interfaces.html]
 [test_interfaces_secureContext.html]
 scheme = https
+[test_media_queries_with_zoom.html]
 [test_navigation_timing.html]
 [test_network_events.html]
 skip-if = true
 # Disable this test until bug 795711 is fixed.
 [test_offsets.html]
 support-files = test_offsets.js
 [test_outerHTML.html]
 [test_outerHTML.xhtml]
new file mode 100644
--- /dev/null
+++ b/dom/tests/mochitest/general/test_media_queries_with_zoom.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Media Queries with Zoom</title>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+
+<body>
+
+<div>Testing media queries with different zoom levels</div>
+
+<script type="application/javascript">
+
+const originalDPR = window.devicePixelRatio;
+const originalZoom = SpecialPowers.getFullZoom(window);
+
+const zoomsToTest = [
+300,
+240,
+200,
+170,
+150,
+133,
+120,
+110,
+100,
+90,
+80,
+67,
+50,
+30,
+];
+
+for (let i = 0; i < zoomsToTest.length; ++i) {
+  let zoomPercent = zoomsToTest[i];
+
+  let relativeZoom = originalZoom * zoomPercent / 100;
+  SpecialPowers.setFullZoom(window, relativeZoom);
+  let actualZoom = SpecialPowers.getDeviceFullZoom(window);
+  let targetDPR = (originalDPR * actualZoom);
+  let actualDPR = window.devicePixelRatio;
+  let mql = window.matchMedia(`(resolution: ${targetDPR}dppx)`);
+  ok(mql.matches, `At ${zoomPercent}% zoom, target ${targetDPR}dppx matches ${actualDPR}dppx.`);
+}
+
+// Reset the zoom when the test is done.
+SpecialPowers.setFullZoom(window, originalZoom);
+</script>
+
+</body>
+</html>