1973055 - Unable to set CSS properties anchor-name and position-anchor via JS (style.setProperty)

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Josh]

Steps to reproduce:

FireFox 139.0.4 (Mac OS)

Tried to set values for popover elements and their triggers via JS (anchor-name and position-anchor) using the following code with no luck:

HTML:

<div class="popover-menu-wrapper">
  <button class="popover-menu-trigger">Open menu</button>
  <menu class="popover-menu" popover>
    <a class="menu-item" href="#">Menu item</a>
    <a class="menu-item" href="#">Menu item</a>
    <a class="menu-item" href="#">Menu item</a>
  </menu>
</div>

JS:

const popoverMenuWrappers = document.querySelectorAll(
  ".popover-menu-wrapper"
);
popoverMenuWrappers.forEach(popoverMenuWrapper => {
  const popoverMenuTrigger = popoverMenuWrapper.querySelector(
    ".popover-menu-trigger"
  );
  const popoverMenu = popoverMenuWrapper.querySelector(
    ".popover-menu"
  );
  const popoverMenuItems = popoverMenu.querySelectorAll(".menu-item");
  const id = window.crypto.randomUUID();
  const popoverMenuTriggerId = `popover-menu-trigger_${id}`;
  const popoverMenuId = `popover-menu_${id}`
  popoverMenuTrigger.id = popoverMenuTriggerId;
  popoverMenuTrigger.setAttribute('popovertarget', popoverMenuId);
  popoverMenu.id = popoverMenuId;
  popoverMenuTrigger.style.setProperty('anchor-name', `--${popoverMenuTriggerId}`);
  popoverMenu.style.setProperty('position-anchor', `--${popoverMenuTriggerId}`);
});

Actual results:

I expected anchor-name and position-anchor to be applied to the appropriate elements, but they were never applied.

Expected results:

The trigger button should have received an inline style for the anchor-name rule, and the popover should have received an inline style for the position-anchor rule.

Comment 1

[Josh]

Forgot one line in the JS. It is supposed to include the following:

popoverMenuTrigger.setAttribute("popovertarget", popoverMenuId);

This part works as expected.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Thanks for the bug report! Firefox is still developing CSS anchor positioning, and it is not ready for use yet.

Could you attach a standalone testcase via "Attach New File", or a full testcase in jsfiddle? The team can circle back to this bug once the anchor positioning is ready, ensuring the anchor-name and position-anchor properties works as expected via JS in your example.

Comment 4

[Josh]

No problem. Here is a fiddle that works as expected in Chrome: https://jsfiddle.net/gq9pm47h/5/

Comment 5

[Connor Shea]

I think this is resolved in the latest nightly release, maybe thanks to https://bugzilla.mozilla.org/show_bug.cgi?id=1909328?