Tests: Import/create tests related to transition property handling

Done in a distinct commit to see progress over following commits
This commit is contained in:
Callum Law 2025-09-11 15:47:41 +12:00 committed by Tim Ledbetter
commit af431d800b
Notes: github-actions[bot] 2025-09-11 05:09:22 +00:00
10 changed files with 247 additions and 0 deletions

View file

@ -0,0 +1 @@
0

View file

@ -0,0 +1,30 @@
Harness status: OK
Found 24 tests
19 Pass
5 Fail
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (0) should be [10px]
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions: property <margin-block> from [10px] to [20px] at (1) should be [20px]
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (1) should be [20px]
Pass CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Animations: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Animations: property <margin-block> from [10px] to [20px] at (0) should be [10px]
Pass CSS Animations: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Animations: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Animations: property <margin-block> from [10px] to [20px] at (1) should be [20px]
Pass CSS Animations: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]
Pass Web Animations: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass Web Animations: property <margin-block> from [10px] to [20px] at (0) should be [10px]
Pass Web Animations: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
Pass Web Animations: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
Pass Web Animations: property <margin-block> from [10px] to [20px] at (1) should be [20px]
Pass Web Animations: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]

View file

@ -0,0 +1,30 @@
Harness status: OK
Found 24 tests
19 Pass
5 Fail
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions: property <margin-inline> from [10px] to [20px] at (1) should be [20px]
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (1) should be [20px]
Pass CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Animations: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Animations: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
Pass CSS Animations: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Animations: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Animations: property <margin-inline> from [10px] to [20px] at (1) should be [20px]
Pass CSS Animations: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass Web Animations: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass Web Animations: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
Pass Web Animations: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
Pass Web Animations: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass Web Animations: property <margin-inline> from [10px] to [20px] at (1) should be [20px]
Pass Web Animations: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]

View file

@ -0,0 +1,30 @@
Harness status: OK
Found 24 tests
19 Pass
5 Fail
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (0) should be [10px]
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions: property <padding-block> from [10px] to [20px] at (1) should be [20px]
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (1) should be [20px]
Pass CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Animations: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Animations: property <padding-block> from [10px] to [20px] at (0) should be [10px]
Pass CSS Animations: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Animations: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Animations: property <padding-block> from [10px] to [20px] at (1) should be [20px]
Pass CSS Animations: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]
Pass Web Animations: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass Web Animations: property <padding-block> from [10px] to [20px] at (0) should be [10px]
Pass Web Animations: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
Pass Web Animations: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
Pass Web Animations: property <padding-block> from [10px] to [20px] at (1) should be [20px]
Pass Web Animations: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]

View file

@ -0,0 +1,30 @@
Harness status: OK
Found 24 tests
19 Pass
5 Fail
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions: property <padding-inline> from [10px] to [20px] at (1) should be [20px]
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (1) should be [20px]
Pass CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Animations: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Animations: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
Pass CSS Animations: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Animations: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Animations: property <padding-inline> from [10px] to [20px] at (1) should be [20px]
Pass CSS Animations: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass Web Animations: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass Web Animations: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
Pass Web Animations: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
Pass Web Animations: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass Web Animations: property <padding-inline> from [10px] to [20px] at (1) should be [20px]
Pass Web Animations: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<style>
#foo {
transition: border 1s linear;
border-top: 1px solid red;
}
</style>
<div id="foo"></div>
<script src="../include.js"></script>
<script>
test(() => {
// FIXME: We call getComputedStyle to ensure that style is computed before we update the style attribute
// below to ensure that transitions are triggered.
getComputedStyle(foo).border;
foo.style = "border-top-width: 5px";
println(document.getAnimations().length);
});
</script>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>margin-block interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block">
<meta name="assert" content="margin-block supports animation">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_interpolation({
property: 'margin-block',
from: '10px',
to: '20px',
}, [
{at: -0.3, expect: '7px'},
{at: 0, expect: '10px'},
{at: 0.3, expect: '13px'},
{at: 0.6, expect: '16px'},
{at: 1, expect: '20px'},
{at: 1.5, expect: '25px'},
]);
</script>
</body>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>margin-inline interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-inline">
<meta name="assert" content="margin-inline supports animation">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_interpolation({
property: 'margin-inline',
from: '10px',
to: '20px',
}, [
{at: -0.3, expect: '7px'},
{at: 0, expect: '10px'},
{at: 0.3, expect: '13px'},
{at: 0.6, expect: '16px'},
{at: 1, expect: '20px'},
{at: 1.5, expect: '25px'},
]);
</script>
</body>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>padding-block interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block">
<meta name="assert" content="padding-block supports animation">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_interpolation({
property: 'padding-block',
from: '10px',
to: '20px',
}, [
{at: -0.3, expect: '7px'},
{at: 0, expect: '10px'},
{at: 0.3, expect: '13px'},
{at: 0.6, expect: '16px'},
{at: 1, expect: '20px'},
{at: 1.5, expect: '25px'},
]);
</script>
</body>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>padding-inline interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-inline">
<meta name="assert" content="padding-inline supports animation">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_interpolation({
property: 'padding-inline',
from: '10px',
to: '20px',
}, [
{at: -0.3, expect: '7px'},
{at: 0, expect: '10px'},
{at: 0.3, expect: '13px'},
{at: 0.6, expect: '16px'},
{at: 1, expect: '20px'},
{at: 1.5, expect: '25px'},
]);
</script>
</body>