Math.ceil the height value passed to setDeviceMetricsOverride (#174)

* Math.ceil the height passed to setDeviceMetricsOverride * Add a test case for non-integer viewport Add reference images for Non-Integer Viewport * Fix loki logo URL in visual tests (#175)
oblador · Oct 2, 2019 · dd8e289 · dd8e289
1 parent 112765d
commit dd8e289
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 1 deletion.
diff --git a/examples/react/.loki/reference/chrome_a4_Non_Int_Viewport_default.png b/examples/react/.loki/reference/chrome_a4_Non_Int_Viewport_default.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_Non_Int_Viewport_default.png b/examples/react/.loki/reference/chrome_iphone7_Non_Int_Viewport_default.png
diff --git a/examples/react/.loki/reference/chrome_laptop_Non_Int_Viewport_default.png b/examples/react/.loki/reference/chrome_laptop_Non_Int_Viewport_default.png
diff --git a/examples/react/src/NonIntViewport.js b/examples/react/src/NonIntViewport.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const NonIntViewport = ({ children }) => (
+  <div style={{ 
+      width :'100%',
+      paddingTop : '17%',
+      backgroundColor : '#00f'
+  }}>
+        { children }
+  </div>
+);
+
+export default NonIntViewport;
diff --git a/examples/react/src/stories/index.js b/examples/react/src/stories/index.js
@@ -12,6 +12,7 @@ import MediaAwareComponent from '../MediaAwareComponent';
 import StackedElements from '../StackedElements';
 import StackedInvisibleElements from '../StackedInvisibleElements';
 import LongElement from '../LongElement';
+import NonIntViewport from '../NonIntViewport';
 
 storiesOf('Welcome', module).lokiSkip('to Storybook', () => (
   <Welcome showApp={linkTo('Button')} />
@@ -53,3 +54,10 @@ storiesOf('Multiple elements', module)
   .add('Invisible elements', () => <StackedInvisibleElements />);
 
 storiesOf('Long Element', module).add('default', () => <LongElement />);
+
+storiesOf('Non-Int Viewport', module)
+  .add('default', () => (
+    <NonIntViewport>
+      <LongElement />
+    </NonIntViewport>
+));
diff --git a/src/targets/chrome/create-chrome-target.js b/src/targets/chrome/create-chrome-target.js
@@ -192,7 +192,7 @@ function createChromeTarget(
             resetDeviceMetrics = true;
             await Emulation.setDeviceMetricsOverride(
               Object.assign({}, deviceMetrics, {
-                height: position.y + position.height,
+                height: Math.ceil(position.y + position.height),
               })
             );
           }