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%
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3