Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css3-images] Parsing tests for images properties #9339

Merged
merged 1 commit into from Apr 27, 2018

Conversation

@ewilligers
Copy link
Contributor

ewilligers commented Feb 1, 2018

Status at the end of January 2018:

Edge does not support the image-rendering property. Other browsers
reject some/all of the following keywords:
smooth, high-quality, crisp-edges, pixelated.

Only Firefox support image-orientation.

Edge converts all object-position values containing keywords to
percentages when serializing. Other browsers preserve keywords
like 'top' and 'center'.

No browsers yet reject 3-value object-position values. They are
deprecated in Blink with support to be removed in M68, July 2018.

For object-fit, no browsers support scale-down in combination with
contain or cover.

No browsers support image-resolution.

@ewilligers ewilligers requested review from tabatkins, fantasai and plinss Feb 1, 2018

@ewilligers ewilligers force-pushed the ewilligers:images-parsing branch from cd66c37 to 0809c49 Feb 1, 2018

@w3c-bots

This comment has been minimized.

Copy link

w3c-bots commented Feb 1, 2018

Build PASSED

Started: 2018-02-01 15:02:00
Finished: 2018-02-01 15:11:25

View more information about this build on:

[css3-images] Parsing tests for images properties
Status at the end of January 2018:

Edge does not support the image-rendering property. Other browsers
reject some/all of the following keywords:
smooth, high-quality, crisp-edges, pixelated.

Only Firefox support image-orientation.

Edge converts all object-position values containing keywords to
percentages when serializing. Other browsers preserve keywords
like 'top' and 'center'.

No browsers yet reject 3-value object-position values. They are
deprecated in Blink with support to be removed in M68, July 2018.

For object-fit, no browsers support scale-down in combination with
contain or cover.

No browsers support image-resolution.

@ewilligers ewilligers force-pushed the ewilligers:images-parsing branch from 404b2c3 to 92f129c Feb 1, 2018

@ewilligers

This comment has been minimized.

Copy link
Contributor Author

ewilligers commented Feb 5, 2018

Note that there is no consistency in how browsers are serializing <position> values.

10% Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) 10% center 10% 10% center 10% center
background-position: <bg-position> 10% center 10% 10% center 10% center
object-position: <position> 10% center 10% 50% 10% center 10% center
perspective-origin: <position> 10% center 10% 50% 10% center 10% center
shape-outside: circle(at <position>) 10% 50% 10% 10% 10% 50%
20% 30px Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) 20% 30px 20% 30px 20% 30px 20% 30px
background-position: <bg-position> 20% 30px 20% 30px 20% 30px 20% 30px
object-position: <position> 20% 30px 20% 30px 20% 30px 20% 30px
perspective-origin: <position> 20% 30px 20% 30px 20% 30px 20% 30px
shape-outside: circle(at <position>) 20% 30px 20% 30px 20% 30px 20% 30px
30px center Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) 30px center 30px 30px center 30px center
background-position: <bg-position> 30px center 30px 30px center 30px center
object-position: <position> 30px center 30px 50% 30px center 30px center
perspective-origin: <position> 30px center 30px center 30px center 30px center
shape-outside: circle(at <position>) 30px 50% 30px center 30px center 30px 50%
40px top Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) 40px top 40px top 40px top 40px top
background-position: <bg-position> 40px top 40px top 40px top 40px top
object-position: <position> 40px top 40px 0% 40px top 40px top
perspective-origin: <position> 40px top 40px top 40px top 40px top
shape-outside: circle(at <position>) 40px 0% 40px top 40px top 40px 0%
bottom 10% right 20% Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) right 20% bottom 10% right 20% bottom 10% right 20% bottom 10% right 20% bottom 10%
background-position: <bg-position> right 20% bottom 10% right 20% bottom 10% right 20% bottom 10% right 20% bottom 10%
object-position: <position> right 20% bottom 10% calc(80%) calc(90%) right 20% bottom 10% right 20% bottom 10%
perspective-origin: <position> right 20% bottom 10% undefined right 20% bottom 10% right 20% bottom 10%
shape-outside: circle(at <position>) 80% 90% bottom 10% right 20% bottom 10% right 20% 80% 90%
bottom right Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) right bottom right bottom right bottom right bottom
background-position: <bg-position> right bottom right bottom right bottom right bottom
object-position: <position> right bottom 100% 100% right bottom right bottom
perspective-origin: <position> right bottom right bottom right bottom right bottom
shape-outside: circle(at <position>) 100% 100% bottom right bottom right 100% 100%
center Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) center center center center center center center
background-position: <bg-position> center center center center center center center
object-position: <position> center center 50% 50% center center center
perspective-origin: <position> center center center 50% center center center center
shape-outside: circle(at <position>) 50% 50% center center 50% 50%
center 50px Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) center 50px center 50px center 50px center 50px
background-position: <bg-position> center 50px center 50px center 50px center 50px
object-position: <position> center 50px 50% 50px center 50px center 50px
perspective-origin: <position> center 50px center 50px center 50px center 50px
shape-outside: circle(at <position>) 50% 50px center 50px center 50px 50% 50px
center bottom Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) center bottom bottom center bottom center bottom
background-position: <bg-position> center bottom bottom center bottom center bottom
object-position: <position> center bottom 50% 100% center bottom center bottom
perspective-origin: <position> center bottom center bottom center bottom center bottom
shape-outside: circle(at <position>) 50% 100% center bottom center bottom 50% 100%
center center Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) center center center center center center center
background-position: <bg-position> center center center center center center center
object-position: <position> center center 50% 50% center center center
perspective-origin: <position> center center center center center center center center
shape-outside: circle(at <position>) 50% 50% center center center center 50% 50%
center left Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) left center left left center left center
background-position: <bg-position> left center left left center left center
object-position: <position> left center 0% 50% left center left center
perspective-origin: <position> left center left center left center left center
shape-outside: circle(at <position>) 0% 50% center left center left 0% 50%
left Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) left center left left center left center
background-position: <bg-position> left center left left center left center
object-position: <position> left center 0% 50% left center left center
perspective-origin: <position> left center left 50% left center left center
shape-outside: circle(at <position>) 0% 50% left left 0% 50%
left bottom Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) left bottom left bottom left bottom left bottom
background-position: <bg-position> left bottom left bottom left bottom left bottom
object-position: <position> left bottom 0% 100% left bottom left bottom
perspective-origin: <position> left bottom left bottom left bottom left bottom
shape-outside: circle(at <position>) 0% 100% left bottom left bottom 0% 100%
left center Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) left center left left center left center
background-position: <bg-position> left center left left center left center
object-position: <position> left center 0% 50% left center left center
perspective-origin: <position> left center left center left center left center
shape-outside: circle(at <position>) 0% 50% left center left center 0% 50%
right 30% top 60px Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) right 30% top 60px right 30% top 60px right 30% top 60px right 30% top 60px
background-position: <bg-position> right 30% top 60px right 30% top 60px right 30% top 60px right 30% top 60px
object-position: <position> right 30% top 60px calc(70%) 60px right 30% top 60px right 30% top 60px
perspective-origin: <position> right 30% top 60px undefined right 30% top 60px right 30% top 60px
shape-outside: circle(at <position>) 70% 60px right 30% top 60px right 30% top 60px 70% 60px
right 40% Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) right 40% right 40% right 40% right 40%
background-position: <bg-position> right 40% right 40% right 40% right 40%
object-position: <position> right 40% 100% 40% right 40% right 40%
perspective-origin: <position> right 40% right 40% right 40% right 40%
shape-outside: circle(at <position>) 100% 40% right 40% right 40% 100% 40%
top Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) center top top center top center top
background-position: <bg-position> center top top center top center top
object-position: <position> center top 50% 0% center top center top
perspective-origin: <position> center top 50% top center top center top
shape-outside: circle(at <position>) 50% 0% top top 50% 0%
top center Chrome 64 Edge 16 Firefox 58 Safari 11
background-image: radial-gradient(at <position>, red, blue) center top top center top center top
background-position: <bg-position> center top top center top center top
object-position: <position> center top 50% 0% center top center top
perspective-origin: <position> center top center top center top center top
shape-outside: circle(at <position>) 50% 0% top center top center 50% 0%
@emilio

This comment has been minimized.

Copy link
Contributor

emilio commented Feb 5, 2018

Note that Firefox serializes position in shape-outside (and all <basic-shape>s) differently very intentionally:

https://github.com/servo/servo/blob/6b2e5283c9e810ac316c203849b6ea25544a62c7/components/style/values/specified/basic_shape.rs#L257

It'd be sweet to remove that code and make it consistent with the rest.

@emilio

This comment has been minimized.

Copy link
Contributor

emilio commented Feb 5, 2018

That points to https://drafts.csswg.org/css-shapes/#basic-shape-serialization in particular... But I think for sanity we should just serialize the same, and shape-outside seems fairly low risk.

@ewilligers

This comment has been minimized.

Copy link
Contributor Author

ewilligers commented Feb 11, 2018

I would like to merge at minimum the <position> -invalid tests so we have tests that 3 value positions are invalid.

For -valid serialization of object position, I excluded the Edge serializations
"calc(70%) 60px"
"calc(80%) calc(90%)"
based on my understanding that calc should not be introduced.

@ewilligers

This comment has been minimized.

Copy link
Contributor Author

ewilligers commented Apr 9, 2018

@emilio please review.

The preferred serialization of has been split out into w3c/csswg-drafts#2301 and w3c/csswg-drafts#2274 . The tests can be made stricter when they are resolved.

@FremyCompany
Copy link
Contributor

FremyCompany left a comment

Sounds good, given csswg-drafts issues exist to keep track of differences in serialization

@ewilligers ewilligers merged commit 7790a59 into web-platform-tests:master Apr 27, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@ewilligers ewilligers deleted the ewilligers:images-parsing branch Apr 27, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.