0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Begin adding a longhand properties test

Browse source 
This obviously excludes all shorthand properties. Eventually this test
should contain a property entry for all CSS value and animation types
(lengths, colors, custom animated properties, etc).
This commit is contained in:
Matthew Olsson 2024-03-02 14:21:51 -07:00 • committed by Alexander Kalenik
parent ae321b2cdf
commit 2dce453f11
Notes: sideshowbarker 2024-07-16 23:51:07 +09:00
2 changed files with 106 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
Tests/LibWeb/Text/expected/interpolation-longhand-properties.txt Normal file
View file

@ -0,0 +1,23 @@
At time 400:
accent-color: rgb(78, 88, 99)
align-content: flex-start
animation-duration: auto
aspect-ratio: 1.54415 / 1
background-color: rgb(78, 88, 99)
background-repeat: repeat no-repeat
bottom: auto
box-shadow: rgb(163, 82, 142) 40px 80px 126px 0px inset, rgba(0, 0, 72, 0.4) 20px 4px 8px 12px
color: rgb(163, 82, 142)
transform: matrix(1, 0, 0, 1, 40, 40)
At time 750:
accent-color: rgb(147, 157, 168)
align-content: space-between
animation-duration: auto
aspect-ratio: 1.36506 / 1
background-color: rgb(147, 157, 168)
background-repeat: space space
bottom: 100%
box-shadow: rgb(81, 71, 210) 75px 150px 227.5px 0px, rgba(0, 0, 174, 0.749) 37.5px 7.5px 15px 22.5px
color: rgb(81, 71, 210)
transform: matrix(1, 0, 0, 1, 75, 75)

83
Tests/LibWeb/Text/input/interpolation-longhand-properties.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<div id="foo"></div>
<script src="./include.js"></script>
<script>
test(() => {
// FIXME: Test the following properties or types when we support them:
// - repeatable-list types
// - Length types with mixed percentage/unit (e.g. 10% -> 200px)
// - color types with alpha
// - color types with different color spaces
// - backdrop-filter
const properties = {
accentColor: {
from: "rgb(10 20 30)",
to: "rgb(200 210 220)",
},
alignContent: {
from: "flex-start",
to: "space-between",
},
animationDuration: {
from: "1s",
to: "2s",
},
aspectRatio: {
from: "16 / 9",
to: "5 / 4",
},
backgroundColor: {
from: "rgb(10 20 30)",
to: "rgb(200 210 220)",
},
backgroundRepeat: {
from: "repeat-x",
to: "space",
},
// by-computed-value properties with 'auto' are discrete
bottom: {
from: "auto",
to: "100%",
},
boxShadow: {
from: "red 0px 0px 10px inset",
to: "blue 100px 200px 300px, blue 50px 10px 20px 30px",
},
color: {
from: "red",
to: "blue",
},
transform: {
from: "translate(0px, 0px)",
to: "translate(100px, 100px)",
},
};
const keyframe1 = {};
const keyframe2 = {};
for (const [property, value] of Object.entries(properties)) {
keyframe1[property] = value.from;
keyframe2[property] = value.to;
}
const foo = document.getElementById("foo");
const animation = foo.animate(
[keyframe1, keyframe2],
{ duration: 1000, iterations: 1 },
);
for (let testNum = 0; testNum < 2; testNum++) {
const time = testNum === 0 ? 400 : 750;
animation.currentTime = time;
const style = getComputedStyle(foo);
println(`At time ${time}:`)
for (let property of Object.keys(properties)) {
property = property.replace(/([A-Z])/, "-$1").toLowerCase();
println(` ${property}: ${style.getPropertyValue(property)}`);
}
println("");
}
})
</script>