blob: 4a1d54aaa9d16513971aa4da721080278dd6efea [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
margin: 5px;
border: 1px solid black;
float: left;
}
br { clear: both; }
</style>
<script>
const UNPREFIXED_STYLE = "linear-gradient(to bottom, orange, blue)";
const PREFIXED_STYLE = "-webkit-linear-gradient( bottom, orange, blue)";
if (window.testRunner)
testRunner.waitUntilDone();
function doTest()
{
initStyles();
setTimeout(tweakStyles, 0);
}
function initStyles()
{
u.style.backgroundImage = UNPREFIXED_STYLE;
u2p.style.backgroundImage = UNPREFIXED_STYLE;
p.style.backgroundImage = PREFIXED_STYLE;
p2u.style.backgroundImage = PREFIXED_STYLE;
}
function tweakStyles()
{
u2p.style.backgroundImage = PREFIXED_STYLE;
p2u.style.backgroundImage = UNPREFIXED_STYLE;
if (window.testRunner)
testRunner.notifyDone();
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
Orange at top:<br>
<div id="u"></div>
<div id="p2u"></div>
<br>Blue at top:<br>
<div id="p"></div>
<div id="u2p"></div>
</body>
</html>