testing/web-platform/tests/css/css-backgrounds/animations/background-image-interpolation.html
author Duncan McIntosh <dmcintosh@mozilla.com>
Wed, 09 Jul 2025 19:42:02 +0000 (6 hours ago)
changeset 795924 9ccc6a2267cbf69c621fec973bd28573c2a45a1f
parent 505418 1139534a1017bb55cecdb807fb21168306a829ab
permissions -rw-r--r--
Bug 1966586 - Reuse other browser windows when opening _blank links in Taskbar Tabs windows. r=nrishel This doesn't affect other tab additions, nor does it stop the tab bar from appearing altogether. The idea is that _if_ another tab is somehow made, the user should see it; but we should not create new tabs if we can avoid it. This also adds tests for opening URIs in popups and taskbar tabs to make it less likely that this breaks in future. Differential Revision: https://phabricator.services.mozilla.com/D253726
<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image">
<meta name="test" content="background-image supports animation">

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>

<style>
.parent {
  background-image: url(../resources/blue-100.png);
  background-size: 0 0;
}
.target {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 10px solid black;
  background-repeat: no-repeat;
  background-image: url(../resources/blue-100.png);
}
.expected {
  border-color: green;
  margin-right: 2px;
}
</style>

<body>
<script>
// Neutral to image
var from = 'url(../resources/blue-100.png)';
var to = 'url(../resources/green-100.png)';
test_interpolation({
  property: 'background-image',
  from: neutralKeyframe,
  to: to,
}, [
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// initial to image
to = 'url(../resources/green-100.png)';
test_interpolation({
  property: 'background-image',
  from: 'initial',
  to: to,
}, [
  {at: -0.3, expect: 'none'},
  {at: 0, expect: 'none'},
  {at: 0.3, expect: 'none'},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// inherit to image
from = 'url(../resources/blue-100.png)';
to = 'url(../resources/green-100.png)';
test_interpolation({
  property: 'background-image',
  from: 'inherit',
  to: to,
}, [
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// unset to image
test_interpolation({
  property: 'background-image',
  from: 'unset',
  to: to,
}, [
  {at: -0.3, expect: 'none'},
  {at: 0, expect: 'none'},
  {at: 0.3, expect: 'none'},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// Image to image
from = 'url(../resources/blue-100.png)';
to = 'url(../resources/green-100.png)';
test_interpolation({
  property: 'background-image',
  from: from,
  to: to,
}, [
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// Image to gradient
from = 'url(../resources/blue-100.png)';
to = 'linear-gradient(45deg, blue, orange)';
test_interpolation({
  property: 'background-image',
  from: from,
  to: to,
}, [
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// Image to crossfade
from = 'url(../resources/blue-100.png)';
to = 'cross-fade(url(../resources/green-100.png), url(../resources/stripes-100.png), 0.5)';
test_interpolation({
  property: 'background-image',
  from: from,
  to: to,
}, [
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// Gradient to gradient
from = 'linear-gradient(-45deg, red, yellow)';
to = 'linear-gradient(45deg, blue, orange)';
test_interpolation({
  property: 'background-image',
  from: from,
  to: to,
}, [
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// Keyword to image
from = 'none';
to = 'url(../resources/green-100.png)';
test_interpolation({
  property: 'background-image',
  from: from,
  to: to,
}, [
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// Multiple to multiple
var fromA = 'url(../resources/stripes-100.png)';
var fromB = 'url(../resources/blue-100.png)';
var toA = 'url(../resources/blue-100.png)';
var toB = 'url(../resources/stripes-100.png)';
from = fromA + ', ' + fromB;
to = toA + ', ' + toB;
test_interpolation({
  property: 'background-image',
  from: from,
  to: to,
}, [
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// Single to multiple
from = 'url(../resources/blue-100.png)';
var toA = 'url(../resources/stripes-100.png)';
var toB = 'url(../resources/green-100.png)';
to = toA + ', ' + toB;
test_interpolation({
  property: 'background-image',
  from: from,
  to: to,
}, [
  // The interpolation of different numbers of background-images looks a bit strange here.
  // Animating background-image is not specified to be possible however we do it for backwards compatibility.
  // With this in mind we kept the implementation simple at the expense of this corner case because there is
  // no official specification to support.
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);

// Multiple mismatched types
from = 'url(../resources/blue-100.png), none';
to = 'url(../resources/stripes-100.png), url(../resources/green-100.png)';
test_interpolation({
  property: 'background-image',
  from: from,
  to: to,
}, [
  {at: -0.3, expect: from},
  {at: 0, expect: from},
  {at: 0.3, expect: from},
  {at: 0.6, expect: to},
  {at: 1, expect: to},
  {at: 1.5, expect: to},
]);
</script>
</body>