| <!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> |
