Repository navigation
A media resolution in dpi or dpcm converts to dppx at 160 dpi, so (min-resolution: 300dpi) matches a 2x screen #544
Description
Before submitting a new issue
- I tested using the latest version of the library, as the bug might be already fixed.
- I tested using a supported version of react native.
- I checked for possible duplicate issues, with possible answers.
Bug summary
parseMediaFeatureValue (src/compiler/media-query.ts) turns a resolution into dots per px for the runtime to compare with PixelRatio.get(), dividing dpi by 160 ("Mobile devices use 160 as a standard") and dpcm by 160 × 2.54. css-values-4 fixes 1dppx at 96dpi, and a dot per centimetre is 2.54 dots per inch, so (min-resolution: 300dpi), 3.125dppx, matches a 2x screen, and so does (min-resolution: 100dpcm), 2.65dppx.
The 300dpi and 100dpcm cases fail, matching a screen below their resolution; the 2dppx, 192dpi and 75dpcm cases pass.
Library version
main at 2421ea7 (0.0.0-nightly.2421ea7)
Environment info
System:
OS: Windows 11 10.0.26300
CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor "
Memory: 155.26 GB / 255.67 GB
Binaries:
Node:
version: 26.12.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 4.9.2
path: C:\Users\<user>\AppData\Roaming\npm\yarn.CMD
npm:
version: 12.2.1
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels:
- "33"
- "35"
- "35"
- "35"
- "36"
- "37"
Build Tools:
- 35.0.0
- 36.0.0
- 36.1.0
- 37.0.0
System Images:
- android-26 | Google APIs Intel x86_64 Atom
- android-28 | Google APIs Intel x86_64 Atom
- android-29 | Google APIs Intel x86_64 Atom
- android-30 | Google APIs Intel x86_64 Atom
- android-31 | Google APIs Intel x86_64 Atom
- android-32 | Google APIs Intel x86_64 Atom
- android-33 | Google APIs Intel x86_64 Atom
- android-34 | Google APIs Intel x86_64 Atom
- android-35 | Google APIs Intel x86_64 Atom
- android-36.1 | Google Play Intel x86_64 Atom
- android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
- android-37.0 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-262.9437.185.2621.16467767
Visual Studio: Not Found
Languages:
Java:
version: 17.0.20.1
path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 19.2.3
wanted: 19.2.3
react-native:
installed: 0.86.3
wanted: 0.86.3
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not foundSteps to reproduce
- Clone the reproducer branch, which is
mainat 2421ea7 with one file added,src/__tests__/native/media-resolution-units.test.tsx, and install:git clone --branch repro/544-media-resolution-units https://github.com/YevheniiKotyrlo/react-native-css cd react-native-css yarn install - Run
yarn jest src/__tests__/native/media-resolution-units.test.tsx.
src/__tests__/native/media-resolution-units.test.tsx:
import { PixelRatio } from "react-native";
import { render, screen } from "@testing-library/react-native";
import { View } from "react-native-css/components/View";
import { registerCSS, testID } from "react-native-css/jest";
test.each([
["(min-resolution: 2dppx)", true],
["(min-resolution: 192dpi)", true],
["(min-resolution: 300dpi)", false],
["(min-resolution: 75dpcm)", true],
["(min-resolution: 100dpcm)", false],
])(`on a ${PixelRatio.get()}x screen, @media %s matches: %s`, (condition, expected) => {
registerCSS(`.a { width: 10px; } @media ${condition} { .a { width: 37px; } }`);
render(<View testID={testID} className="a" />);
expect(screen.getByTestId(testID).props.style.width === 37).toBe(expected);
});Expected: (min-resolution: 300dpi), 3.125dppx, and (min-resolution: 100dpcm) do not match a 2x screen.
Actual: both match a 2x screen, read at 160 dpi to the dppx.
The run's output on main at 2421ea7, Windows 11, Node 26.12.1
FAIL src/__tests__/native/media-resolution-units.test.tsx
√ on a 2x screen, @media (min-resolution: 2dppx) matches: true (17 ms)
√ on a 2x screen, @media (min-resolution: 192dpi) matches: true (4 ms)
× on a 2x screen, @media (min-resolution: 300dpi) matches: false (3 ms)
√ on a 2x screen, @media (min-resolution: 75dpcm) matches: true (1 ms)
× on a 2x screen, @media (min-resolution: 100dpcm) matches: false (1 ms)
● on a 2x screen, @media (min-resolution: 300dpi) matches: false
expect(received).toBe(expected) // Object.is equality
Expected: false
Received: true
14 | registerCSS(`.a { width: 10px; } @media ${condition} { .a { width: 37px; } }`);
15 | render(<View testID={testID} className="a" />);
> 16 | expect(screen.getByTestId(testID).props.style.width === 37).toBe(expected);
| ^
17 | });
18 |
at toBe (src/__tests__/native/media-resolution-units.test.tsx:16:63)
● on a 2x screen, @media (min-resolution: 100dpcm) matches: false
expect(received).toBe(expected) // Object.is equality
Expected: false
Received: true
14 | registerCSS(`.a { width: 10px; } @media ${condition} { .a { width: 37px; } }`);
15 | render(<View testID={testID} className="a" />);
> 16 | expect(screen.getByTestId(testID).props.style.width === 37).toBe(expected);
| ^
17 | });
18 |
at toBe (src/__tests__/native/media-resolution-units.test.tsx:16:63)
Test Suites: 1 failed, 1 total
Tests: 2 failed, 3 passed, 5 total
Snapshots: 0 total
Time: 1.087 s, estimated 2 s
Ran all test suites matching /src\\__tests__\\native\\media-resolution-units.test.tsx/i.
Reproducible example repository
https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/544-media-resolution-units
Activity