diff options
| author | Matthew Olsson <matthewcolsson@gmail.com> | 2024-03-02 14:21:51 -0700 |
|---|---|---|
| committer | Alexander Kalenik <kalenik.aliaksandr@gmail.com> | 2024-03-03 19:50:25 +0100 |
| commit | 2dce453f11d4e11431ead30a1bc8abdbcdd5b183 (patch) | |
| tree | 32e97232be947f8015377aec0a40b43305327588 | |
| parent | ae321b2cdfbd62c8f9cce29f86503256944fe43a (diff) | |
LibWeb: Begin adding a longhand properties test
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).
| -rw-r--r-- | Tests/LibWeb/Text/expected/interpolation-longhand-properties.txt | 23 | ||||
| -rw-r--r-- | Tests/LibWeb/Text/input/interpolation-longhand-properties.html | 83 |
2 files changed, 106 insertions, 0 deletions
diff --git a/Tests/LibWeb/Text/expected/interpolation-longhand-properties.txt b/Tests/LibWeb/Text/expected/interpolation-longhand-properties.txt new file mode 100644 index 0000000000..b7926858ab --- /dev/null +++ b/Tests/LibWeb/Text/expected/interpolation-longhand-properties.txt @@ -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) diff --git a/Tests/LibWeb/Text/input/interpolation-longhand-properties.html b/Tests/LibWeb/Text/input/interpolation-longhand-properties.html new file mode 100644 index 0000000000..273ba382ca --- /dev/null +++ b/Tests/LibWeb/Text/input/interpolation-longhand-properties.html @@ -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> |