W3C home > Mailing lists > Public > www-style@w3.org > July 2015

Re: [css-grid] Grid shortands computed value and CSSOM serialization

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 16 Jul 2015 16:12:45 -0700
Message-ID: <CAAWBYDAG8TnGzGRPd9BPxWJVymt-t7F_MGDh40j3Mo-B1zB52A@mail.gmail.com>
To: Manuel Rego Casasnovas <rego@igalia.com>
Cc: www-style list <www-style@w3.org>
On Fri, May 8, 2015 at 7:22 AM, Manuel Rego Casasnovas <rego@igalia.com> wrote:
> Hi,
>
> I've a doubt regarding how computed value and CSSOM serialization of
> grid shorthands should work.
>
> Let's use the grid-template shorthand as example. Imagine that you've
> the following JS (A):
>   grid.style.gridTemplate = "100px / 50px";
>   console.log("style: " + grid.style.gridTemplate);
>   console.log("computedStyle: " + getComputedStyle(grid).gridTemplate);
>
> What should be the output?
>   style: 100px / 50px
>   computedStyle: 100px / 50px

Yes.

Chrome is wrong in both cases:
* for style, it breaks the declarations apart into rows/column/areas,
which is wrong. (That breaking-apart happens at style resolution, not
at .style setting. Look at how we handle el.style.background="red",
for example.)
* for computedStyle, it generates "100px / 50px / none", which isn't even valid.

> And in other cases:
>   B) JS:
>        grid.style.gridTemplate = '"a b" "a b"';
>      Output:
>        style: "a b" "a b"
>        computedStyle: "a b" "a b"

Yes.

Chrome is *even wronger* in this case; it commits the same general
sins, but set columns to "none" and rows to "auto auto".

>   C) JS:
>        grid.style.gridTemplate = 100px / "a b" 50px;
>      Output:
>        style: 100px / "a b" 50px
>        computedStyle: 100px / "a b" 50px

Yes.

Chrome is again wrong in the same ways, but at least it doesn't
*totally* mess things up like it did for case B. ^_^

> And the last example for a different property like grid-row:
>   D) JS:
>        gridItem.style.gridRow = "2";
>      Output:
>        style: 2 / auto
>        computedStyle: 2 / auto

No.  Both should be "2", because of the general principle that you
should omit everything that doesn't affect the result.  Again, Chrome
is breaking it apart into its longhands, which is wrong.

> I'm asking this because of I'm writing a test for the W3C suite and this
> is showing different values in Chromium.

Thanks so much for writing tests!  They're obviously necessary. ^_^

~TJ
Received on Thursday, 16 July 2015 23:13:32 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:32 UTC