- From: Eric Willigers via GitHub <sysbot+gh@w3.org>
- Date: Mon, 05 Feb 2018 02:59:38 +0000
- To: public-css-archive@w3.org
ewilligers has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-values] Inconsistent position serialization == The `position` [spec](https://drafts.csswg.org/css-values/#position) 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. (Safari serializes `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% | Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2274 using your GitHub account
Received on Monday, 5 February 2018 02:59:42 UTC