blob: 3974a2163aeeb6adbd0f9619659ee3a7b4700d40 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<script type="text/javascript">
function testGradient(css, queryProp)
{
var div = document.createElement('div');
div.setAttribute('style', css);
document.body.appendChild(div);
var result = getComputedStyle(div).getPropertyValue(queryProp);
document.body.removeChild(div);
return result;
}
function testSame(dir, prop, altProp, value)
{
shouldBeEqualToString('test("' + dir + '", "' + prop + ': ' + value + '", "' + altProp + '")', value);
shouldBeEqualToString('test("' + dir + '", "' + altProp + ': ' + value + '", "' + prop + '")', value);
}
debug('<p>linear-gradient</p>');
shouldBe('testGradient("background-image: linear-gradient(black 0%", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(top)", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(10deg)", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(top center, black 0%)", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(10px 20%, black 0%)", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(left left)", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(left center)", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(left 10deg, black 0%)", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(black)", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(right bottom, black, white)", "background-image")', '"none"');
shouldBe('testGradient("background-image: linear-gradient(black, white)", "background-image")', '"linear-gradient(black, white)"');
shouldBe('testGradient("background-image: linear-gradient(black 0, white)", "background-image")', '"linear-gradient(black 0px, white)"');
shouldBe('testGradient("background-image: linear-gradient(black 0%, white)", "background-image")', '"linear-gradient(black 0%, white)"');
shouldBe('testGradient("background-image: linear-gradient(black 0%, white)", "background-image")', '"linear-gradient(black 0%, white)"');
shouldBe('testGradient("background-image: linear-gradient(black, white)", "background-image")', '"linear-gradient(black, white)"');
shouldBe('testGradient("background-image: linear-gradient(black 10px, white 20px)", "background-image")', '"linear-gradient(black 10px, white 20px)"');
shouldBe('testGradient("background-image: linear-gradient(to bottom right, black 0%, white)", "background-image")', '"linear-gradient(to right bottom, black 0%, white)"');
shouldBe('testGradient("background-image: linear-gradient(black 0%, white)", "background-image")', '"linear-gradient(black 0%, white)"');
shouldBe('testGradient("background-image: linear-gradient(10deg, black 0%, white)", "background-image")', '"linear-gradient(10deg, black 0%, white)"');
debug('<p>repeating-linear-gradient</p>');
shouldBe('testGradient("background-image: repeating-linear-gradient(black, white)", "background-image")', '"repeating-linear-gradient(black, white)"');
debug('<p>radial-gradient</p>');
shouldBe('testGradient("background-image: radial-gradient(white, black)", "background-image")', '"radial-gradient(white, black)"');
shouldBe('testGradient("background-image: radial-gradient(at bottom right, white, black)", "background-image")', '"radial-gradient(at right bottom, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(ellipse farthest-corner, white, black)", "background-image")', '"radial-gradient(white, black)"');
shouldBe('testGradient("background-image: radial-gradient(circle closest-corner, white, black)", "background-image")', '"radial-gradient(circle closest-corner, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(circle, white, black)", "background-image")', '"radial-gradient(circle, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(circle closest-side, white, black)", "background-image")', '"radial-gradient(circle closest-side, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(circle closest-side at top, white, black)", "background-image")', '"radial-gradient(circle closest-side at center top, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(circle closest-side at top left, white, black)", "background-image")', '"radial-gradient(circle closest-side at left top, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(circle closest-side at 10px 20%, white, black)", "background-image")', '"radial-gradient(circle closest-side at 10px 20%, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(10px, 20%, circle closest-side, white, black)", "background-image")', '"none"');
shouldBe('testGradient("background-image: radial-gradient(circle 10px 20%, circle closest-side, white, black)", "background-image")', '"none"');
shouldBe('testGradient("background-image: radial-gradient(circle 10px, circle closest-side, white, black)", "background-image")', '"none"');
shouldBe('testGradient("background-image: radial-gradient(10px, white, black)", "background-image")', '"radial-gradient(10px, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(10px 10px, white, black)", "background-image")', '"radial-gradient(10px 10px, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(ellipse closest-corner, white, black)", "background-image")', '"radial-gradient(closest-corner, white, black)"');
shouldBe('testGradient("background-image: radial-gradient(circle closest-side, white, black)", "background-image")', '"radial-gradient(circle closest-side, white, black)"');
debug('<p>repeating-radial-gradient</p>');
shouldBe('testGradient("background-image: repeating-radial-gradient(white, black)", "background-image")', '"repeating-radial-gradient(white, black)"');
</script>
</body>
</html>