[css3-images] Parsing tests for images properties

[ewilligers]

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.

[ghost]

Build PASSED

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

View more information about this build on:

• WPT PR Status
• TravisCI

[ewilligers]

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]

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]

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]

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]

@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]

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