| <!DOCTYPE html> |
| <!-- |
| This is a test reference file. |
| |
| This test verifies that -webkit-background-clip: text applies correctly in regions. |
| |
| This test passes if there are two regions, with the following appearance: |
| Each region has black border. |
| Each region contains two square characters, separated by a space. |
| The first region's square characters are green because they clip the region's green background. |
| The second region's square characters are blue because they clip the region's blue background. |
| --> |
| <html> |
| <head> |
| <style> |
| .region { |
| -webkit-background-clip: text; |
| |
| width: 400px; |
| height: 100px; |
| border: 1px solid black; |
| |
| font-family: Ahem; |
| font-size: 100px; |
| color: transparent; |
| } |
| #region-1 { |
| background-color: green; |
| } |
| #region-2 { |
| background-color: blue; |
| margin-top: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="region-1" class="region">x x</div> |
| <div id="region-2" class="region">x x</div> |
| </body> |
| </html> |
