diff --git a/README.md b/README.md index 34e10e59..297203f4 100644 --- a/README.md +++ b/README.md @@ -120,10 +120,6 @@ manually, by passing a single boolean with `polyfill(true)`. ## Limitations -This polyfill was implemented against an early version of the spec, and updates -were paused to allow the syntax to solidify. Now that browsers are working on -implementation, we are in the process of bringing it up to date. - While this polyfill supports many basic use cases, it doesn't (yet) support the following features: @@ -142,16 +138,16 @@ following features: - `position-area` property - `anchor-center` value for `justify-self`, `align-self`, `justify-items`, and `align-items` properties -- anchor functions with `implicit` anchor-element - automatic anchor positioning: anchor functions with `inside` or `outside` anchor-side - `position-visibility` property - dynamically added/removed anchors or targets - anchors or targets in the shadow-dom -- anchors or targets in constructed stylesheets (https://github.com/oddbird/css-anchor-positioning/issues/228) - anchor functions assigned to `inset-*` properties or `inset` shorthand property - vertical/rtl writing-modes (partial support) +- implicit anchors or the `position-anchor: auto` keyword (pending resolution of + https://github.com/whatwg/html/pull/9144) In addition, JS APIs like `CSSPositionTryRule` or `CSS.supports` will not be polyfilled. diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 00000000..a149bf12 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/index.html b/index.html index a61cc115..6ad78ca0 100644 --- a/index.html +++ b/index.html @@ -23,8 +23,6 @@ - - @@ -39,12 +37,13 @@ - + + `; - const { rules } = await parseCSS([{ css }] as StyleData[]); - const expected = { - '#my-implicit-target': { - declarations: { - right: [ - { - anchorName: undefined, - customPropName: undefined, - anchorEl: document.getElementById('my-implicit-anchor'), - targetEl: document.getElementById('my-implicit-target'), - anchorSide: 'left', - fallbackValue: '0px', - uuid: expect.any(String), - }, - ], - bottom: [ - { - anchorName: undefined, - customPropName: undefined, - anchorEl: document.getElementById('my-implicit-anchor'), - targetEl: document.getElementById('my-implicit-target'), - anchorSide: 'top', - fallbackValue: '0px', - uuid: expect.any(String), - }, - ], - }, - }, - }; - - expect(rules).toEqual(expected); - }); - it('parses `anchor()` (name set via custom property)', async () => { document.body.innerHTML = '
' +