Fix tests for clamping to 0 with keyframes with calc() values #37457
Conversation
https://bugs.webkit.org/show_bug.cgi?id=249151 Reviewed by Simon Fraser and Dean Jackson. The "perspective" property is specified to only allow non-negative values, see https://www.w3.org/TR/css-transforms-2/#perspective-property. However, we don't clip values that are computed to less than 0, for instance using a calc() expression. Instead, we deem them invalid internally and thus consider as if "none" was provided, which has implications when blending. Indeed, when interpolating between a valid value and "none", we use discrete interpolation. We now correctly clip values below 0. Note that the relevant WPT test still fails, because the test itself is not valid. It is being addressed in a dedicated WPT PR and will be imported back into WebKit yielding a PASS result. See web-platform-tests/wpt#37457. * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/perspective-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/perspective-expected.txt: * Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumePerspective): Canonical link: https://commits.webkit.org/257779@main
|
Long term I would like to see chrome's behavior spec'd since i think it supports more use cases, but I can see this is what the spec currently says to do, so it seems reasonable to test. Can you also add tests showing the expectations for an animation of both relative size affecting property (e.g. font-size or height) and a clamped property depending on that property? |
|
+@kevers-google FYI |
Yes, this may make sense, I agree. But at it stands better to have the tests reflect the specs than wait for the specs to catch up.
I'm sorry but I don't get what you mean. Can you write an example? I'm happy to then expand it to the various tests. |
https://bugs.webkit.org/show_bug.cgi?id=249292 Reviewed by Dean Jackson. Import changes made in web-platform-tests/wpt#37457 which yield new PASS results in WebKit. * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/columnGap-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/columnGap.html: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/lineHeight-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/lineHeight.html: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/minHeight-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/minHeight.html: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/perspective-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/perspective.html: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/rowGap-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/web-animations/responsive/rowGap.html: Canonical link: https://commits.webkit.org/257849@main
In particular, I was thinking we should have testing for the interpolation of some cases like these: element.animate([{minHeight: '30px', fontSize: '10px'}, {minHeight: 'calc(30px - 2em)', fontSize: '40px'}], 1000);Or element.animate([{minHeight: '30px'}, {minHeight: 'calc(30px - 2em)'}], 1000);
element.animate([{fontSize: '10px'}, {fontSize: '40px'}], 1000);
// Or ancestor.animate(...)Or window.CSS.registerProperty({
name: '--min-height',
syntax: '<length>',
inherits: false,
initialValue: '0px',
});
element.style.minHeight = 'var(--min-height)';
element.style.fontSize = '40px';
element.animate([{'--min-height': '30px'}, {'--min-height': 'calc(30px - 2em)'}], 1000); |
Addresses issue #37053.