reference.css (859B)
1 @font-face { 2 font-family: 'ahem'; 3 src: url('/fonts/Ahem.ttf'); 4 } 5 6 .test-diff { 7 container-type: inline-size; 8 width: 200px; 9 height: 200px; 10 display: inline-block; 11 isolation: isolate; 12 position: relative; 13 border: 1px solid black; 14 } 15 16 video-reference, cue { display: inline-block; } 17 cue-background { display: inline; } 18 19 video, video-reference { 20 position: absolute; 21 top: 0; 22 left: 0; 23 width: 100%; 24 height: 100%; 25 mix-blend-mode: difference; 26 } 27 28 ::cue, cue { 29 font: 5cqmin/1 Ahem; 30 } 31 32 ::cue, cue-background { 33 color: rgb(128, 0, 0); 34 background-color: rgb(255, 0, 0); 35 } 36 37 cue { 38 position: absolute; 39 display: inline-block; 40 text-align: center; 41 white-space: pre-line; 42 } 43 44 video-reference[expected] > cue > cue-background { 45 color: rgb(128, 128, 0); 46 background-color: rgb(255, 255, 0); 47 }