search

jsdom / cssstyle

A Node.js implementation of the CSS Object Model CSSStyleDeclaration interface
MIT License
107 stars 70 forks source link

repeat() does not get resolved as per CSS Grid #146

Open moises-marquez opened 2 years ago

moises-marquez commented 2 years ago

Basic info:

Minimal reproduction case

The following code returns repeat(auto-fill, 300px) instead of 300px 300px as described in the CSS Grid spec (Note below example 19): https://www.w3.org/TR/css-grid-1/.

const { JSDOM } = require("jsdom");

const dom = new JSDOM(`
<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         #gridParentElement {
         width: 700px;
         display: grid; 
         grid-template-columns: repeat(auto-fill, 300px);
         }
      </style>
   </head>
   <body>
      <div id="gridParentElement">
         <div class="gridChild"></div>
         <div class="gridChild"></div>
      </div>
   </body>
</html>
`);

const element = window.document.querySelector("#gridParentElement");

console.log(window.getComputedStyle(element).gridTemplateColumns);

How does similar code behave in browsers?

In browser, the returned value should be 300px 300px. Link to reproducible case:

https://jsfiddle.net/y67dx3fm/

TimothyGu commented 2 years ago

The spec for resolving repeat() as used for getComputedStyle is here: https://drafts.csswg.org/css-grid/#resolved-track-list