fix: fix conversion to DPI of hidpi breakpoints in `breakpoint` function

diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index 8c422533be59cfa17a11c1d32f3834c013337fe6..ecf159c2de1bd9e2cf2f6a37eafb96ef511e81e0 100644 (file)
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -49,6 +49,11 @@ $breakpoint-classes: (small medium large) !default;
 ///
 /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
 @function breakpoint($val: $-zf-zero-breakpoint) {
+  // Web standard Dots per inch and Pixels per inch. (1 / $std-web-ppi) = 1px
+  // See https://www.w3.org/TR/css-values-3/#absolute-lengths
+  $std-web-dpi: 72;
+  $std-web-ppi: 96;
+
   // Size or keyword
   $bp: nth($val, 1);
   // Value of the following breakpoint
@@ -105,14 +110,16 @@ $breakpoint-classes: (small medium large) !default;
     }
     // If the breakpoint is named, the max limit is the following breakpoint - 1px.
     @else if $bp-next {
-      $bp-max: if($hidpi, $bp-next - (1/96), -zf-bp-to-em($bp-next) - (1/16));
+      $bp-max: if($hidpi, $bp-next - (1/$std-web-ppi), -zf-bp-to-em($bp-next) - (1/16));
     }
   }
 
   // Generate the media query string from min and max limits.
   @if $hidpi {
-    $bp-min-dpi: if($bp-min, $bp-min * 96dpi, $bp-min);
-    $bp-max-dpi: if($bp-max, $bp-max * 96dpi, $bp-max);
+    // Generate values in DPI instead of DPPX for an IE9-11/Opera mini compatibility.
+    // See https://caniuse.com/#feat=css-media-resolution
+    $bp-min-dpi: if($bp-min, $bp-min * $std-web-dpi * 1dpi, $bp-min);
+    $bp-max-dpi: if($bp-max, $bp-max * $std-web-dpi * 1dpi, $bp-max);
     @return zf-str-join(
       -zf-bp-join($bp-min, $bp-max, '-webkit-min-device-pixel-ratio', '-webkit-max-device-pixel-ratio'),
       -zf-bp-join($bp-min-dpi, $bp-max-dpi, 'min-resolution', 'max-resolution'),

diff --git a/test/sass/_breakpoint.scss b/test/sass/_breakpoint.scss
index 9c9045f9f20f9a3099f86a6f19c100f5d4c047a0..52480f30658bf50f41f454d1373ef4e7fb27f895 100755 (executable)
--- a/test/sass/_breakpoint.scss
+++ b/test/sass/_breakpoint.scss
@@ -60,15 +60,15 @@
   // --- Breakpoint: HiDPI/Retina ---
 
   @include test('Breakpoint (Retina) [function]') {
-    $expect-2: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
+    $expect-2: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi)';
 
     @include assert-equal(breakpoint(retina), $expect-2,
       'Creates a x2 HiDPI range out of the retina alias breakpoint');
   }
 
   @include test('Breakpoint (HIDPI Default/Up Range) [function]') {
-    $expect-1-5: '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)';
-    $expect-2: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
+    $expect-1-5: '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 108dpi)';
+    $expect-2: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi)';
 
     @include assert-equal(breakpoint(hidpi-1-5 up), $expect-1-5,
       'Creates a x1.5 HiDPI up range out of a x1.5 HiDPI breakpoint');
@@ -84,9 +84,9 @@
   }
 
   @include test('Breakpoint (HIDPI Only Range) [function]') {
-    $expect-1-5: '(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.98958), (min-resolution: 144dpi) and (max-resolution: 191dpi)';
-    $expect-2: '(-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.98958), (min-resolution: 192dpi) and (max-resolution: 287dpi)';
-    $expect-highest: '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi)';
+    $expect-1-5: '(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.98958), (min-resolution: 108dpi) and (max-resolution: 143.25dpi)';
+    $expect-2: '(-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.98958), (min-resolution: 144dpi) and (max-resolution: 215.25dpi)';
+    $expect-highest: '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 216dpi)';
 
     @include assert-equal(breakpoint(hidpi-1-5 only), $expect-1-5,
       'Creates a x1.5 HiDPI only range out of a x1.5 HiDPI breakpoint');
@@ -99,8 +99,8 @@
   }
 
   @include test('Breakpoint (HIDPI Down Range) [function]') {
-    $expect-1-5: '(-webkit-max-device-pixel-ratio: 1.98958), (max-resolution: 191dpi)';
-    $expect-2: '(-webkit-max-device-pixel-ratio: 2.98958), (max-resolution: 287dpi)';
+    $expect-1-5: '(-webkit-max-device-pixel-ratio: 1.98958), (max-resolution: 143.25dpi)';
+    $expect-2: '(-webkit-max-device-pixel-ratio: 2.98958), (max-resolution: 215.25dpi)';
     $expect-highest: '';
 
     @include assert-equal(breakpoint(hidpi-1-5 down), $expect-1-5,