<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: "Ahem";
    src: url("../../../resources/Ahem.ttf");
}

body {
    background-color: white;
    font-family: "Ahem";
    font-size: 20px; /* For some reason this needs to be multiple of 10 for the test to pass (why?). */
}

.square {
    display: inline-block;
    height: 128px;
    width: 128px;
    background-repeat: no-repeat;
    color: transparent;
}

#webkit-background-clip-before-background-clip {
    background-image: url("../resources/green-128x128.png");
    -webkit-background-clip: text, border;
    background-clip: border-box; /* Should override -webkit-background-clip */
}

#background-clip-before-webkit-background-clip {
    background-color: #00FF00;
    background-clip: border-box;
    -webkit-background-clip: text, border; /* Should override background-clip */
}
</style>
</head>
<body>
    <!-- Tests that we apply background-clip and -webkit-background-clip in the order they are parsed. -->
    <div class="square" id="webkit-background-clip-before-background-clip"></div>
    <div class="square" id="background-clip-before-webkit-background-clip">X</div>
</body>
</html>