| <!DOCTYPE html> |
| <title>background-clip:text on inline elements</title> |
| <link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text"> |
| <link rel="match" href="clip-text-inline-ref.html"> |
| <style> |
| body { |
| font-size: 40px; |
| } |
| .text-clip { |
| background: blue; |
| background-clip: text; |
| color: rgba(255,0,0,0.5); |
| } |
| </style> |
| <!-- Passes if all texts below are purple. --> |
| <!-- The s are to avoid glyph overflows. --> |
| <span class="text-clip"> Text1 </span><span class="text-clip"> Text2 </span> |
| <br> |
| <span class="text-clip"> Text3 </span><span class="text-clip"> Text4 </span> |
| |
