Google Git
Sign in
chromium/external/github.com/WebKit/webkit/8a2c8a97dfd3af0fdb68d49fc58e1163aca8085a/./LayoutTests/fast/css/getComputedStyle/computed-style-cross-fade.html
blob: 388dbe555ce926b7fe347826098e154e87288870 [file]
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<style>
#container {
container-type: inline-size;
width: 100px;
}
</style>
<div id=container></div>
<script type="text/javascript">
const container = document.getElementById("container");
function testCrossfade(css, queryProp)
{
var div = document.createElement('div');
div.setAttribute('style', css);
container.appendChild(div);
var result = getComputedStyle(div).getPropertyValue(queryProp);
container.removeChild(div);
return result;
}
debug('<h2>cross-fade</h2>');
// Valid
shouldBe('testCrossfade("opacity: 500%", "opacity")', '"1"');
debug('Prefixed');
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(-webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image")', "-webkit-cross-fade(-webkit-cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), url(\"dummy://example.png\"), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://c.png), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
"-webkit-cross-fade(url(\"dummy://c.png\"), -webkit-cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(-webkit-linear-gradient(black, white), url(dummy://example.png), 10%)", "background-image")', "-webkit-cross-fade(-webkit-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255)), url(\"dummy://example.png\"), 0.1)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1.0)", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 1)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 5.0)", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 1)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 700%)", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 1)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), -20)", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), calc(50%))", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), calc(-50%))", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), calc(150%))", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 1)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), calc(0.5))", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), calc(-0.5))", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), calc(1.5))", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 1)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), calc(100% + (50% * sign(2cqw - 10px))))", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), calc(1 + (0.5 * sign(2cqw - 10px))))", "background-image")', "-webkit-cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)");
debug('<h2>Unprefixed</h2>');
shouldBeEqualToString('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "background-image")', "cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png), 1.0)", "background-image")', "cross-fade(url(\"dummy://example.png\"), url(\"dummy://example.png\"), 1)");
debug('<h2>Mixed</h2>');
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image")',
"-webkit-cross-fade(cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), url(\"dummy://example.png\"), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: -webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
"-webkit-cross-fade(cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), 0.5)");
shouldBeEqualToString('testCrossfade("background-image: cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
"cross-fade(cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), -webkit-cross-fade(url(\"dummy://a.png\"), url(\"dummy://b.png\"), 0.25), 0.5)");
debug('<h2>Invalid values</h2>');
shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png))", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png),)", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png))", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png),)", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png))", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(), url(dummy://example.png))", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(url(", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(10px 20% 5px #bbb)", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(cross-fade(cross-fade()))", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(20%, url(dummy://a.png), url(dummy://b.png))", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(url(dummy://a.png),)", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(,)", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(,url(dummy://a.png))", "background-image")', '"none"');
shouldBe('testCrossfade("background-image: cross-fade(,,,,,)", "background-image")', '"none"');
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>