layout: Add support for object-fit and object-position (#33479)

This also makes a couple small improvements:
 - Rename `IntrinsicSizes` to `NaturalSizes` which reflects more
   modern spec language.
 - Move the conversion of Stylo's `ImageRendering` to WebRender's
   version to a `ToWebRender` trait implementation.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson 2024-09-18 08:20:28 +02:00 committed by GitHub
parent 632d832704
commit bd632fc814
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
58 changed files with 169 additions and 563 deletions

View file

@ -1,67 +1,4 @@
[object-position-interpolation.html]
[CSS Transitions: property <object-position> from neutral to [left top\] at (-0.25) should be [62.5% 62.5%\]]
expected: FAIL
[CSS Transitions: property <object-position> from neutral to [left top\] at (0) should be [50% 50%\]]
expected: FAIL
[CSS Transitions: property <object-position> from neutral to [left top\] at (0.25) should be [37.5% 37.5%\]]
expected: FAIL
[CSS Transitions: property <object-position> from neutral to [left top\] at (0.5) should be [25% 25%\]]
expected: FAIL
[CSS Transitions: property <object-position> from neutral to [left top\] at (0.75) should be [12.5% 12.5%\]]
expected: FAIL
[CSS Transitions: property <object-position> from neutral to [left top\] at (1) should be [0% 0%\]]
expected: FAIL
[CSS Transitions: property <object-position> from neutral to [left top\] at (1.25) should be [-12.5% -12.5%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from neutral to [left top\] at (-0.25) should be [62.5% 62.5%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from neutral to [left top\] at (0) should be [50% 50%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from neutral to [left top\] at (0.25) should be [37.5% 37.5%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from neutral to [left top\] at (0.5) should be [25% 25%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from neutral to [left top\] at (0.75) should be [12.5% 12.5%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from neutral to [left top\] at (1) should be [0% 0%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from neutral to [left top\] at (1.25) should be [-12.5% -12.5%\]]
expected: FAIL
[CSS Animations: property <object-position> from neutral to [left top\] at (-0.25) should be [62.5% 62.5%\]]
expected: FAIL
[CSS Animations: property <object-position> from neutral to [left top\] at (0) should be [50% 50%\]]
expected: FAIL
[CSS Animations: property <object-position> from neutral to [left top\] at (0.25) should be [37.5% 37.5%\]]
expected: FAIL
[CSS Animations: property <object-position> from neutral to [left top\] at (0.5) should be [25% 25%\]]
expected: FAIL
[CSS Animations: property <object-position> from neutral to [left top\] at (0.75) should be [12.5% 12.5%\]]
expected: FAIL
[CSS Animations: property <object-position> from neutral to [left top\] at (1) should be [0% 0%\]]
expected: FAIL
[CSS Animations: property <object-position> from neutral to [left top\] at (1.25) should be [-12.5% -12.5%\]]
expected: FAIL
[Web Animations: property <object-position> from neutral to [left top\] at (-0.25) should be [62.5% 62.5%\]]
expected: FAIL
@ -83,69 +20,6 @@
[Web Animations: property <object-position> from neutral to [left top\] at (1.25) should be [-12.5% -12.5%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [center top\] at (-0.25) should be [50% 62.5%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [center top\] at (0) should be [50% 50%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [center top\] at (0.25) should be [50% 37.5%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [center top\] at (0.5) should be [50% 25%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [center top\] at (0.75) should be [50% 12.5%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [center top\] at (1) should be [50% 0%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [center top\] at (1.25) should be [50% -12.5%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [center top\] at (-0.25) should be [50% 62.5%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [center top\] at (0) should be [50% 50%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [center top\] at (0.25) should be [50% 37.5%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [center top\] at (0.5) should be [50% 25%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [center top\] at (0.75) should be [50% 12.5%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [center top\] at (1) should be [50% 0%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [center top\] at (1.25) should be [50% -12.5%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [center top\] at (-0.25) should be [50% 62.5%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [center top\] at (0) should be [50% 50%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [center top\] at (0.25) should be [50% 37.5%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [center top\] at (0.5) should be [50% 25%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [center top\] at (0.75) should be [50% 12.5%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [center top\] at (1) should be [50% 0%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [center top\] at (1.25) should be [50% -12.5%\]]
expected: FAIL
[Web Animations: property <object-position> from [initial\] to [center top\] at (-0.25) should be [50% 62.5%\]]
expected: FAIL
@ -167,69 +41,6 @@
[Web Animations: property <object-position> from [initial\] to [center top\] at (1.25) should be [50% -12.5%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [left center\] at (-0.25) should be [62.5% 50%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [left center\] at (0) should be [50% 50%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [left center\] at (0.25) should be [37.5% 50%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [left center\] at (0.5) should be [25% 50%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [left center\] at (0.75) should be [12.5% 50%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [left center\] at (1) should be [0% 50%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [initial\] to [left center\] at (1.25) should be [-12.5% 50%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [left center\] at (-0.25) should be [62.5% 50%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [left center\] at (0) should be [50% 50%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [left center\] at (0.25) should be [37.5% 50%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [left center\] at (0.5) should be [25% 50%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [left center\] at (0.75) should be [12.5% 50%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [left center\] at (1) should be [0% 50%\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [initial\] to [left center\] at (1.25) should be [-12.5% 50%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [left center\] at (-0.25) should be [62.5% 50%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [left center\] at (0) should be [50% 50%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [left center\] at (0.25) should be [37.5% 50%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [left center\] at (0.5) should be [25% 50%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [left center\] at (0.75) should be [12.5% 50%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [left center\] at (1) should be [0% 50%\]]
expected: FAIL
[CSS Animations: property <object-position> from [initial\] to [left center\] at (1.25) should be [-12.5% 50%\]]
expected: FAIL
[Web Animations: property <object-position> from [initial\] to [left center\] at (-0.25) should be [62.5% 50%\]]
expected: FAIL
@ -251,69 +62,6 @@
[Web Animations: property <object-position> from [initial\] to [left center\] at (1.25) should be [-12.5% 50%\]]
expected: FAIL
[CSS Transitions: property <object-position> from [20px 20px\] to [100px 100px\] at (-0.25) should be [0px 0px\]]
expected: FAIL
[CSS Transitions: property <object-position> from [20px 20px\] to [100px 100px\] at (0) should be [20px 20px\]]
expected: FAIL
[CSS Transitions: property <object-position> from [20px 20px\] to [100px 100px\] at (0.25) should be [40px 40px\]]
expected: FAIL
[CSS Transitions: property <object-position> from [20px 20px\] to [100px 100px\] at (0.5) should be [60px 60px\]]
expected: FAIL
[CSS Transitions: property <object-position> from [20px 20px\] to [100px 100px\] at (0.75) should be [80px 80px\]]
expected: FAIL
[CSS Transitions: property <object-position> from [20px 20px\] to [100px 100px\] at (1) should be [100px 100px\]]
expected: FAIL
[CSS Transitions: property <object-position> from [20px 20px\] to [100px 100px\] at (1.25) should be [120px 120px\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [20px 20px\] to [100px 100px\] at (-0.25) should be [0px 0px\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [20px 20px\] to [100px 100px\] at (0) should be [20px 20px\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [20px 20px\] to [100px 100px\] at (0.25) should be [40px 40px\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [20px 20px\] to [100px 100px\] at (0.5) should be [60px 60px\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [20px 20px\] to [100px 100px\] at (0.75) should be [80px 80px\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [20px 20px\] to [100px 100px\] at (1) should be [100px 100px\]]
expected: FAIL
[CSS Transitions with transition: all: property <object-position> from [20px 20px\] to [100px 100px\] at (1.25) should be [120px 120px\]]
expected: FAIL
[CSS Animations: property <object-position> from [20px 20px\] to [100px 100px\] at (-0.25) should be [0px 0px\]]
expected: FAIL
[CSS Animations: property <object-position> from [20px 20px\] to [100px 100px\] at (0) should be [20px 20px\]]
expected: FAIL
[CSS Animations: property <object-position> from [20px 20px\] to [100px 100px\] at (0.25) should be [40px 40px\]]
expected: FAIL
[CSS Animations: property <object-position> from [20px 20px\] to [100px 100px\] at (0.5) should be [60px 60px\]]
expected: FAIL
[CSS Animations: property <object-position> from [20px 20px\] to [100px 100px\] at (0.75) should be [80px 80px\]]
expected: FAIL
[CSS Animations: property <object-position> from [20px 20px\] to [100px 100px\] at (1) should be [100px 100px\]]
expected: FAIL
[CSS Animations: property <object-position> from [20px 20px\] to [100px 100px\] at (1.25) should be [120px 120px\]]
expected: FAIL
[Web Animations: property <object-position> from [20px 20px\] to [100px 100px\] at (-0.25) should be [0px 0px\]]
expected: FAIL

View file

@ -4,15 +4,3 @@
[Property image-orientation inherits]
expected: FAIL
[Property object-fit has initial value fill]
expected: FAIL
[Property object-fit does not inherit]
expected: FAIL
[Property object-position has initial value 50% 50%]
expected: FAIL
[Property object-position does not inherit]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-contain-png-001c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-contain-png-001i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-contain-png-001p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-contain-png-002c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-contain-png-002i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-contain-png-002p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-containsize-png-001c.tentative.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-containsize-png-001i.tentative.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-containsize-png-001p.tentative.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-cover-png-001c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-cover-png-001i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-cover-png-001p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-cover-png-002c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-cover-png-002i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-cover-png-002p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-fill-png-001c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-fill-png-001i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-fill-png-001p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-fill-png-002c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-fill-png-002i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-fill-png-002p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-none-png-001c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-none-png-001i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-none-png-001p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-none-png-002c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-none-png-002i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-none-png-002p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-scale-down-png-001c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-scale-down-png-001i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-scale-down-png-001p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-scale-down-png-002c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-scale-down-png-002i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-fit-scale-down-png-002p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-position-png-001c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-position-png-001i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-position-png-001p.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-position-png-002c.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-position-png-002i.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[object-position-png-002p.html]
expected: FAIL

View file

@ -1,18 +1,3 @@
[object-fit-computed.html]
[Property object-fit value 'contain']
expected: FAIL
[Property object-fit value 'cover']
expected: FAIL
[Property object-fit value 'cover scale-down']
expected: FAIL
[Property object-fit value 'fill']
expected: FAIL
[Property object-fit value 'none']
expected: FAIL
[Property object-fit value 'scale-down']
expected: FAIL

View file

@ -1,25 +1,10 @@
[object-fit-valid.html]
[e.style['object-fit'\] = "contain" should set the property value]
expected: FAIL
[e.style['object-fit'\] = "contain scale-down" should set the property value]
expected: FAIL
[e.style['object-fit'\] = "cover" should set the property value]
expected: FAIL
[e.style['object-fit'\] = "cover scale-down" should set the property value]
expected: FAIL
[e.style['object-fit'\] = "fill" should set the property value]
expected: FAIL
[e.style['object-fit'\] = "none" should set the property value]
expected: FAIL
[e.style['object-fit'\] = "scale-down" should set the property value]
expected: FAIL
[e.style['object-fit'\] = "scale-down contain" should set the property value]
expected: FAIL

View file

@ -1,48 +0,0 @@
[object-position-computed.html]
[Property object-position value '10% center']
expected: FAIL
[Property object-position value 'right 30% top 60px']
expected: FAIL
[Property object-position value '-20% -30px']
expected: FAIL
[Property object-position value '30px center']
expected: FAIL
[Property object-position value '40px top']
expected: FAIL
[Property object-position value 'right 20% bottom 10%']
expected: FAIL
[Property object-position value 'right bottom']
expected: FAIL
[Property object-position value 'center 50px']
expected: FAIL
[Property object-position value 'center bottom']
expected: FAIL
[Property object-position value 'left center']
expected: FAIL
[Property object-position value 'left bottom']
expected: FAIL
[Property object-position value 'right 40%']
expected: FAIL
[Property object-position value 'center top']
expected: FAIL
[Property object-position value 'center']
expected: FAIL
[Property object-position value 'center center']
expected: FAIL
[Property object-position value 'right 20px bottom 10px']
expected: FAIL

View file

@ -1,54 +0,0 @@
[object-position-valid.html]
[e.style['object-position'\] = "10%" should set the property value]
expected: FAIL
[e.style['object-position'\] = "right 30% top 60px" should set the property value]
expected: FAIL
[e.style['object-position'\] = "-20% -30px" should set the property value]
expected: FAIL
[e.style['object-position'\] = "30px center" should set the property value]
expected: FAIL
[e.style['object-position'\] = "40px top" should set the property value]
expected: FAIL
[e.style['object-position'\] = "bottom 10% right 20%" should set the property value]
expected: FAIL
[e.style['object-position'\] = "bottom right" should set the property value]
expected: FAIL
[e.style['object-position'\] = "center 50px" should set the property value]
expected: FAIL
[e.style['object-position'\] = "center bottom" should set the property value]
expected: FAIL
[e.style['object-position'\] = "center left" should set the property value]
expected: FAIL
[e.style['object-position'\] = "left" should set the property value]
expected: FAIL
[e.style['object-position'\] = "left bottom" should set the property value]
expected: FAIL
[e.style['object-position'\] = "left center" should set the property value]
expected: FAIL
[e.style['object-position'\] = "right 40%" should set the property value]
expected: FAIL
[e.style['object-position'\] = "top" should set the property value]
expected: FAIL
[e.style['object-position'\] = "top center" should set the property value]
expected: FAIL
[e.style['object-position'\] = "center" should set the property value]
expected: FAIL
[e.style['object-position'\] = "center center" should set the property value]
expected: FAIL

View file

@ -1,2 +0,0 @@
[canvas-update-with-border-object-fit.html]
expected: FAIL

View file

@ -7,6 +7,3 @@
[Property mask does not support quirky length]
expected: FAIL
[Property object-position does not support quirky length]
expected: FAIL