Safari incorrectly accepts "end safe" and incorrectly serializes "safe end" as "end safe" on various properties

• Component: CSS
• Status: RESOLVED FIXED

[Eric Willigers]

The properties
align-content, align-items, align-self, justify-content, justify-items, justify-self
should accept "safe end" i.e. <overflow-position> <content-position> or <overflow-position> <self-position>
but not "end safe" i.e. <content-position> <overflow-position> or <self-position> <overflow-position>

Blink and Firefox correctly reject "safe end".
However, Edge and Safari incorrectly accept "end safe" and incorrectly serialize "safe end" as "end safe".
http://jsfiddle.net/ericwilligers/cthjpbv0/

https://drafts.csswg.org/css-align-3/#property-index

[Javier Fernandez]

I can take a look at this issue, if nobody is currently working on it.

[Javier Fernandez]

I cannot reproduce the issue in my current trunk (r233461). 

The commit landed in r227432 should precisely implement the expected behavior, so that <overflow-position> is parsed as invalid if it doesn't precede a either a <content-position> or <self-position> keyword.

As a matter of fact, the mentioned patch provides tests to verify that "start safe" and "end unsafe" are parsed as invalid:

https://trac.webkit.org/browser/webkit/trunk/LayoutTests/css3/parse-align-self.html#L227

Maybe the patch in r227432 has not been merged into the Safari version the issue was reported for ?

[Eric Willigers]

> I cannot reproduce the issue in my current trunk (r233461). 

I was testing with Safari 11.1 (using browserstack.com)

I confirm this bug no longer occurs in Safari 12 (which browserstack.com now has)

[Radar WebKit Bug Importer]

<rdar://problem/45336944>