Bug 197067

Summary: [css-grid] grid shorthand props contain invalid property values, same even when valid longhand property values provided
Product: WebKit Reporter: Clint Ayres <clinton.ayres>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: clinton.ayres, jfernandez, obrufau, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 12   
Hardware: Unspecified   
OS: macOS 10.14   

Description Clint Ayres 2019-04-18 12:25:03 PDT
The following list of shorthand properties all exhibit the same error in that values stored in CSSStyleDeclaration object are invalid.

 - grid
 - grid-area
 - grid-column
 - grid-row
 - grid-template

Simple example for grid-area property:

```
const style = document.createElement('style');
document.head.appendChild(style);

style.sheet.insertRule('.surprise { grid-area: 1 / 2 / 3 / 4; }');
console.log(style.sheet.cssRules[0].style.gridArea);
```

expected:

```
> "1 / 2 / 3 / 4"
```

actual:

```
> "1 2 3 4"
```

The same type of issue occurs for each of the css grid shorthand properties. Seems possibly related to the char '/' but could be a bad signal too.
Comment 1 Radar WebKit Bug Importer 2019-04-19 22:13:07 PDT
<rdar://problem/50068305>
Comment 2 Javier Fernandez 2019-04-23 02:48:44 PDT
I'll take a look
Comment 3 Oriol Brufau 2019-11-27 05:02:42 PST
The '/' problem has been fixed in bug 204508.
Other problems will be addressed in bug 204611.

*** This bug has been marked as a duplicate of bug 204508 ***