├── .gitignore ├── .jscsrc ├── .jshintrc ├── CHANGELOG.md ├── Gruntfile.js ├── LICENSE-MIT ├── README.md ├── bower.json ├── component.json ├── dist ├── computedStyle.amd.js ├── computedStyle.commonjs.js ├── computedStyle.js └── computedStyle.min.js ├── lib ├── computedStyle.js └── templates │ ├── amd.mustache.js │ ├── commonjs.mustache.js │ └── vanilla.mustache.js ├── package.json └── test ├── computedStyle_test.html ├── computedStyle_test.js ├── invisibleIframe.html └── testem.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | tmp 4 | -------------------------------------------------------------------------------- /.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "requireCurlyBraces": [ 3 | "if", 4 | "else", 5 | "for", 6 | "while", 7 | "do", 8 | "try", 9 | "catch", 10 | "finally", 11 | "with" 12 | ], 13 | "requireSpaceAfterKeywords": true, 14 | "requireSpaceBeforeBlockStatements": true, 15 | "requireSpacesInConditionalExpression": true, 16 | "requireSpacesInFunctionExpression": { 17 | "beforeOpeningRoundBrace": true, 18 | "beforeOpeningCurlyBrace": true 19 | }, 20 | "requireSpacesInFunctionDeclaration": { 21 | "beforeOpeningCurlyBrace": true 22 | }, 23 | "disallowSpacesInFunctionDeclaration": { 24 | "beforeOpeningRoundBrace": true 25 | }, 26 | "disallowSpacesInCallExpression": true, 27 | "disallowMultipleVarDecl": true, 28 | "requireBlocksOnNewline": 1, 29 | "disallowPaddingNewlinesInBlocks": true, 30 | "disallowSpacesInsideObjectBrackets": "all", 31 | "disallowSpacesInsideArrayBrackets": "all", 32 | "disallowSpacesInsideParentheses": true, 33 | "disallowQuotedKeysInObjects": "allButReserved", 34 | "disallowSpaceAfterObjectKeys": true, 35 | "requireSpaceBeforeObjectValues": true, 36 | "requireCommaBeforeLineBreak": true, 37 | "requireOperatorBeforeLineBreak": true, 38 | "disallowSpaceAfterPrefixUnaryOperators": true, 39 | "disallowSpaceBeforePostfixUnaryOperators": true, 40 | "requireSpaceBeforeBinaryOperators": true, 41 | "requireSpaceAfterBinaryOperators": true, 42 | "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties", 43 | "disallowKeywords": [ 44 | "with" 45 | ], 46 | "disallowMultipleLineStrings": true, 47 | "disallowMultipleLineBreaks": true, 48 | "disallowMixedSpacesAndTabs": true, 49 | "disallowTrailingWhitespace": true, 50 | "disallowTrailingComma": true, 51 | "disallowKeywordsOnNewLine": [ 52 | "else", 53 | "catch", 54 | "finally" 55 | ], 56 | "requireLineFeedAtFileEnd": true, 57 | "maximumLineLength": { 58 | "value": 120, 59 | "allowUrlComments": true 60 | }, 61 | "requireDotNotation": true, 62 | "disallowYodaConditions": true, 63 | "requireSpaceAfterLineComment": true, 64 | "disallowNewlineBeforeBlockStatements": true, 65 | "validateLineBreaks": "LF", 66 | "validateQuoteMarks": { 67 | "mark": "'", 68 | "escape": true 69 | }, 70 | "validateIndentation": 2, 71 | "validateParameterSeparator": ", ", 72 | "safeContextKeyword": [ 73 | "that" 74 | ] 75 | } 76 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "eqeqeq": true, 3 | "freeze": true, 4 | "immed": true, 5 | "latedef": true, 6 | "nonbsp": true, 7 | "undef": true, 8 | "strict": false, 9 | "node": true, 10 | "browser": true, 11 | "sub": false, 12 | "globals": { 13 | "exports": true, 14 | "describe": true, 15 | "before": true, 16 | "beforeEach": true, 17 | "after": true, 18 | "afterEach": true, 19 | "it": true 20 | }, 21 | "curly": true, 22 | "indent": 2, 23 | "newcap": true, 24 | "noarg": true, 25 | "quotmark": "single", 26 | "maxparams": 4, 27 | "maxdepth": 5 28 | } 29 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # computedStyle changelog 2 | 0.3.0 - Replaced bespoke minification with `uglifyjs2` 3 | 4 | 0.2.0 - Added Firefox iframe support and removed 140 bytes support. Fixed by @kjarmicki in #5 5 | 6 | 0.1.4 - Added `twolfson-style` and fixed up style issues 7 | 8 | Before 0.1.4 - See `git log` 9 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | // Helper function to resolve computedStyle 3 | var computedStyleJs = 'lib/computedStyle.js'; 4 | function getVars() { 5 | return { 6 | computedStyle: grunt.file.read(computedStyleJs) 7 | }; 8 | } 9 | 10 | // Project configuration. 11 | grunt.initConfig({ 12 | // Build minified scripts 13 | uglify: { 14 | computedStyle: { 15 | src: computedStyleJs, 16 | dest: 'dist/computedStyle.min.js' 17 | } 18 | }, 19 | 20 | // Generate templates for each flavor 21 | template: { 22 | vanilla: { 23 | src: 'lib/templates/vanilla.mustache.js', 24 | dest: 'dist/computedStyle.js', 25 | variables: getVars, 26 | engine: 'mustache' 27 | }, 28 | amd: { 29 | src: 'lib/templates/amd.mustache.js', 30 | dest: 'dist/computedStyle.amd.js', 31 | variables: getVars, 32 | engine: 'mustache' 33 | }, 34 | commonjs: { 35 | src: 'lib/templates/commonjs.mustache.js', 36 | dest: 'dist/computedStyle.commonjs.js', 37 | variables: getVars, 38 | engine: 'mustache' 39 | } 40 | } 41 | }); 42 | 43 | // Load in grunt tasks 44 | grunt.loadNpmTasks('grunt-contrib-uglify'); 45 | grunt.loadNpmTasks('grunt-templater'); 46 | 47 | // Define common actions 48 | grunt.registerTask('build', ['uglify', 'template']); 49 | 50 | // Build as the default task 51 | grunt.registerTask('default', ['build']); 52 | }; 53 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Todd Wolfson 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # computedStyle 2 | 3 | Cross-browser currentStyle/getComputedStyle implementation 4 | 5 | [![testling-ci badge](https://ci.testling.com/twolfson/computedStyle.png)](https://ci.testling.com/twolfson/computedStyle) 6 | 7 | ## Getting Started 8 | Download one of the available flavors: 9 | 10 | - [Production version][min] 11 | - [Development version][max] - Available via `bower install computedStyle` 12 | - [CommonJS version][commonjs] - Available via `npm install computed-style` and `component install twolfson/computedStyle` 13 | - [AMD version][amd] 14 | 15 | [min]: https://raw.github.com/twolfson/computedStyle/master/dist/computedStyle.min.js 16 | [max]: https://raw.github.com/twolfson/computedStyle/master/dist/computedStyle.js 17 | [commonjs]: https://raw.github.com/twolfson/computedStyle/master/dist/computedStyle.commonjs.js 18 | [amd]: https://raw.github.com/twolfson/computedStyle/master/dist/computedStyle.amd.js 19 | 20 | In your web page: 21 | 22 | ```html 23 | 24 | 27 | ``` 28 | 29 | ## Documentation 30 | `computedStyle` is a single purpose function 31 | ```js 32 | computedStyle(element, property); 33 | /** 34 | * Cross-browser getComputedStyle 35 | * @param {HTMLElement} el Element to get property from 36 | * @param {String} prop Property to look up (DOM, zIndex, and CSS, z-index, formats accepted) 37 | * @returns Property from the browser 38 | * 39 | * @note These properties can vary from browser to browser. 40 | * For example, IE6 will return #FF0000 whereas Firefox will return rgb(255, 0, 0) 41 | * I have chosen to avoid this for this repo as it exits the single purpose 42 | * and jQuery follows the same approach. 43 | */ 44 | ``` 45 | 46 | ## Examples 47 | ```js 48 | // Grab the z-index of an element 49 | computedStyle(el, 'z-index'); 50 | 51 | // Grab the background-color of an element 52 | computedStyle(el, 'background-color'); 53 | ``` 54 | 55 | ## Donating 56 | Support this project and [others by twolfson][gratipay] via [gratipay][]. 57 | 58 | [![Support via Gratipay][gratipay-badge]][gratipay] 59 | 60 | [gratipay-badge]: https://cdn.rawgit.com/gratipay/gratipay-badge/2.x.x/dist/gratipay.png 61 | [gratipay]: https://www.gratipay.com/twolfson/ 62 | 63 | ## Contributing 64 | In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint your code using `npm run lint` and test via `npm test`. 65 | 66 | ## License 67 | Copyright (c) 2013 Todd Wolfson 68 | 69 | Licensed under the MIT license. 70 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "computedStyle", 3 | "version": "0.3.0", 4 | "main": "dist/computedStyle.js", 5 | "ignore": [ 6 | "**/.*", 7 | "node_modules", 8 | "components" 9 | ] 10 | } -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "computedStyle", 3 | "repo": "twolfson/computedStyle", 4 | "description": "Cross-browser currentStyle/getComputedStyle implementation", 5 | "version": "0.3.0", 6 | "keywords": [ 7 | "cross-browser", 8 | "getComputedStyle", 9 | "currentStyle", 10 | "css", 11 | "style" 12 | ], 13 | "dependencies": {}, 14 | "development": {}, 15 | "license": "MIT", 16 | "scripts": [ 17 | "dist/computedStyle.commonjs.js" 18 | ], 19 | "main": "dist/computedStyle.commonjs.js" 20 | } -------------------------------------------------------------------------------- /dist/computedStyle.amd.js: -------------------------------------------------------------------------------- 1 | define(function () { 2 | // DEV: We don't use var but favor parameters since these play nicer with minification 3 | function computedStyle(el, prop, getComputedStyle, style) { 4 | getComputedStyle = window.getComputedStyle; 5 | style = 6 | // If we have getComputedStyle 7 | getComputedStyle ? 8 | // Query it 9 | // TODO: From CSS-Query notes, we might need (node, null) for FF 10 | getComputedStyle(el) : 11 | 12 | // Otherwise, we are in IE and use currentStyle 13 | el.currentStyle; 14 | if (style) { 15 | return style 16 | [ 17 | // Switch to camelCase for CSSOM 18 | // DEV: Grabbed from jQuery 19 | // https://github.com/jquery/jquery/blob/1.9-stable/src/css.js#L191-L194 20 | // https://github.com/jquery/jquery/blob/1.9-stable/src/core.js#L593-L597 21 | prop.replace(/-(\w)/gi, function (word, letter) { 22 | return letter.toUpperCase(); 23 | }) 24 | ]; 25 | } 26 | } 27 | 28 | return computedStyle; 29 | }); 30 | -------------------------------------------------------------------------------- /dist/computedStyle.commonjs.js: -------------------------------------------------------------------------------- 1 | // DEV: We don't use var but favor parameters since these play nicer with minification 2 | function computedStyle(el, prop, getComputedStyle, style) { 3 | getComputedStyle = window.getComputedStyle; 4 | style = 5 | // If we have getComputedStyle 6 | getComputedStyle ? 7 | // Query it 8 | // TODO: From CSS-Query notes, we might need (node, null) for FF 9 | getComputedStyle(el) : 10 | 11 | // Otherwise, we are in IE and use currentStyle 12 | el.currentStyle; 13 | if (style) { 14 | return style 15 | [ 16 | // Switch to camelCase for CSSOM 17 | // DEV: Grabbed from jQuery 18 | // https://github.com/jquery/jquery/blob/1.9-stable/src/css.js#L191-L194 19 | // https://github.com/jquery/jquery/blob/1.9-stable/src/core.js#L593-L597 20 | prop.replace(/-(\w)/gi, function (word, letter) { 21 | return letter.toUpperCase(); 22 | }) 23 | ]; 24 | } 25 | } 26 | 27 | module.exports = computedStyle; 28 | -------------------------------------------------------------------------------- /dist/computedStyle.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | // DEV: We don't use var but favor parameters since these play nicer with minification 3 | function computedStyle(el, prop, getComputedStyle, style) { 4 | getComputedStyle = window.getComputedStyle; 5 | style = 6 | // If we have getComputedStyle 7 | getComputedStyle ? 8 | // Query it 9 | // TODO: From CSS-Query notes, we might need (node, null) for FF 10 | getComputedStyle(el) : 11 | 12 | // Otherwise, we are in IE and use currentStyle 13 | el.currentStyle; 14 | if (style) { 15 | return style 16 | [ 17 | // Switch to camelCase for CSSOM 18 | // DEV: Grabbed from jQuery 19 | // https://github.com/jquery/jquery/blob/1.9-stable/src/css.js#L191-L194 20 | // https://github.com/jquery/jquery/blob/1.9-stable/src/core.js#L593-L597 21 | prop.replace(/-(\w)/gi, function (word, letter) { 22 | return letter.toUpperCase(); 23 | }) 24 | ]; 25 | } 26 | } 27 | 28 | window.computedStyle = computedStyle; 29 | }()); 30 | -------------------------------------------------------------------------------- /dist/computedStyle.min.js: -------------------------------------------------------------------------------- 1 | function computedStyle(a,b,c,d){return c=window.getComputedStyle,d=c?c(a):a.currentStyle,d?d[b.replace(/-(\w)/gi,function(a,b){return b.toUpperCase()})]:void 0} -------------------------------------------------------------------------------- /lib/computedStyle.js: -------------------------------------------------------------------------------- 1 | // DEV: We don't use var but favor parameters since these play nicer with minification 2 | function computedStyle(el, prop, getComputedStyle, style) { 3 | getComputedStyle = window.getComputedStyle; 4 | style = 5 | // If we have getComputedStyle 6 | getComputedStyle ? 7 | // Query it 8 | // TODO: From CSS-Query notes, we might need (node, null) for FF 9 | getComputedStyle(el) : 10 | 11 | // Otherwise, we are in IE and use currentStyle 12 | el.currentStyle; 13 | if (style) { 14 | return style 15 | [ 16 | // Switch to camelCase for CSSOM 17 | // DEV: Grabbed from jQuery 18 | // https://github.com/jquery/jquery/blob/1.9-stable/src/css.js#L191-L194 19 | // https://github.com/jquery/jquery/blob/1.9-stable/src/core.js#L593-L597 20 | prop.replace(/-(\w)/gi, function (word, letter) { 21 | return letter.toUpperCase(); 22 | }) 23 | ]; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /lib/templates/amd.mustache.js: -------------------------------------------------------------------------------- 1 | define(function () { 2 | {{{computedStyle}}} 3 | return computedStyle; 4 | }); 5 | -------------------------------------------------------------------------------- /lib/templates/commonjs.mustache.js: -------------------------------------------------------------------------------- 1 | {{{computedStyle}}} 2 | module.exports = computedStyle; 3 | -------------------------------------------------------------------------------- /lib/templates/vanilla.mustache.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | {{{computedStyle}}} 3 | window.computedStyle = computedStyle; 4 | }()); 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "computed-style", 3 | "description": "Cross-browser currentStyle/getComputedStyle implementation", 4 | "version": "0.3.0", 5 | "homepage": "https://github.com/twolfson/computedStyle", 6 | "author": { 7 | "name": "Todd Wolfson", 8 | "email": "todd@twolfson.com", 9 | "url": "http://twolfson.com/" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/twolfson/computedStyle.git" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/twolfson/computedStyle/issues" 17 | }, 18 | "main": "dist/computedStyle.commonjs.js", 19 | "licenses": [ 20 | { 21 | "type": "MIT", 22 | "url": "https://github.com/twolfson/computedStyle/blob/master/LICENSE-MIT" 23 | } 24 | ], 25 | "scripts": { 26 | "build": "grunt build", 27 | "lint": "twolfson-style lint grunt.js lib/computedStyle.js test/", 28 | "_pretest": "twolfson-style install", 29 | "test": "npm run build && testem --file test/testem.json ci && npm run lint" 30 | }, 31 | "dependencies": {}, 32 | "devDependencies": { 33 | "grunt": "~0.4.5", 34 | "grunt-cli": "~0.1.13", 35 | "grunt-contrib-uglify": "~0.6.0", 36 | "grunt-templater": "0.0.4", 37 | "jscs": "~1.8.1", 38 | "jshint": "~2.5.10", 39 | "mocha": "~1.9.0", 40 | "mustache": "~2.3.0", 41 | "testem": "~0.2.83", 42 | "twolfson-style": "~1.6.0" 43 | }, 44 | "keywords": [ 45 | "cross-browser", 46 | "getComputedStyle", 47 | "currentStyle", 48 | "css", 49 | "style" 50 | ], 51 | "testling": { 52 | "files": "test/*.js", 53 | "scripts": [ 54 | "dist/computedStyle.js" 55 | ], 56 | "harness": "mocha", 57 | "browsers": [ 58 | "ie/6..latest", 59 | "chrome/20..latest", 60 | "chrome/canary", 61 | "firefox/10..latest", 62 | "firefox/nightly", 63 | "safari/latest", 64 | "opera/11.0..latest", 65 | "opera/next", 66 | "iphone/6", 67 | "ipad/6" 68 | ] 69 | } 70 | } -------------------------------------------------------------------------------- /test/computedStyle_test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | -------------------------------------------------------------------------------- /test/computedStyle_test.js: -------------------------------------------------------------------------------- 1 | /* global computedStyle: true */ 2 | describe('computedStyle', function () { 3 | // Localize head and body 4 | var head = document.getElementsByTagName('head')[0]; 5 | var body = document.body; 6 | 7 | // Create assertion methods (at the time of writing Chai does not work in <=IE8) 8 | function assert(a) { 9 | if (!a) { 10 | throw new Error('Assertion error: ' + a + ' is falsy'); 11 | } 12 | } 13 | 14 | function assertEqual(a, b) { 15 | if (a !== b) { 16 | throw new Error('Assertion error: ' + a + ' !== ' + b); 17 | } 18 | } 19 | 20 | function assertMatches(a, b) { 21 | if (!a.match(b)) { 22 | throw new Error('Assertion error: ' + a + ' does not match ' + b); 23 | } 24 | } 25 | 26 | describe('querying an inline styled DOM element', function () { 27 | before(function () { 28 | // Create and style an element 29 | var el = document.createElement('div'); 30 | el.style.cssText = 'color: #FF0000;'; 31 | 32 | // Save the element for later 33 | this.el = el; 34 | 35 | // Append it to the DOM 36 | body.appendChild(el); 37 | 38 | // Query the element for its styles 39 | var color = computedStyle(el, 'color'); 40 | this.color = color; 41 | }); 42 | 43 | after(function () { 44 | // Clean up the element 45 | body.removeChild(this.el); 46 | }); 47 | 48 | it('can find the styles', function () { 49 | // Color varies from browser to browser. jQuery doesn't tweak it 50 | // and if we are keeping this single purpose, neither will I. 51 | var color = this.color; 52 | assert(color); 53 | assertMatches(color, /^#FF0000|rgb\(255, 0, 0\)$/i); 54 | }); 55 | }); 56 | 57 | describe('querying an stylesheet styled DOM element', function () { 58 | before(function () { 59 | // Create an element 60 | var el = document.createElement('div'); 61 | el.setAttribute('id', 'test-el'); 62 | 63 | // Save the element for later 64 | this.el = el; 65 | 66 | // Append it to the DOM 67 | body.appendChild(el); 68 | 69 | try { 70 | // Create a stylesheet and append it to the DOM 71 | var stylesheet = document.createElement('style'); 72 | stylesheet.innerHTML = '#test-el { color: #00FF00; }'; 73 | 74 | // Save it for later 75 | this.stylesheet = stylesheet; 76 | 77 | // Append the stylesheet to the DOM 78 | head.appendChild(stylesheet); 79 | } catch (e) { 80 | // If the previous attempt failed, we are in IE8 or lower 81 | // Use native IE methods 82 | // Reference: http://www.quirksmode.org/dom/w3c_css.html 83 | var stylesheet = document.createStyleSheet(); 84 | stylesheet.addRule('#test-el', 'color: #00FF00;'); 85 | } 86 | 87 | // Query the element for its styles 88 | var color = computedStyle(el, 'color'); 89 | this.color = color; 90 | }); 91 | 92 | after(function () { 93 | // Clean up the element and stylesheet 94 | body.removeChild(this.el); 95 | 96 | var stylesheet = this.stylesheet; 97 | if (stylesheet) { 98 | head.removeChild(this.stylesheet); 99 | } 100 | }); 101 | 102 | it('can find the styles', function () { 103 | var color = this.color; 104 | assert(color); 105 | assertMatches(color, /^#00FF00|rgb\(0, 255, 0\)$/i); 106 | }); 107 | }); 108 | 109 | describe('querying text-decoration of an element', function () { 110 | before(function () { 111 | // Create and style an element 112 | var el = document.createElement('div'); 113 | // It's over 9000 114 | el.style.cssText = 'text-decoration: underline;'; 115 | 116 | // Save the element for later 117 | this.el = el; 118 | 119 | // Append it to the DOM 120 | body.appendChild(el); 121 | 122 | // Query the element for its styles 123 | var textDecoration = computedStyle(el, 'text-decoration'); 124 | this.textDecoration = textDecoration; 125 | }); 126 | 127 | after(function () { 128 | // Clean up the element 129 | body.removeChild(this.el); 130 | }); 131 | 132 | it('return the element\'s text-decoration', function () { 133 | var textDecoration = this.textDecoration; 134 | assertEqual(textDecoration, 'underline'); 135 | }); 136 | }); 137 | 138 | // Firefox edge case, https://bugzilla.mozilla.org/show_bug.cgi?id=548397 139 | describe('getting styles from hidden iframe', function () { 140 | before(function (done) { 141 | // Create global communication variable 142 | window._invisibleIframeTest = 'unresolved'; 143 | 144 | // Create hidden iframe 145 | this.iframe = document.createElement('iframe'); 146 | this.iframe.src = 'invisibleIframe.html'; 147 | this.iframe.style.display = 'none'; 148 | 149 | // Setup is complete when iframe loads 150 | this.iframe.onload = function () { 151 | done(); 152 | }; 153 | 154 | // Append it to the DOM 155 | body.appendChild(this.iframe); 156 | }); 157 | 158 | after(function () { 159 | // Clean up the element and global communication variable 160 | body.removeChild(this.iframe); 161 | delete window._invisibleIframeTest; 162 | }); 163 | 164 | it('should compute style to 300px or undefined', function () { 165 | assert(window._invisibleIframeTest === '300px' || window._invisibleIframeTest === undefined); 166 | }); 167 | }); 168 | }); 169 | -------------------------------------------------------------------------------- /test/invisibleIframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Invisible Iframe 6 | 7 | 8 |
9 | 10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /test/testem.json: -------------------------------------------------------------------------------- 1 | { 2 | "framework": "mocha", 3 | "test_page": "test/computedStyle_test.html" 4 | } --------------------------------------------------------------------------------