Style properties that use calc() function don't get printed to the style attribute

[sevilyilmaz]

I used an existing fixture to reproduce the issue. The following test fails with the error below:

expect(received).toBe(expected) // Object.is equality

    Expected: "<h1 style=\"padding-bottom: 10px; padding-top: calc(100% - 80px)\">Welcome to Your Vue.js App</h1>"
    Received: "<h1 style=\"padding-bottom: 10px;\">Welcome to Your Vue.js App</h1>"

test.js

test('processes .vue files', () => {
  mount(Basic)
  expect(document.querySelector('h1').textContent).toBe(
    'Welcome to Your Vue.js App'
  )

  expect(document.querySelector('h1').outerHTML).toBe('<h1 style="padding-bottom: 10px; padding-top: calc(100% - 80px)">Welcome to Your Vue.js App</h1>')
})

Basic.vue

<template>
  <div class="hello">
    <h1 :style="headingStyles">
      {{ msg }}
    </h1>
  </div>
</template>

<script>
export default {
  name: 'Basic',
  data: function data() {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  computed: {
    headingStyles() {
      return {
        paddingTop: 'calc(100% - 80px)',
        paddingBottom: '10px'
      };
    }
  },
}
</script>

[BramMeerten]

I have the same issue (jest angular not vue). It does however work for width: calc(100% - 80px), but not for other properties such as margin, marginLeft, paddingTop, ...

I think it's related to this jsdom issue: https://github.com/jsdom/jsdom/issues/1332