title: How to test css class properties?
body: <p>We (my team) is building design system which consists of number web-components (e.g button, link etc) using lit-elements. Design system comes with spec definition which is documented on our documentation site. We want test CSS class properties applied on the web-components.</p>
  <p>We can partially test those using <code>window.getComputedStyle()</code> as follows :-</p>
  <pre><code>it('test CSS class properties',()=&gt;{
      const element = document.querySelector('selector');
      const styles = window.getComputedStyle(element );
      const content_property = style.getPropertyValue('justify-content');
      expect(content_property).toEqual('space-between');
  });
  </code></pre>
  <p>Here comes the problem, when it renders in the browser, computed style property is different than it is defined in the style-sheet.
  e.g <code>width:100%</code> which becomes <code>width:1366px</code> (the length of the container).</p>
  <p>Right now we are testing only one web-component at time in headless browser which means no CSS overrides.</p>
  <p><strong>Is there anyway to compute styles the same way the browser does using JavaScript method/API?</strong>
  So we can have computed CSS class property ahead of time and we can compare it with browser's computed style property.</p>
  <p>The ugly way of doing it is creating a dummy element with same class from spec documentation in the browser and check it's CSS class properties against original web-component's CSS class properties.</p>
  <p>Any suggestions appreciated!</p>