<!DOCTYPE html>
<style>
body {
font-size: 40px;
}
.text-clip {
background: blue;
-webkit-background-clip: text;
color: rgba(255,0,0,0.5);
}
.relative {
position: relative;
left: 10px;
}
</style>
Passes if all texts below are purple.
<br>
<!-- 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>