CONSOLE MESSAGE: Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (resolution: 216dpi)
CONSOLE MESSAGE: Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 216dpi)
CONSOLE MESSAGE: Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (max-resolution: 216dpi)
CONSOLE MESSAGE: Consider using 'dppx' units instead of 'dpcm', as in CSS 'dpcm' means dots-per-CSS-centimeter, not dots-per-physical-centimeter, so does not correspond to the actual 'dpcm' of a screen. In media query expression: (resolution: 96dpcm)
CONSOLE MESSAGE: Consider using 'dppx' units instead of 'dpcm', as in CSS 'dpcm' means dots-per-CSS-centimeter, not dots-per-physical-centimeter, so does not correspond to the actual 'dpcm' of a screen. In media query expression: (min-resolution: 96dpcm)
CONSOLE MESSAGE: Consider using 'dppx' units instead of 'dpcm', as in CSS 'dpcm' means dots-per-CSS-centimeter, not dots-per-physical-centimeter, so does not correspond to the actual 'dpcm' of a screen. In media query expression: (max-resolution: 96dpcm)
CONSOLE MESSAGE: Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 300dpi)
CONSOLE MESSAGE: Consider using 'dppx' units instead of 'dpcm', as in CSS 'dpcm' means dots-per-CSS-centimeter, not dots-per-physical-centimeter, so does not correspond to the actual 'dpcm' of a screen. In media query expression: (min-resolution: 118dpcm)
CSS3 media query test: resolution query with dppx. Using style element, @media css rule.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS matchMedia('(resolution: 0dpi)').matches is false
PASS matchMedia('(min-resolution: 0dpi)').matches is false
PASS matchMedia('(max-resolution: 0dpi)').matches is false
PASS matchMedia('(resolution: 1.5dppx)').matches is true
PASS resolutionFromStyle() is 1.5
PASS matchMedia('(resolution: 2dppx)').matches is true
PASS resolutionFromStyle() is 2
PASS matchMedia('(resolution: 1dppx)').matches is true
PASS resolutionFromStyle() is 1
PASS matchMedia('(resolution: 2.25dppx)').matches is true
PASS resolutionFromStyle() is 2.25
PASS matchMedia('(resolution)').matches is true
PASS matchMedia('(resolution: 216dpi)').matches is true
PASS matchMedia('(min-resolution: 216dpi)').matches is true
PASS matchMedia('(max-resolution: 216dpi)').matches is true
PASS matchMedia('(resolution: 96dpcm)').matches is true
PASS matchMedia('(min-resolution: 96dpcm)').matches is true
PASS matchMedia('(max-resolution: 96dpcm)').matches is true
PASS matchMedia('(min-resolution: 300dpi)').matches is true
PASS matchMedia('(min-resolution: 118dpcm)').matches is true
PASS resolutionFromStyle() is 3
PASS resolutionFromStyle() is 3.125
PASS successfullyParsed is true

TEST COMPLETE