highlights.css (1501B)
1 /** 2 * Container for the interesting part of a highlight reftest, to be 3 * used on both the test page and any reference pages. 4 */ 5 .highlight_reftest { 6 /* 7 https://drafts.csswg.org/css-pseudo-4/#highlight-bounds 8 For text, the corresponding overlay must cover at least 9 the entire em box and may extend further above/below the 10 em box to the line box edges. 11 */ 12 line-height: 1; 13 } 14 15 /** 16 * Container for layers. All text is transparent by default, and each direct 17 * child creates a layer that overlaps any text content. 18 */ 19 .hrt_layers, 20 .hrt_layers * { 21 color: transparent; 22 } 23 .hrt_layers { 24 position: relative; 25 } 26 .hrt_layers > * { 27 position: absolute; 28 } 29 30 /** 31 * Cover to clip text from the right. Usage: 32 * 33 * <div class="hrt_layers"> 34 * <div><!-- content to clip to “foo” from right --></div> 35 * <div><span class="hrt_cover">bar</span>foobar</div> 36 * foobar 37 * </div> 38 */ 39 .hrt_cover { 40 background: white; 41 position: absolute; 42 padding: 0.5em 0; 43 top: -0.5em; 44 right: 0; 45 } 46 47 /** 48 * Hider to clip text from the left. Usage: 49 * 50 * <div class="hrt_layers"> 51 * <div>foo<span class="hrt_hider"> 52 * <div><!-- content to clip to “bar” from left --></div> 53 * bar 54 * </span></div> 55 * foobar 56 * </div> 57 */ 58 .hrt_hider { 59 display: inline-block; 60 overflow: hidden; 61 position: relative; 62 padding: 0.5em 0; 63 top: -0.5em; 64 } 65 .hrt_hider > * { 66 position: absolute; 67 right: 0; 68 }