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(dialog): Add redlines to dialog screenshots; update to match spec #3602

Merged
merged 21 commits into from
Sep 21, 2018
Merged

fix(dialog): Add redlines to dialog screenshots; update to match spec #3602

merged 21 commits into from
Sep 21, 2018

Conversation

acdvorak
Copy link
Contributor

What it does

  • Adds redlines to all mdc-dialog screenshot test pages:
    • If the measured value matches spec exactly, it is colored green.
    • If the measured value is off by 1px from spec, it is colored pink.
    • If the measured value is off by more than 1px, it is colored red.
  • Fixes earlier redline flakiness in IE, Edge, and Firefox:
    • Adds mdc-dialog-scroll-lock and mdc-dialog--open classes to HTML
    • Making the dialog initially visible seems to improve flakiness massively. I'm guessing that's because we avoid triggering reflow after the dialog animates open.
  • Caveat: Scrollbars currently screw up distance measurements. I can fix that in a future PR.

Example output

Before:

alert-without-redlines

After:

alert-with-redlines

@mdc-web-bot
Copy link
Collaborator

🤖 Beep boop!

Screenshot test report 🚦

56 screenshots changed from master on commit 2f4d5e9:

Details

@mdc-web-bot
Copy link
Collaborator

🤖 Beep boop!

Screenshot test report 🚦

68 screenshots changed from master on commit 9a8d806:

Details

56 Changed:

12 Added:

@acdvorak acdvorak mentioned this pull request Sep 21, 2018
Merged
@mdc-web-bot
Copy link
Collaborator

🤖 Beep boop!

Screenshot test report 🚦

72 screenshots changed from master on commit 651aa8f:

Details

60 Changed:

12 Added:

@kfranqueiro kfranqueiro changed the title chore(infrastructure): Add redlines to dialog screenshots fix(dialog): Add redlines to dialog screenshots; update to match spec Sep 21, 2018
@mdc-web-bot
Copy link
Collaborator

🤖 Beep boop!

Screenshot test report 🚦

72 screenshots changed from master on commit 998f41a:

Details

60 Changed:

12 Added:

@kfranqueiro kfranqueiro added this to the Dialog milestone Sep 21, 2018
@kfranqueiro kfranqueiro merged commit 4da83dd into master Sep 21, 2018
@kfranqueiro kfranqueiro deleted the chore/infra/dialog-redlines branch September 21, 2018 18:08
@jamesmfriedman jamesmfriedman mentioned this pull request Sep 26, 2018
Closed
49 tasks
@kfranqueiro kfranqueiro mentioned this pull request Oct 30, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kfranqueiro kfranqueiro kfranqueiro approved these changes

Assignees

@kfranqueiro kfranqueiro

Labels
cla: yes
Projects
None yet
Milestone
Dialog
Development

Successfully merging this pull request may close these issues.
4 participants
@acdvorak @mdc-web-bot @kfranqueiro @googlebot