[breakpoints] fix down function, eliminate 1px overlap with specified…

… breakpoint (#6504)

* Fix breakpoint's down function

- Should be consistent with the only function and set a max-width of 1 pixel less than the size of the specified breakpoint so that there isn't an overlap of 1 pixel.

* [breakpoints] down:
- use step instead of 1px

* [breakpoints] - Down, Between

- Removing a pixel is too much.  In Chrome and Edge inspectors, a viewport of 599 is actually 599.2.  We only need to ensure that it is less than 600.
- Subtract 1 percent of our step in Down and Between.

* [breakpoints] - down, between, only:
- update test to check for new max widths
- max-width will be 0.01 pixel less than the next breakpoint

src/styles/breakpoints.js

@@ -30,14 +30,14 @@ export default function createBreakpoints(
 
   function down(name) {
     const value = breakpoints[name] || name;
-    return `@media (max-width:${value}${unit})`;
+    return `@media (max-width:${value - (step / 100)}${unit})`;
   }
 
   function between(start, end) {
     const startIndex = keys.indexOf(start);
     const endIndex = keys.indexOf(end);
     return `@media (min-width:${values[startIndex]}${unit}) and (max-width:${
-      values[endIndex + 1] - step}${unit})`;
+      values[endIndex + 1] - (step / 100)}${unit})`;
   }
 
   function only(name) {

src/styles/breakpoints.spec.js

@@ -18,21 +18,21 @@ describe('createBreakpoints', () => {
 
   describe('down', () => {
     it('should work', () => {
-      assert.strictEqual(breakpoints.down('md'), '@media (max-width:960px)');
+      assert.strictEqual(breakpoints.down('md'), '@media (max-width:959.99px)');
     });
   });
 
   describe('between', () => {
     it('should work', () => {
       assert.strictEqual(breakpoints.between('sm', 'md'),
-        '@media (min-width:600px) and (max-width:1279px)');
+        '@media (min-width:600px) and (max-width:1279.99px)');
     });
   });
 
   describe('only', () => {
     it('should work', () => {
       assert.strictEqual(breakpoints.only('md'),
-        '@media (min-width:960px) and (max-width:1279px)');
+        '@media (min-width:960px) and (max-width:1279.99px)');
     });
 
     it('on xl should call up', () => {