Closed Bug 1646740 Opened 4 years ago Closed 4 years ago

The offsetParent of an assigned element in the shadowRoot is apparently incorrect.

Categories

(Core :: DOM: Core & HTML, defect)

77 Branch
defect

Tracking

()

RESOLVED INVALID

People

(Reporter: pawel, Unassigned)

Details

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

See the code below. Open it in Firefox as well as in Chrome.

<html>
<body>
<test-offsetparent><div></div></test-offsetparent>
<script>
const template = document.createElement('template');

 template.innerHTML = `
 <style>
      :host {
           border: 1px solid;
           display: inline-grid;
           grid-template-columns: auto auto;
           left: 50%;
           position: absolute;
           top: 50%;
           transform: translate(-50%, -50%);
      }

      #offset {
           height: 100px;
           width: 37px;
      }

      #window {
           height: 100px;
           overflow-x: hidden;
           position: relative;
           width: 100px;
      }

      slot {
           display: flex;
           left: 0;
           position: absolute;
           top: 0;
      }

      ::slotted(div) {
           height: 100px;
           width: 100px;
           background-color: green;
      }
 </style>
 <div id="offset"></div>
 <div id="window"><slot></slot></div>
 `;

 class TestOffsetParent extends HTMLElement {

      constructor() {
           super();
           this.attachShadow({ mode: 'open' });
           this.shadowRoot.appendChild(template.content.cloneNode(true));
      }

      connectedCallback() {
           let elements =  this.shadowRoot.querySelector("slot");

           console.log(elements.assignedElements()[0].offsetParent);
           elements.style.left = -elements.assignedElements()[0].offsetLeft;
      }

 }

 customElements.define('test-offsetparent', TestOffsetParent);
 </script>

</body>
</html>

Actual results:

In Firefox you see only part of the green square. In Chrome you see the entire green square.

Expected results:

I would expect to see that the entire 100px by 100px square, as it is in Chrome. After studying the issue, I found that the offsetParent of an assigned element is not the slot but the parent in the real DOM, in this case, test-offsetparent. In Chrome, the parent is the slot. While I can see the arguments for both sides, since I am accessing the assigned element through this.shadowRoot.querySelector("slot").assignedElements(), that is, essentially through the shadowRoot, I would expect the parent to be the slot.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Component: Untriaged → DOM: Core & HTML
Product: Firefox → Core

This is a chrome bug, see https://github.com/w3c/csswg-drafts/issues/159. WebKit behaves like Firefox. https://bugs.chromium.org/p/chromium/issues/detail?id=920069 tracks fixing this in Chrome.

Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.