Intent to implement: CSS {background,mask}-repeat-{x/y} properties

[Tommy Kuo]

Summary

In this work, I’d like to implement 4 new longhand properties: background-repeat-x, background-repeat-y, mask-repeat-x, and mask-repeat-y. And it also makes background-repeat and mask-repeat become shorthand properties.

Bug

https://bugzilla.mozilla.org/show_bug.cgi?id=1273244

Link to standard

https://github.com/w3c/csswg-drafts/issues/116
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-repeat-x
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-repeat-y

Platform coverage

All platforms

Status on other browser engines

background-repeat-{x,y} mask-repeat-{x,y}
Google Chrome Shipped Only property name can be recognized (w/ webkit prefix)
Safari Only property name can be recognized Only property name can be recognized (w/ webkit prefix)
Edge No support No support

-- 
Tommy Kuo / Software Engineer
ku...@mozilla.com

Mozilla Taiwan

[Tommy Kuo]

Sorry, I think some people can not see the table of "status on other browser engines". The plain text version is following:

background-repeat-{x,y}

Google Chrome: Shipped

Safari: Only property name can be recognized

Edge: No support

mask-repeat-{x,y}

Google Chrome: Only property name can be recognized (w/ webkit prefix)
Safari: Only property name can be recognized (w/ webkit prefix)
Edge: No support

-- 
Tommy Kuo / Software Engineer
ku...@mozilla.com

Mozilla Taiwan

[L. David Baron]

On Thursday 2016-11-24 17:28 +0800, Tommy Kuo wrote:
> Sorry, I think some people can not see the table of "status on other browser engines". The plain text version is following:
>
> background-repeat-{x,y}
>
> Google Chrome: Shipped
> Safari: Only property name can be recognized
> Edge: No support
>
> mask-repeat-{x,y}
>
> Google Chrome: Only property name can be recognized (w/ webkit prefix)
> Safari: Only property name can be recognized (w/ webkit prefix)
> Edge: No support

What does the "Only property name can be recognized" status mean,
and how does it differ from "Shipped"?

-David

--
𝄞 L. David Baron http://dbaron.org/ 𝄂
𝄢 Mozilla https://www.mozilla.org/ 𝄂
Before I built a wall I'd ask to know
What I was walling in or walling out,
And to whom I was like to give offense.
- Robert Frost, Mending Wall (1914)

[Chih-Hsuan Kuo]

It means the browser engines can use the properties, but these properties don't accept any value. It also means the properties don't work.

In Google Chrome, these properties can be auto-completed. And the error shows when we set the value to these properties.

In Safari, there is no warning symbol on these properties, and the warning symbol only shows on the value we set.

"L. David Baron" <dba...@dbaron.org> 在 2016年11月25日 02:00 寫下：

[L. David Baron]

On Friday 2016-11-25 02:09 +0800, Chih-Hsuan Kuo wrote:
> It means the browser engines can use the properties, but these properties don't accept any value. It also means the properties don't work.
>
>
> In Google Chrome, these properties can be auto-completed. And the error shows when we set the value to these properties.
>
>
> In Safari, there is no warning symbol on these properties, and the warning symbol only shows on the value we set.

So my impression is that you're looking to implement these
unstandardized properties because of Web compatibility risk.

If you're analyzing that risk, it doesn't matter what developer
tools do. What matters is whether the presence of the properties in
Web content does something that we also need to do if we want the
content to behave in the same way.

I can't tell from your comments which other browsers do this.

[Tommy Kuo]

I think we should only implement the `background-repeat-{x|y}`. Currently, no browser engine supports `mask-repeat-{x|y}`. But for `background-repeat-{x|y}`, Google Chrome already supports it.

In this comment[1], the usage of these properties is above the deprecation threshold (both usage rate > 0.07%). So, Google Chrome won't remove these properties. I also found this discussion[2], `background-repeat-{x|y}` are approved for level 4 of backgrounds and borders.

Currently, for web compatibility, I think we should implement these properties. The current status on other browser engines is following:

**Microsoft Edge**

No support.

**Google Chrome**

It supports keywords `repeat` and `no-repeat`.

The behavior of `background-repeat-x: no-repeat` is repeat the background only on y-axis, like `background-repeat: no-repeat repeat`.

The behavior of `background-repeat-y: no-repeat` is repeat the background only on x-axis, like `background-repeat: repeat no-repeat`.

The behavior of `background-repeat-x: no-repeat; background-repeat-y: no-repeat;` is repeat the background only on x-axis, like `background-repeat: no-repeat no-repeat`.

**Apple Safari**

No support.

And there is a site[3] using `background-repeat-x` and `background-repeat-y`. We can notice that some images should be no-repeat. And it works on Google Chrome not on Mozilla Firefox. There are the screenshots of Google Chrome[4] and Mozilla Firefox[5]. (Due to the size limitation of the attachment on dev-platform, I put the screenshots on imgur.com.)

[1]: https://github.com/w3c/csswg-drafts/issues/116#issuecomment-221668012
[2]: http://lists.w3.org/Archives/Public/www-style/2014Apr/0188.html
[3]: http://ocando.vnz.la/
[4]: http://imgur.com/a/dFrvW
[5]: http://imgur.com/a/wx6nv

-- 
Tommy Kuo / Software Engineer
ku...@mozilla.com

Mozilla Taiwan

On November 28, 2016 at 11:59:35, Tommy Kuo (to...@mozilla.com) wrote:

I think we should only implement the `background-repeat-{x|y}`. Currently, no browser engine supports `mask-repeat-{x|y}`. But for `background-repeat-{x|y}`, Google Chrome already supports it.

In this comment[1], the usage of these properties is above the deprecation threshold (both usage rate > 0.07%). So, Google Chrome won't remove these properties. I also found this discussion[2], `background-repeat-{x|y}` are approved for level 4 of backgrounds and borders.

Currently, for web compatibility, I think we should implement these properties. The current status on other browser engines is following:

**Microsoft Edge**

No support.

**Google Chrome**

It supports keywords `repeat` and `no-repeat`.

The behavior of `background-repeat-x: no-repeat` is repeat the background only on y-axis, like `background-repeat: no-repeat repeat`.

The behavior of `background-repeat-y: no-repeat` is repeat the background only on x-axis, like `background-repeat: repeat no-repeat`.

The behavior of `background-repeat-x: no-repeat; background-repeat-y: no-repeat;` is repeat the background only on x-axis, like `background-repeat: no-repeat no-repeat`.

**Apple Safari**

No support.

And there is a site[3] using `background-repeat-x` and `background-repeat-y`. We can notice that some images should be no-repeat. And it works on Google Chrome not on Mozilla Firefox. I attached the screenshot in attachments.

[1]: https://github.com/w3c/csswg-drafts/issues/116#issuecomment-221668012
[2]: http://lists.w3.org/Archives/Public/www-style/2014Apr/0188.html
[3]: http://ocando.vnz.la/

-- 
Tommy Kuo / Software Engineer ku...@mozilla.com

Mozilla Taiwan

[Tommy Kuo]

There is a mistake on last mail. The following description should be corrected.

> The behavior of `background-repeat-x: no-repeat; background-repeat-y: no-repeat;` is repeat the background only on x-axis, like `background-repeat: no-repeat no-repeat`.

It should be "The behavior of `background-repeat-x: no-repeat; background-repeat-y: no-repeat;` **should not repeat on any axis**, like `background-repeat: no-repeat no-repeat`."

[Tommy Kuo]

I think we should only implement the `background-repeat-{x|y}`. Currently, no browser engine supports `mask-repeat-{x|y}`. But for `background-repeat-{x|y}`, Google Chrome already supports it.

In this comment[1], the usage of these properties is above the deprecation threshold (both usage rate > 0.07%). So, Google Chrome won't remove these properties. I also found this discussion[2], `background-repeat-{x|y}` are approved for level 4 of backgrounds and borders.

Currently, for web compatibility, I think we should implement these properties. The current status on other browser engines is following:

**Microsoft Edge**

No support.

**Google Chrome**

It supports keywords `repeat` and `no-repeat`.

The behavior of `background-repeat-x: no-repeat` is repeat the background only on y-axis, like `background-repeat: no-repeat repeat`.

The behavior of `background-repeat-y: no-repeat` is repeat the background only on x-axis, like `background-repeat: repeat no-repeat`.

The behavior of `background-repeat-x: no-repeat; background-repeat-y: no-repeat;` is repeat the background only on x-axis, like `background-repeat: no-repeat no-repeat`.

**Apple Safari**

No support.

And there is a site[3] using `background-repeat-x` and `background-repeat-y`. We can notice that some images should be no-repeat. And it works on Google Chrome not on Mozilla Firefox. I attached the screenshot in attachments.

[1]: https://github.com/w3c/csswg-drafts/issues/116#issuecomment-221668012
[2]: http://lists.w3.org/Archives/Public/www-style/2014Apr/0188.html
[3]: http://ocando.vnz.la/

-- 
Tommy Kuo / Software Engineer
ku...@mozilla.com

Mozilla Taiwan

[Mike Taylor]

Hi Tommy,

On 11/27/16 9:59 PM, Tommy Kuo wrote:
> Currently, for web compatibility, I think we should implement these properties.

Do we know about any sites that are broken due to background-repeat-x/y?

(apologies in advance if you link to a bug that has me commenting on it...)

--
Mike Taylor
Web Compat, Mozilla

[Tommy Kuo]

Hi Mike, 

There is a site[1] using these properties. And the related bug is here[2].

[1]: http://ocando.vnz.la/
[2]: https://bugzilla.mozilla.org/show_bug.cgi?id=1273244

-- 
Tommy Kuo / Software Engineer
ku...@mozilla.com

Mozilla Taiwan

On December 16, 2016 at 05:18:36, Mike Taylor (mi...@mozilla.com) wrote:

[3]: http://ocando.vnz.la/