[BUG] Child of display:contents element not visible to Playwright

[adamseckel]

Context:

• Playwright Version: 1.8.1

• Operating System: Linux, Mac

• Node.js version: 12.13.1

• Browser: Chromium

  System:
  OS: macOS 11.2.3
  Memory: 104.15 MB / 16.00 GB
  Binaries:
  Node: 12.13.1 - /usr/local/bin/node
  Yarn: 2.4.0 - /usr/local/bin/yarn
  npm: 6.12.1 - /usr/local/bin/npm
  Languages:
  Bash: 3.2.57 - /bin/bash

Code Snippet

<div class="parent" style="display: contents;">
  <div class="child" style="width: 200px; height: 200px; position: relative;"></div>
</div> 

...
await page.waitForSelector(`.child`, { state: "visible" })
...

Describe the bug

It seems that if a layer is the child of a layer with style.display = "contents", calling waitForSelector(.child, { state: "visible" }) Playwright doesn't believe the layer is visible. The issue can be worked around by using { state: "attached" }.

The same is true if waitForSelector is called on the parent, but this makes sense based on the implementation, which expects a bounding box, and elements with display: contents do not have a box, instead taking on the box of their contents, but is still not desired behaviour: https://developer.mozilla.org/en-US/docs/Web/CSS/display#box perhaps the accessibility issues are impacting this?

Apologies for the over-simplified code snippet, this extracted from a company code base.

[pavelfeldman]

Could you try latest Playwright v1.10? We had a fix for display:contents there.

[adamseckel]

Gave that a try, it was still unable to find the visible selector on 1.10!

[yury-s]

The upstream fix hasn't been rolled yet (we are currently building chromium dev revision that contains the #5950). This issue is tracked in #5858, once it is closed I hope this bug will be fixed too.

[aslushnikov]

Closing as dupe of #5858

[basilgood]

This issue is still not resolved.
If a selector has display: none and his child has anything, when the parent becomes visible Playwright doesn't believe the layer child is visible. The issue can be worked around by using { state: "attached" }.

Context:

• Playwright Version: 1.17.1

• Operating System: Linux

• Node.js version: 14.18.1

• Browser: Chromium

Code Snippet:

      <div class="wrapper">
        Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()">

        <footer id="parent" style="display:none">
          <p id="child" style="display:contents">Checkbox is CHECKED!</p>
        </footer>
      </div>
      
    <script type = "text/javascript">
      function myFunction() {
        const checkBox = document.getElementById("myCheck");
        if (checkBox.checked == true) {
          pagefooter.style.display = "block";
        } else {
          pagefooter.style.display = "none";
        }
      }
    </script>

await page.waitForSelector('.child')

waiting for selector ""Checkbox is CHECKED!"" to be visible
  selector resolved to hidden <p id="child">Checkbox is CHECKED!</p>

[aslushnikov]

@basilgood could you please file a new issue with a repro script? thanks!

[basilgood]

Yes thank you.