<!DOCTYPE html>
<html>
<head>
<style>
* {
    background-color: white;
    color: black;
    fill-opacity: 1;
}
.background {
    background-color: rgb(1, 2, 3);
}
.border {
    border: 1px black solid;
}
.color {
    color: pink;
}
</style>
</head>
<body>
    <p>This test checks the styling of elements based on their attributes. Since HTML processes attribute as case-insensitive, any case varation should work. This test passes if every triplet looks the same in both series and if it matches the reference.</p>
    <div>
        <target>No attribute</target>
        <target class="background">lowercase initial attribute</target>
        <target class="background">LOWERCASE initial attribute</target>
        <target class="background">LowerCase initial attribute</target>

        <target class="border">UPPERCASE initial attribute</target>
        <target class="border">uppercase initial attribute</target>
        <target class="border">UpperCase initial attribute</target>

        <target class="color">CamelCase initial attribute</target>
        <target class="color">camelcase initial attribute</target>
        <target class="color">CAMELCASE initial attribute</target>

        <target class="background border color">LowerCase UpperCase CAMELCASE initial attributes</target>
        <target class="background border color">LowerCase UpperCase CAMELCASE initial attributes</target>
        <target class="background border color">LowerCase UpperCase CAMELCASE initial attributes</target>
    </div>
    <div>
        <target>No attribute</target>
        <target class="background">lowercase dynamic attribute</target>
        <target class="background">LOWERCASE dynamic attribute</target>
        <target class="background">LowerCase dynamic attribute</target>

        <target class="border">UPPERCASE dynamic attribute</target>
        <target class="border">uppercase dynamic attribute</target>
        <target class="border">UpperCase dynamic attribute</target>

        <target class="color">CamelCase dynamic attribute</target>
        <target class="color">camelcase dynamic attribute</target>
        <target class="color">CAMELCASE dynamic attribute</target>

        <target class="background border color">LowerCase UpperCase CAMELCASE dynamic attributes</target>
        <target class="background border color">LowerCase UpperCase CAMELCASE dynamic attributes</target>
        <target class="background border color">LowerCase UpperCase CAMELCASE dynamic attributes</target>
    </div>
</body>
</html>
