<!DOCTYPE html>
<html>
<head>
<style>
.square {
    display: inline-block;
    height: 128px;
    width: 128px;
    background-repeat: no-repeat;
}

#webkit-background-size-before-background-size {
    background-image: url("../resources/green-square-above-red-square.png");
    -webkit-background-size: 128px;
    background-size: 128px; /* Should override -webkit-background-size */
}

#background-size-before-webkit-background-size {
    background-image: url("../resources/red-square-above-green-square.png");
    background-position-y: -64px;
    background-size: 128px;
    -webkit-background-size: 128px; /* Should override background-size */
}
</style>
</head>
<body>
    <!-- Test that we apply background-size and -webkit-background-size in the order they are parsed. -->
    <div class="square" id="webkit-background-size-before-background-size"></div>
    <div class="square" id="background-size-before-webkit-background-size"></div>
</body>
</html>