Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 276 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-gaps/animation/rule-color-interpolation-repeaters-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rule-color interpolation with repeaters</title>
<link rel="author" title="Javier Contreras" href="mailto:javiercon@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
row-rule-style: solid;
row-rule-color: white;
}
.target {
row-gap: 40px;
column-gap: 40px;
row-rule-width: 10px;
row-rule-style: solid;
row-rule-color: black, repeat(2, red, blue), black;
flex-wrap: wrap;
column-rule-width: 10px;
column-rule-style: solid;
column-rule-color: repeat(2, black, red);
}
</style>
</head>
<body>
<script>
// Valid Interpolations:
// Repeaters should expand.
test_interpolation({
property: 'row-rule-color',
from: neutralKeyframe,
to: 'red, repeat(2, black, black), blue',
}, [
{ at: -0.3, expect: 'black, red, blue, red, blue, black' },
{ at: 0, expect: 'black, red, blue, red, blue, black' },
{ at: 0.3, expect: 'rgb(77, 0, 0), rgb(179, 0, 0), rgb(0, 0, 179), rgb(179, 0, 0), rgb(0, 0, 179), rgb(0, 0, 77)' },
{ at: 0.6, expect: 'rgb(153, 0, 0), rgb(102, 0, 0), rgb(0, 0, 102), rgb(102, 0, 0), rgb(0, 0, 102), rgb(0, 0, 153)' },
{ at: 1, expect: 'rgb(255, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 255)' },
{ at: 1.5, expect: 'rgb(255, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 255)' },
]);
test_interpolation({
property: 'column-rule-color',
from: neutralKeyframe,
to: 'repeat(2, red, black)',
}, [
{ at: -0.3, expect: 'black, red, black, red' },
{ at: 0, expect: 'black, red, black, red' },
{ at: 0.3, expect: 'rgb(77, 0, 0), rgb(179, 0, 0), rgb(77, 0, 0), rgb(179, 0, 0)' },
{ at: 0.6, expect: 'rgb(153, 0, 0), rgb(102, 0, 0), rgb(153, 0, 0), rgb(102, 0, 0)' },
{ at: 1, expect: 'red, black, red, black' },
{ at: 1.5, expect: 'red, black, red, black' },
]);
// Auto repeaters don't expand.
test_interpolation({
property: 'column-rule-color',
from: 'repeat(auto, black, black)',
to: 'repeat(auto, blue, red)',
}, [
{ at: -0.3, expect: 'repeat(auto, black, black)' },
{ at: 0, expect: 'repeat(auto, black, black)' },
{ at: 0.3, expect: 'repeat(auto, rgb(0, 0, 77), rgb(77, 0, 0))' },
{ at: 0.6, expect: 'repeat(auto, rgb(0, 0, 153), rgb(153, 0, 0))' },
{ at: 1, expect: 'repeat(auto, rgb(0, 0, 255), rgb(255, 0, 0))' },
{ at: 1.5, expect: 'repeat(auto, rgb(0, 0, 255), rgb(255, 0, 0)' },
]);
// Auto repeaters should interpolate, we apply
// lowest common multiple interpolation to the inner values
// of auto repeaters.
test_interpolation({
property: 'column-rule-color',
from: 'repeat(auto, red)',
to: 'repeat(auto, blue, blue)',
}, [
{ at: -0.3, expect: 'repeat(auto, rgb(255, 0, 0), rgb(255, 0, 0))' },
{ at: 0, expect: 'repeat(auto, rgb(255, 0, 0), rgb(255, 0, 0))' },
{ at: 0.3, expect: 'repeat(auto, rgb(179, 0, 77), rgb(179, 0, 77))' },
{ at: 0.6, expect: 'repeat(auto, rgb(102, 0, 153), rgb(102, 0, 153))' },
{ at: 1, expect: 'repeat(auto, rgb(0, 0, 255), rgb(0, 0, 255))' },
{ at: 1.5, expect: 'repeat(auto, rgb(0, 0, 255), rgb(0, 0, 255))' },
]);
// Repeaters should expand.
test_interpolation({
property: 'column-rule-color',
from: 'repeat(1, red)',
to: 'repeat(2, blue, blue)',
}, [
{ at: -0.3, expect: 'rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0)' },
{ at: 0, expect: 'rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0)' },
{ at: 0.3, expect: 'rgb(179, 0, 77), rgb(179, 0, 77), rgb(179, 0, 77), rgb(179, 0, 77)' },
{ at: 0.6, expect: 'rgb(102, 0, 153), rgb(102, 0, 153), rgb(102, 0, 153), rgb(102, 0, 153)' },
{ at: 1, expect: 'rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255)' },
{ at: 1.5, expect: 'rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255)' },
]);
// Repeaters should expand and interpolate with non repeaters.
test_interpolation({
property: 'column-rule-color',
from: 'repeat(2, red)',
to: 'blue, blue',
}, [
{ at: -0.3, expect: 'rgb(255, 0, 0), rgb(255, 0, 0)' },
{ at: 0, expect: 'rgb(255, 0, 0), rgb(255, 0, 0)' },
{ at: 0.3, expect: 'rgb(179, 0, 77), rgb(179, 0, 77)' },
{ at: 0.6, expect: 'rgb(102, 0, 153), rgb(102, 0, 153)' },
{ at: 1, expect: 'rgb(0, 0, 255), rgb(0, 0, 255)' },
{ at: 1.5, expect: 'rgb(0, 0, 255), rgb(0, 0, 255)' },
]);
// Repeaters should expand and interpolate with non repeaters.
test_interpolation({
property: 'column-rule-color',
from: 'repeat(2, red)',
to: 'blue',
}, [
{ at: -0.3, expect: 'rgb(255, 0, 0), rgb(255, 0, 0)' },
{ at: 0, expect: 'rgb(255, 0, 0), rgb(255, 0, 0)' },
{ at: 0.3, expect: 'rgb(179, 0, 77), rgb(179, 0, 77)' },
{ at: 0.6, expect: 'rgb(102, 0, 153), rgb(102, 0, 153)' },
{ at: 1, expect: 'rgb(0, 0, 255), rgb(0, 0, 255)' },
{ at: 1.5, expect: 'rgb(0, 0, 255), rgb(0, 0, 255)' },
]);
// When auto repeaters are present, we only interpolate if the length
// of the `leading` segments match, and the length of the `trailing`
// segments match.
test_interpolation({
property: 'column-rule-color',
from: 'repeat(2, red), repeat(auto, red), red',
to: 'blue, blue, repeat(auto, blue), blue',
}, [
{ at: -0.3, expect: 'rgb(255, 0, 0), rgb(255, 0, 0), repeat(auto, rgb(255, 0, 0)), rgb(255, 0, 0)' },
{ at: 0, expect: 'rgb(255, 0, 0), rgb(255, 0, 0), repeat(auto, rgb(255, 0, 0)), rgb(255, 0, 0)' },
{ at: 0.3, expect: 'rgb(179, 0, 77), rgb(179, 0, 77), repeat(auto, rgb(179, 0, 77)), rgb(179, 0, 77)' },
{ at: 0.6, expect: 'rgb(102, 0, 153), rgb(102, 0, 153), repeat(auto, rgb(102, 0, 153)), rgb(102, 0, 153)' },
{ at: 1, expect: 'rgb(0, 0, 255), rgb(0, 0, 255), repeat(auto, rgb(0, 0, 255)), rgb(0, 0, 255)' },
{ at: 1.5, expect: 'rgb(0, 0, 255), rgb(0, 0, 255), repeat(auto, rgb(0, 0, 255)), rgb(0, 0, 255)' },
]);
// Invalid interpolations:
// Shouldn't interpolate, different leading lengths with present auto repeater:
test_no_interpolation({
property: 'column-rule-color',
from: 'red, repeat(auto, red)',
to: 'blue, blue, repeat(auto, blue)',
});
// Shouldn't interpolate, different trailing lengths with present auto repeater:
test_no_interpolation({
property: 'column-rule-color',
from: 'red, repeat(auto, red)',
to: 'blue, repeat(auto, blue), blue',
});
</script>
</body>