Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 7 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-images/cross-fade-computed-value.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>cross-fade() computed value</title>
<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
#target {
color: red;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
// “For cross-fade(), always serialize the <percentage>.”, but it's not clear what
// “the” percentage is, since the implicit percentages are different for drawing and
// sizing, and may not be known computed-value time, so we assume one that is not
// given should also not be serialized.
test_computed_value(
'background-image',
'cross-fade(30% color-mix(in srgb, currentcolor, blue), white)',
'cross-fade(color(srgb 0.5 0 0.5) 30%, rgb(255, 255, 255))');
// Unneccessary percentages should be kept.
test_computed_value('background-image', 'cross-fade(50% red, 50% green)',
'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%)');
// Percentage normalization should not be visible computed-value time.
test_computed_value('background-image', 'cross-fade(20% red, 20% green)',
'cross-fade(rgb(255, 0, 0) 20%, rgb(0, 128, 0) 20%)');
// More than two values.
test_computed_value('background-image',
'cross-fade(50% red, 50% green, 50% blue)',
'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%, rgb(0, 0, 255) 50%)');
// More-than-100% should be invalid, but in calc() we can't reject it parse-time;
// it will be clamped on serialization.
test_computed_value('background-image',
'cross-fade(calc(101%) red, green)',
'cross-fade(rgb(255, 0, 0) 100%, rgb(0, 128, 0))');
test_computed_value('background-image',
'cross-fade(calc(-200%) red, green)',
'cross-fade(rgb(255, 0, 0) 0%, rgb(0, 128, 0))');
// The percentage here is not resolvable parse-time, but should always be 49%
// for all reasonable font sizes.
test_computed_value('background-image',
'cross-fade(calc(50% + 1% * sign(1em - 10000px)) red, green)',
'cross-fade(rgb(255, 0, 0) 49%, rgb(0, 128, 0))');
</script>
</body>
</html>