CSS @media (width: *px) may not work if devicePixelRatio is greater than 1.
When devicePixelRatio is greater than 1, the viewport size of the CSS media
query may appear as non-integers. This can happen in Chrome for Android if
the UseZoomForDSF flag is enabled.
For example:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media (width: 393px) {
p {
color: red;
}
}
</style>
<p>text</p>
If the device width is 1081 physical pixels and devicePixelRatio is 2.75. The
viewport width of the CSS media query will be 393.091px.
Change-Id: I25ee4da1ebdbd57202fa8c5e360138a8058f578f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1695522
Commit-Queue: David Bokan <bokan@chromium.org>
Reviewed-by: David Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680047}
diff --git a/css/mediaqueries/width-equals-window-inner-width.html b/css/mediaqueries/width-equals-window-inner-width.html
new file mode 100644
index 0000000..775c111
--- /dev/null
+++ b/css/mediaqueries/width-equals-window-inner-width.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CSS Test: CSS media query width equals window innerWidth</title>
+
+<link rel="author" title="Jinfeng Ma" href="mailto:majinfeng1@xiaomi.org">
+<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#width">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-window-innerwidth">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<!--
+It'd be best to programmatically change device scale factor so that the document
+width becomes non integral but for now this test is only effective when run on
+devices with a fractional device scale factor.
+-->
+<script type="text/javascript">
+ 'use strict';
+ test(() => {
+ assert_true(window.matchMedia('(width: ' + window.innerWidth + 'px)').matches);
+ }, 'CSS media query width equals window innerWidth.');
+</script>
