eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-26 01:35:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Improve support for CalculatedStyleValue in translate

Browse Source 
- Omit calcs that are resolved to `0px` from the serialized value
- Allow CSV to be the 'Z' component in interpolated value.
- Allow calcs with mixed percentages in the first two arguments.

To achieve the third item above the concept of a "special" value parsing
context has been added - this will also be useful for instance for
different arguments of color functions having different contexts.

Gains us 23 WPT tests
This commit is contained in:
Callum Law
2025-07-31 23:22:32 +12:00
committed by Sam Atkins
parent 18d65b014f
commit 39fdcbc526
Notes: github-actions[bot] 2025-08-08 08:46:24 +00:00 
Author: https://github.com/Calme1709
Commit: https://github.com/LadybirdBrowser/ladybird/commit/39fdcbc5269
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5773
Reviewed-by: https://github.com/AtkinsSJ ✅
Reviewed-by: https://github.com/tcl3
10 changed files with 57 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/animation/translate-interpolation.txt
View File

@@ -2,8 +2,8 @@ Harness status: OK
Found 408 tests
350 Pass
58 Fail
370 Pass
38 Fail
Pass CSS Transitions: property <translate> from [-100px] to [100px] at (-1) should be [-300px]
Pass CSS Transitions: property <translate> from [-100px] to [100px] at (0) should be [-100px]
Pass CSS Transitions: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]
@@ -148,30 +148,30 @@ Pass Web Animations: property <translate> from [-100px -50px 100px] to [0px] at
Pass Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (0.75) should be [-25px -12.5px 25px]
Pass Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (1) should be [0px]
Pass Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (2) should be [100px 50px -100px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Pass CSS Transitions: property <translate> from [none] to [none] at (-1) should be [none]
Pass CSS Transitions: property <translate> from [none] to [none] at (0) should be [none]
Pass CSS Transitions: property <translate> from [none] to [none] at (0.125) should be [none]

6
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-computed.txt
View File

@@ -2,15 +2,15 @@ Harness status: OK
Found 19 tests
17 Pass
2 Fail
18 Pass
1 Fail
Pass Property translate value 'none'
Pass Property translate value '0px'
Pass Property translate value '100%'
Pass Property translate value '100px 0px'
Pass Property translate value '100px 0.1px'
Pass Property translate value '100px 0%'
Fail Property translate value '100px calc(10px - 10%)'
Pass Property translate value '100px calc(10px - 10%)'
Pass Property translate value '100px 200%'
Pass Property translate value '100% 200px'
Pass Property translate value '100px 200px 0px'

7
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-valid.txt
View File

@@ -2,15 +2,14 @@ Harness status: OK
Found 20 tests
18 Pass
2 Fail
20 Pass
Pass e.style['translate'] = "none" should set the property value
Pass e.style['translate'] = "0px" should set the property value
Pass e.style['translate'] = "100%" should set the property value
Pass e.style['translate'] = "100px 0px" should set the property value
Pass e.style['translate'] = "100px 0.1px" should set the property value
Pass e.style['translate'] = "100px 0%" should set the property value
Fail e.style['translate'] = "100px calc(10px - 10%)" should set the property value
Pass e.style['translate'] = "100px calc(10px - 10%)" should set the property value
Pass e.style['translate'] = "100px 200%" should set the property value
Pass e.style['translate'] = "100% 200px" should set the property value
Pass e.style['translate'] = "100px 200px 0px" should set the property value
@@ -21,6 +20,6 @@ Pass e.style['translate'] = "100% 200% 300px" should set the property value
Pass e.style['translate'] = "100% 0% 200px" should set the property value
Pass e.style['translate'] = "0% 0% 100px" should set the property value
Pass e.style['translate'] = "0em 0em 100px" should set the property value
Fail e.style['translate'] = "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)" should set the property value
Pass e.style['translate'] = "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)" should set the property value
Pass e.style['translate'] = "0" should set the property value
Pass e.style['translate'] = "1px 2px 0" should set the property value