| Summary: | [web-animations] handle blending of layout-dependent <transform-list> values | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Antoine Quint <graouts> |
| Component: | Animations | Assignee: | Antoine Quint <graouts> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | ahmad.saleem792, dino, graouts, koivisto, webkit-bug-importer |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar, WPTImpact |
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | 246937 | ||
| Bug Blocks: | 222096 | ||
Pull request: https://github.com/WebKit/WebKit/pull/5684 Performing a layout should not be required to pass this test, I wrote all the details in https://github.com/WebKit/WebKit/pull/5684#issuecomment-1288636644. We'll need mix() support, I filed https://bugs.webkit.org/show_bug.cgi?id=246937. Retitling this bug to correctly identify the issue. Still failing sub-test: https://wpt.fyi/results/web-animations/interfaces/Animation/commitStyles.html?label=master&label=experimental&aligned=&q=safari%3Afail+firefox%3Apass+chrome%3Apass Adding 'WPTImpact' and 'BrowserCompat' tags. |
We're failing a subtest in web-animations/interfaces/Animation/commitStyles.html: test(t => { const div = createDiv(t); div.style.width = '200px'; div.style.height = '200px'; const animation = div.animate({ transform: ["translate(100%, 0%)", "scale(3)"] }, 1000); animation.currentTime = 500; animation.commitStyles(); animation.cancel(); assert_equals(getComputedStyle(div).transform, "matrix(2, 0, 0, 2, 100, 0)", "Resolved transform is correct after commit."); }, 'Commits matrix-interpolated relative transforms'); Our current result is "matrix(2, 0, 0, 2, 0, 0)" because when we blend under commitStyles() layout has not happened yet for the div and the bounds passed to resolve the 100% translation value is 0,0.