jsdom silently eats 'calc' and viewport units
See original GitHub issueI came across this while writing some tests for React components. Here’s a MWE:
import jsdom from 'jsdom';
// jsdom setup
const doc = jsdom.jsdom('<!DOCTYPE html><html><body></body></html>');
const win = doc.defaultView;
global.document = doc;
global.window = win;
// This *should* be the identity function.
function getReportedWidth(width) {
const element = document.createElement('div');
element.style.width = width;
document.getElementsByTagName('body')[0].appendChild(element); // (*)
return element.style.width;
}
const testCases = [
"20px",
"100%",
"100vh",
"calc(10px + 20px)",
"calc(10px + 20%)",
"calc(10px + 100vh)",
];
testCases.forEach(input => {
console.log(`Input: |${input}|. Output: |${getReportedWidth(input)}|.`);
});
The output (via babel-node
) is
Input: |20px|. Output: |20px|.
Input: |100%|. Output: |100%|.
Input: |100vh|. Output: ||.
Input: |calc(10px + 20px)|. Output: ||.
Input: |calc(10px + 20%)|. Output: ||.
Input: |calc(10px + 100vh)|. Output: ||.
The line marked (*)
doesn’t actually change the output.
This is definitely different behavior than in a browser, so it seems like a bug to me. Thoughts?
Issue Analytics
- State:
- Created 8 years ago
- Reactions:9
- Comments:14 (7 by maintainers)
Top Results From Across the Web
Fun with Viewport Units
Suddenly I wish there was a max-font-size property. Others have developed more complex calculations and Sass mixins to specify the exact text- ...
Read more >Untitled
Node jsdom jquery, Shafts of light crossword clue, Mauviel france ice bucket ... Lizard eating man, Green and black snake in tennessee, Speck...
Read more >Using css calc with viewport units [duplicate]
When using calc() , you can multiply and divide by unitless values, but addition or subtraction requires units. calc(10vh * 2) — This...
Read more >Untitled
Increment java memory heap, Guy eating mcdonalds saves girl, Lxde desktop. ... How to pick a sentry safe lock box 1100, Unit tangent...
Read more >Breaking Out With Viewport Units and Calc
While iterating on a new article layout for the impending Cloud Four redesign, I encountered an old CSS layout problem.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
https://mobile.twitter.com/slicknet/status/782274190451671040
Still doesn’t work, at least for:
const styles = { width: 'calc(40% - 0.5rem)', left: 'calc(30% + .5rem)' };