[hint-compat-api] Test against live sites

[antross]

Before turning the new CSS and HTML versions of this hint on-by-default we should do some runs against live sites tracking what it reports to see if there are any obvious false-positives being flagged.

See PR #1596 for a pre-built browser extension bundle for testing.

[antross]

To help, here's a pre-built bundle of the webhint browser extension with the compat-css and compat-css-next hints enabled:

webhint-plus-mdn-css.zip (Removed - use newer version above)

An initial test against webhint.io definitely shows some noise we'll want to reduce. I'll file separate issues for each needed change.

[antross]

Here's another pre-built bundle with both the CSS and HTML hints enabled (based on current progress in #1584).

webhint-plus-mdn-css-html.zip (Removed - use newer version above)

[molant]

@antross should this be an Epic? Something else that is needed to close this?

[antross]

@molant No, just keeping this around to remind us to selfhost hint-compat-api a bit more with the latest changes before turning it on-by-default.

Since those changes are wrapping up in this milestone, we should all make a deliberate effort next week to selfhost, then merge #1596 when we're happy with the results.

[antross]

We may want to add the crossorigin attribute to the built-in ignore list for HTML. It's often paired with the integrity attribute which we already ignore since SRI is a good thing to use even if not all your target browsers support it. That said, crossorigin can also be used in other contexts that don't involve integrity.

[antross]

Ignore the spellcheck attribute. Falls back without functional impact.

global attribute spellcheck is not supported by samsunginternet_android 4, webview_android 4.4.3-4.4.4.

[bruiztorres]

FYI: I have created #1797 to update the ignore list.

[molant]

I'm having some unexpected results on a site with bootstrap:

hint 1: viewport prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:518:1

hint 2: box-sizing prefixed with -webkit- is not supported by safari.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:15024

hint 3: box-sizing prefixed with -webkit- is not supported by safari.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:15120

hint 4: transition prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:16040

hint 5: box-sizing prefixed with -webkit- is not supported by safari.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:35613

hint 6: transition prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:36781

hint 7: transition prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:53867

hint 8: transition prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:82275

hint 9: transition prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:84168

hint 10: animation prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:84988

hint 11: transform prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:105473

hint 12: transition prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:105628

hint 13: transform prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:105790

hint 14: transition prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:111294

hint 15: transition prefixed with -o- is not supported by opera 56-57.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:111604

Let's pick the box-sizing for example:

hint 2: box-sizing prefixed with -webkit- is not supported by safari.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:15024

hint 3: box-sizing prefixed with -webkit- is not supported by safari.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:15120

hint 5: box-sizing prefixed with -webkit- is not supported by safari.
https://repos.opensource.microsoft.com/css/bootstrap.min.css?4a:11:35613

If I go to the source, all the references to -webkit-box-sizing are:

input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

I don't think the hint should be failing in this case. Am I wrong?

[antross]

I'm seeing the same and this shouldn't be failing. Let me update the pre-built bundle with the latest from master and try again just to be sure.

[antross]

Still repros for me with the latest from master.

[molant]

@borgitas21 do you still have time to look into this?

[bruiztorres]

Yes, I will check it. Could you provide the list of browsers you are using in this scenario?

[antross]

@borgitas21 We're using defaults for browserslist.