Intent to implement: CSS property `line-height-step`

[Tommy Kuo]

**Summary**

I am intent to implement the property `line-height-step`. And it would be 
disabled behind the pref `layout.css.line-height-step.enabled` by default. It 
is a property to make authors create the content with vertical rhythm easier.

**Link to standard**

CSS Rhythmic Sizing



**Bug Link**

Bug 1343819 - Implement CSS property `line-height-step`


**Tests**

There are already some test cases on web-platform-tests.


**Status on Other Browsers**

*Blink*

Blink is implemented in Issue 2704343003.


Currently, this property only available in Chromium Developer Build 59. To try 
this feature, you need to enable "Experimental Web Platform features" in 
chrome://flags.

*WebKit & Edge*

Not support.

**More About It**

Vertical rhythm is a principle of typography. It is about spacing text. More 
generally, it is about vertical stacked elements. We can create a more 
comfortable layout with vertical rhythm.

We can imagine that we're put all elements on a sheet of lined paper. The sizes 
of elements are according to the size between the lines.

For example, we set the font-size as 12px. And the line-height is 1.5x of 
font-size, so it is 18px. We assume we want to put all elements on a lined 
paper and the line size is 18px. For the normal text, we just put them align 
the lines. If there is a title with 24px, to follow the vertical rhythm, the 
size of the title should be multiple of the line size. We add 6px to both 
over-side and under-side of the title, and the size of the title would be 36px 
(2 * 18).


- Tommy

___
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform

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

[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/
___
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform

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

[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


On November 25, 2016 at 02:31:24, L. David Baron (dba...@dbaron.org) wrote:

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.  

-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)  
___
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform

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

[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 / Software Engineer
ku...@mozilla.com

Mozilla Taiwan

___
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform

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

[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


On November 25, 2016 at 02:31:24, L. David Baron (dba...@dbaron.org) wrote:

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.

-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)
___
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform

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 recognizedOnly property name can be 
recognized (w/ webkit prefix)
EdgeNo support  No support

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

Mozilla Taiwan

___
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform