Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: inline element with visibile child now is considered visible #8130

Merged
merged 2 commits into from
Aug 17, 2020
Merged

fix: inline element with visibile child now is considered visible #8130

merged 2 commits into from
Aug 17, 2020

Conversation

panzarino
Copy link
Contributor

@panzarino panzarino commented Jul 30, 2020 •
edited by jennifer-shehane
Loading

User facing changelog

Fixes an issue where a display: inline parent would be considered hidden if it had a visible child who had display: block

Additional details

I do not think that implementing this fix is an appropriate course of action, see this comment in the original issue: #6183 (comment). Updated comment: #8130 (comment)

I would like to have a discussion around this before we decide to merge these changes.

How has the user experience changed?

Given the following test case (modified here so may not work exactly, but shows the general idea, actual test case can be seen in diff):

const element = `
<div>
  <span>
    <label style="display: block;">display: block</label>
  </span>
</div>
`

it('parent is visible if display inline and child has display block', function () {
  expect(element.find('span')).to.be.visible
  expect(element.find('span')).to.not.be.hidden
})

Before:

Screen Shot 2020-07-30 at 11 51 56 AM

After:

Screen Shot 2020-07-30 at 11 51 15 AM

Given the original test case from the issue:

<html>
<body>
  <p>
    <span onmouseover="window.hover.style.display='block'" onmouseout="window.hover.style.display='none'">
      <label style="display: block">Hover me!</label>
    </span>
  </p>
  <p id="hover" style="display: none">
    Hovering!
  </p>
</body>
</html>
it("should work", () => {
  cy.visit("index.html")
  cy.get("span").trigger("mouseover")
})

Before:

After:

Screen Shot 2020-07-30 at 12 10 19 PM

PR Tasks

  • Have tests been added/updated?
  • Has the original issue been tagged with a release in ZenHub?

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jul 30, 2020

Thanks for taking the time to open a PR!

@cypress
Copy link

cypress bot commented Jul 30, 2020


Test summary

7925 • 0 • 130 • 2

Run details
Project cypress
Status Passed
Commit 77dedc0
Started Jul 30, 2020 4:10 PM
Ended Jul 30, 2020 4:17 PM
Duration 06:36 💡
OS Linux Debian - 10.1
Browser Multiple

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@jennifer-shehane
Copy link
Member

Commented in issue: #6183 (comment) Yah, maybe another short discussion similar to opacity would be good.

@panzarino
Copy link
Contributor Author

@jennifer-shehane I think that we should go ahead with this fix. Despite the concern that this goes against the DOM structure in Chrome, it does not change any behavior in Firefox. Therefore, I think we should implement the change in order to standardize our tests across Chrome and Firefox, since it is less important that our visibility algorithm is technically correct regarding an edge case for an ambiguous W3 specification and more important that our tests are consistent between browsers.

@jennifer-shehane
Copy link
Member

Ok, I had a discussion task opened TR-232, but if you don't think that's necessary then I'll re-review.

@panzarino
Copy link
Contributor Author

@jennifer-shehane I would be open to having a discussion, but when I mentioned it in our Slack it did not get much interest. I can ask again on <onday and see if there is more interest.

1 similar comment
@panzarino

This comment has been minimized.

Sign in to view
@jennifer-shehane jennifer-shehane merged commit 4c8fb2f into develop Aug 17, 2020
@cypress-bot cypress-bot bot mentioned this pull request Aug 17, 2020
Closed
@warrensplayer warrensplayer mentioned this pull request Jun 12, 2023
Closed
3 tasks
@emilyrohrbough emilyrohrbough deleted the issue-6183 branch August 1, 2024 13:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jennifer-shehane jennifer-shehane jennifer-shehane approved these changes

@chrisbreiding chrisbreiding Awaiting requested review from chrisbreiding

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Inline, zero-dimension element: erroneous visibility determination
2 participants
@panzarino @jennifer-shehane