getComputedStyle() should return resolved value for ‘grid-template-columns’ and ‘grid-template-rows’ #34537
Description
Given the following (demo):
<!doctype html><meta charset="utf-8">
<style>
body {
width: 300px;
}
div {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
</style>
<div></div>
<pre><script>
const div = document.querySelector("div");
document.write(getComputedStyle(div).gridTemplateColumns);
document.write("; ");
document.write(getComputedStyle(div).gridTemplateRows);
</script></pre>- Servo prints
repeat(3, 1fr); repeat(3, 1fr) - Firefox prints
100px 100px 100px; 0px 0px 0px
Firefox is correct here, per css-grid #resolved-track-list:
The grid-template-rows and grid-template-columns properties are resolved value special case properties. [CSSOM]
When an element generates a grid container box, the resolved value of its grid-template-rows or grid-template-columns property in a standalone axis is the used value, serialized with:
- Every track listed individually, whether implicitly or explicitly created, without using the repeat() notation.
- […]