question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

jsdom silently eats 'calc' and viewport units

See original GitHub issue

I 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:open
  • Created 8 years ago
  • Reactions:9
  • Comments:14 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
zaqqazcommented, Feb 12, 2019

Still doesn’t work, at least for: const styles = { width: 'calc(40% - 0.5rem)', left: 'calc(30% + .5rem)' };

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found