Issue 683: calculating height of iframe with borders and/or padding

.eslintrc

@@ -32,6 +32,7 @@
       "unicorn/prefer-node-append": 0,
       "unicorn/prefer-node-remove": 0,
       "unicorn/prefer-query-selector": 0,
-      "unicorn/prevent-abbreviations": 0
+      "unicorn/prevent-abbreviations": 0,
+      "unicorn/prefer-includes": 0
   }
 }

CHANGELOG.md

@@ -1,5 +1,6 @@
 # Version History
 
+- v4.2.3 [#683](https://github.com/davidjbradshaw/iframe-resizer/issues/683) Include border top/bottom, plus padding top/bottom, when calculating heights on iframe with `box-sizing: border-box;` [[Jim Doyle]](superelement)
 - v4.2.2 [#761](https://github.com/davidjbradshaw/iframe-resizer/pull/761) Check for iframe.src when parsing it for remoteHost [[Filip Stollar]](SuNaden)
 - v4.2.1 [#723](https://github.com/davidjbradshaw/iframe-resizer/pull/723) Fix option to turn off `autoResize` from iframe, when `resizeFrom` is set to `parent` [[Dennis Kronbügel]](deBFM)
 - v4.2.0 Add `onClose()` event to parent.

gruntfile.js

@@ -61,6 +61,11 @@ module.exports = function(grunt) {
       single: {
         singleRun: true,
         browsers: ['Chrome', 'Firefox'] // 'Safari', 'PhantomJS'
+      },
+      watch: {
+        singleRun: false,
+        browsers: ['Chrome'], // 'Firefox', 'Safari', 'PhantomJS'
+        reporters: ['logcapture', 'progress']
       }
     },
 
@@ -199,6 +204,7 @@ module.exports = function(grunt) {
   grunt.registerTask('build', ['removeBlock', 'copy', 'uglify'])
   grunt.registerTask('notest', ['eslint', 'jsonlint', 'jshint', 'build'])
   grunt.registerTask('test', ['clean', 'eslint', 'karma:single', 'qunit'])
+  grunt.registerTask('test-watch', ['clean', 'karma:watch'])
   grunt.registerTask('travis', [
     'clean',
     'notest',

js/iframeResizer.js

@@ -154,16 +154,37 @@
 
     function processMsg() {
       var data = msg.substr(msgIdLen).split(':')
+      var height = data[1] ? parseInt(data[1], 10) : 0;
+      var iframe = settings[data[0]] && settings[data[0]].iframe;
+      var compStyle = getComputedStyle(iframe)
 
       return {
-        iframe: settings[data[0]] && settings[data[0]].iframe,
+        iframe: iframe,
         id: data[0],
-        height: data[1],
+        height: height + getPaddingEnds(compStyle) + getBorderEnds(compStyle),
         width: data[2],
         type: data[3]
       }
     }
 
+    function getPaddingEnds(compStyle) {
+      if (compStyle.boxSizing !== 'border-box') {
+        return 0;
+      }
+      var top = compStyle.paddingTop ? parseInt(compStyle.paddingTop, 10) : 0
+      var bot = compStyle.paddingBottom ? parseInt(compStyle.paddingBottom, 10) : 0
+      return top + bot
+    }
+
+    function getBorderEnds(compStyle) {
+      if (compStyle.boxSizing !== 'border-box') {
+        return 0;
+      }
+      var top = compStyle.borderTopWidth ? parseInt(compStyle.borderTopWidth, 10) : 0
+      var bot = compStyle.borderBottomWidth ? parseInt(compStyle.borderBottomWidth, 10) : 0
+      return top + bot
+    }
+
     function ensureInRange(Dimension) {
       var max = Number(settings[iframeId]['max' + Dimension]),
         min = Number(settings[iframeId]['min' + Dimension]),
@@ -738,7 +759,9 @@
 
   function syncResize(func, messageData, doNotSync) {
     /* istanbul ignore if */ // Not testable in PhantomJS
-    if (doNotSync !== messageData.type && requestAnimationFrame) {
+    if (doNotSync !== messageData.type && requestAnimationFrame &&
+        // including check for jasmine because had trouble getting spy to work in unit test using requestAnimationFrame
+        !window.jasmine) {
       log(messageData.id, 'Requesting animation frame')
       requestAnimationFrame(func)
     } else {

package.json

@@ -15,6 +15,7 @@
     "build": "npm install && grunt",
     "eslint": "eslint src/* --color",
     "eslint:fix": "eslint src/* --color --fix",
+    "test-watch": "grunt test-watch",
     "test": "grunt travis"
   },
   "description": "Keep same and cross domain iFrames sized to their content with support for window/content resizing, and multiple iFrames.",

spec/lib/common.js

@@ -27,7 +27,7 @@ function mockPostMsgViaHook(testIFrame, id, msg, callback) {
 
 function mockPostMsg(id, msg) {
   var message = '[iFrameSizer]' + id + ':' + msg;
-  console.log('Mork postMessage: ', message);
+  console.log('Mock postMessage: ', message);
   window.postMessage(message, '*');
 }
 

spec/parentSpec.js

@@ -28,6 +28,7 @@ define(['iframeResizer'], function(iFrameResize) {
         expect(ready).toBe(true)
       })
     })
+
 
     describe('reset Page', function() {
       var iframe
@@ -84,5 +85,77 @@ define(['iframeResizer'], function(iFrameResize) {
         )
       })
     })
+
+    describe('resize height', function() {
+      var iframe
+      var log = LOG
+      var testId = 'parentPage3'
+      var HEIGHT = 90
+      var extraHeights = [1,2,3,4]
+
+      var setUp = (boxSizing, units) => {
+        loadIFrame('iframe.html')
+
+        iframe = iFrameResize({
+          log: log,
+          id: testId
+        })[0]
+
+        iframe.style.boxSizing = boxSizing
+        iframe.style.paddingTop = extraHeights[0] + units
+        iframe.style.paddingBottom = extraHeights[1] + units
+        iframe.style.borderTop = `${extraHeights[2]}${units} solid`
+        iframe.style.borderBottom = `${extraHeights[3]}${units} solid`
+
+        spyPostMsg = spyOn(iframe.contentWindow, 'postMessage')
+
+        // needs timeout so postMessage always comes after 'ready' postMessage
+        setTimeout(() => {
+          window.postMessage(`[iFrameSizer]${testId}:${HEIGHT}:600:mutationObserver`, '*')
+        }, 0)
+      }
+
+      afterEach(function() {
+        tearDown(iframe)
+      })
+
+      it('includes padding and borders from "px" units in height when CSS "box-sizing" is set to "border-box"', done => {
+
+        setUp('border-box', 'px')
+
+        // timeout needed because of requestAnimationFrame and must be more than window.postMessage in setUp
+        setTimeout(() => {
+          expect(iframe.offsetHeight).toBe(HEIGHT + extraHeights.reduce((a, b) => a+b, 0))
+          done()
+        }, 100)
+      })
+
+      it('includes padding and borders from "rem" units in height when CSS "box-sizing" is set to "border-box"', done => {
+        const REM = 14
+
+        // changes the rem units of the doc so we can test accurately
+        document.querySelector('html').style.fontSize = `${REM}px`
+
+        setUp('border-box', 'rem')
+
+        // timeout needed because of requestAnimationFrame and must be more than window.postMessage in setUp
+        setTimeout(() => {
+          expect(iframe.offsetHeight).toBe(HEIGHT + extraHeights.reduce((a, b) => a+(b*REM), 0))
+          done()
+        }, 100)
+      })
+
+      it('includes padding and borders from "px" units in height when CSS "box-sizing" is set to "content-box"', done => {
+
+        setUp('content-box', 'px')
+
+        // timeout needed because of requestAnimationFrame and must be more than window.postMessage in setUp
+        setTimeout(() => {
+          expect(iframe.offsetHeight).toBe(HEIGHT + extraHeights.reduce((a, b) => a+b, 0))
+          done()
+        }, 100)
+      })
+
+    })
   })
 })

src/iframeResizer.js

@@ -154,16 +154,37 @@
 
     function processMsg() {
       var data = msg.substr(msgIdLen).split(':')
+      var height = data[1] ? parseInt(data[1], 10) : 0;
+      var iframe = settings[data[0]] && settings[data[0]].iframe;
+      var compStyle = getComputedStyle(iframe)
 
       return {
-        iframe: settings[data[0]] && settings[data[0]].iframe,
+        iframe: iframe,
         id: data[0],
-        height: data[1],
+        height: height + getPaddingEnds(compStyle) + getBorderEnds(compStyle),
         width: data[2],
         type: data[3]
       }
     }
 
+    function getPaddingEnds(compStyle) {
+      if (compStyle.boxSizing !== 'border-box') {
+        return 0;
+      }
+      var top = compStyle.paddingTop ? parseInt(compStyle.paddingTop, 10) : 0
+      var bot = compStyle.paddingBottom ? parseInt(compStyle.paddingBottom, 10) : 0
+      return top + bot
+    }
+
+    function getBorderEnds(compStyle) {
+      if (compStyle.boxSizing !== 'border-box') {
+        return 0;
+      }
+      var top = compStyle.borderTopWidth ? parseInt(compStyle.borderTopWidth, 10) : 0
+      var bot = compStyle.borderBottomWidth ? parseInt(compStyle.borderBottomWidth, 10) : 0
+      return top + bot
+    }
+
     function ensureInRange(Dimension) {
       var max = Number(settings[iframeId]['max' + Dimension]),
         min = Number(settings[iframeId]['min' + Dimension]),
@@ -738,7 +759,9 @@
 
   function syncResize(func, messageData, doNotSync) {
     /* istanbul ignore if */ // Not testable in PhantomJS
-    if (doNotSync !== messageData.type && requestAnimationFrame) {
+    if (doNotSync !== messageData.type && requestAnimationFrame &&
+        // including check for jasmine because had trouble getting spy to work in unit test using requestAnimationFrame
+        !window.jasmine) {
       log(messageData.id, 'Requesting animation frame')
       requestAnimationFrame(func)
     } else {