fix: revert to 96dpi as reference

I did not read correctly the W3C documentation.
* DPI = dots per inch = device pixel per inch
* DPPX = dots per pixel
* 1in = 72pt = 96px

So:
* 1dpi = 1/72dppt = 1/96dppx
* 1dppx = 72dppt = 96dpi

diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index ff0cf93b892bf20f672aa5246edd5e01e310363a..9b301753bdb173ff508e07a160eeb684beff4d56 100644 (file)
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -50,10 +50,9 @@ $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
+  // Web standard Pixels per inch. (1ddpx / $std-web-dpi) = 1dpi
   // See https://www.w3.org/TR/css-values-3/#absolute-lengths
-  $std-web-dpi: 72;
-  $std-web-ppi: 96;
+  $std-web-dpi: 96;
 
   // Size or keyword
   $bp: nth($val, 1);
@@ -111,7 +110,7 @@ $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/$std-web-ppi), -zf-bp-to-em($bp-next) - (1/16));
+      $bp-max: if($hidpi, $bp-next - (1/$std-web-dpi), -zf-bp-to-em($bp-next) - (1/16));
     }
   }
 

diff --git a/test/sass/_breakpoint.scss b/test/sass/_breakpoint.scss
index b0799f774327dcf387adeb18cb65db26875d4c4e..55ef712c70e6dbd5dd0c83a720cf1d7c4f71223c 100755 (executable)
--- a/test/sass/_breakpoint.scss
+++ b/test/sass/_breakpoint.scss
@@ -62,33 +62,33 @@
   //
   // Note for the following "magic numbers":
   //
-  // We expect maximum values to have 1px less (px it is the most precise web unit we have).
+  // We expect maximum values to have 1 dot less (dot it is the most precise web unit we have there).
   // But sinces values are not in pixels, we have to calculate what 1px is in these units.
   // See https://www.w3.org/TR/css-values-3/#absolute-lengths
   //
-  // For a x2 resolution (device pixels per web pixels)
-  // 2dppx - 1px
-  // = 2 - (1 / 96)           = 1.98958(...)dppx
-  // = (2 - (1 / 96)) * 72    = 143.25(...)dpi
+  // For a x2 resolution (device pixels per web pixels - or Dots Per PiXel)
+  // 2dppx - 1 dot
+  // = 2 - (1 / 96)
+  // = 1.98958(...)dppx
   //
-  // For a x3 resolution (device pixels per web pixels)
-  // 3dppx - 1px
-  // = 3 - (1 / 96)           = 2.98958(...)dppx
-  // = (3 - (1 / 96)) * 72    = 215.25(...)dpi
+  // For a x3 resolution
+  // 3dppx - 1 dot
+  // = 3 - (1 / 96)
+  // = 2.98958(...)dppx
   //
   // etc...
   //
 
   @include test('Breakpoint (Retina) [function]') {
-    $expect-2: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi)';
+    $expect-2: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
 
     @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: 108dpi)';
-    $expect-2: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi)';
+    $expect-1-5: '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)';
+    $expect-2: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
 
     @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');
@@ -104,9 +104,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: 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)';
+    $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)';
 
     @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');
@@ -119,8 +119,8 @@
   }
 
   @include test('Breakpoint (HIDPI Down Range) [function]') {
-    $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-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-highest: '';
 
     @include assert-equal(breakpoint(hidpi-1-5 down), $expect-1-5,