Bug 201623 – <bg-size> is allowed after a slash only if <bg-position> is specified in CSS background shorthand

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[karl]

Example URL:
https://codepen.io/webcompat/pen/LYPLvow

Steps to reproduce the problem:
1. Go to https://codepen.io/webcompat/pen/LYPLvow
2. See how the dino image is displayed.

What is the expected behavior?
The image should not be displayed.

What went wrong?
Safari and Chrome are too lenient with the syntax.

Firefox gets it right. 
 

OS Version: OS X 10.14


This creates a webcompat issue for Firefox. 
https://webcompat.com/issues/38850
on this site at least.
https://www.t-online.de/nachrichten/ausland/id_86344692/vor-dem-brexit-johnson-will-offenbar-zwangsurlaub-parlament-gegner-sind-sauer.html


The CSS spec says:
`cover` attribute is [allowed only](https://drafts.csswg.org/css-backgrounds-3/#background) if a position has been specified before hand.


```
<bg-layer> =    <bg-image> 
                     || <bg-position> [ / <bg-size> ]? 
                     || <repeat-style> 
                     || <attachment> 
                     || <box> 
                     || <box>
```

[karl]

Created an issue for a web platform test on https://github.com/web-platform-tests/wpt/issues/18947

[Radar WebKit Bug Importer]

<rdar://problem/55227383>

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6.1 and Safari Technology Preview 151 using attached test case (CodePen) and it shows "Mozilla" dino picture while all the browsers (Chrome Canary 106 and Firefox Nightly 105) show "Yellow" block / rectangle. Just wanted to share updated results. Thanks!

[Ahmad Saleem]

Fixed somewhere in Safari Technology Preview 170 and now we don't get dino picture.

Marking this as "RESOLVED CONFIGURATION CHANGED".