Skip to content

[css-values] Inconsistent position serialization #2274

Closed
@ewilligers

Description

The position spec mentions

The canonical order when serializing is the horizontal component followed by the vertical component.

but does not discuss if the serialization should contain the author's supplied keywords or if they should be converted to equivalent percentages.

The spec also doesn't mention if 'center' should be added or removed when serializing. (Edge and Safari sometimes serialize center center as center.)

Browsers are currently inconsistent with themselves and each other:

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%

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

        翻译: