CSS.supports can disagree with CSSOM feature detection

[foolip]

Digging into https://github.com/mdn/browser-compat-data/pull/3667/files/5562af96cde102135a7e643e031f7f1fee71a3f7#diff-ca8acc47e6afb1f4ec0010894b1e7b03 I found that these two tests disagree in Edge:

• CSS.supports("font-size-adjust", "inherit") returns false
• 'fontSizeAdjust' in document.body.style returns true

CSS.supports("font-size-adjust", "0.5") also returns false. Tested with https://software.hixie.ch/utilities/js/live-dom-viewer/saved/6808 in Edge 18.

I'd checked before that there were no disagreements, but might not have had these results then.

It will be necessary to have a way to resolve cases where two tests for the same feature lead to true and false.

[foolip]

When resolving this issue we should check if https://github.com/foolip/mdn-bcd-collector/pull/416/files#r485522138 as been fixed. It's sort of in the same area of code.

[gsnedders]

https://bugs.webkit.org/show_bug.cgi?id=222280 and https://bugs.webkit.org/show_bug.cgi?id=223141 will cause false-positives in WebKit-based browsers for runtime disabled properties when testing with CSS.supports (the only one I'm currently aware of is overscroll-behavior, but there may be others historically)

[foolip]

Thanks @gsnedders, I hadn't noticed that, I hope we haven't updated data based on such false positives yet.

I think the useful next step here would try to depend only on 'fontSizeAdjust' in document.body.style and see if that changes the results for any recent browsers. If not, we can just use that, and then use CSS.supports to check support for specific keywords in #705.

[foolip]

This issue affected https://mdn-bcd-collector.appspot.com/tests/css/properties/aspect-ratio in Safari 14.1, where "aspectRatio" in document.body.style returns false, but CSS.supports("aspect-ratio", "inherit") returns true.

@apple-web-evangelist FYI, there's a risk that other such false positives have occurred.

[foolip]

OK, so trying to fix this and comparing the before/after test results in Safari 14.1 shows that the properties that go from true to false are -apple-color-filter, -apple-pay-button-style, -apple-pay-button-type, -apple-trailing-word, -internal-text-autosizing-status, aspect-ratio, overscroll-behavior, overscroll-behavior-x, overscroll-behavior-y, and scroll-behavior.

In other words, this affects properties behind a runtime flag, but things can also go wrong with prefixed properties. It turns out that '-apple-color-filter' in document.body.style is true, but 'appleColorFilter' in document.body.style and 'AppleColorFilter' in document.body.style are false.

[foolip]

The same before/after in Chrome reveals a similar problem with -epub properties. '-epub-caption-side' in document.body.style is true, but 'epubCaptionSide' in document.body.style and 'EpubCaptionSide' in document.body.style are false.

I would half expect that there's been some historical weirdness with -webkit properties as well.

[gsnedders]

In other words, this affects properties behind a runtime flag, but things can also go wrong with prefixed properties. It turns out that '-apple-color-filter' in document.body.style is true, but 'appleColorFilter' in document.body.style and 'AppleColorFilter' in document.body.style are false.

-apple-color-filter shouldn't be web-exposed; that's https://bugs.webkit.org/show_bug.cgi?id=224930

[foolip]

In that case I'll go ahead and remove these properties from mdn-bcd-collector, there will never be a reason to add them to BCD.