mirror of
https://github.com/servo/servo
synced 2026-05-11 17:37:21 +02:00
69 lines
1.5 KiB
CSS
69 lines
1.5 KiB
CSS
/**
|
|
* Container for the interesting part of a highlight reftest, to be
|
|
* used on both the test page and any reference pages.
|
|
*/
|
|
.highlight_reftest {
|
|
/*
|
|
https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
|
|
For text, the corresponding overlay must cover at least
|
|
the entire em box and may extend further above/below the
|
|
em box to the line box edges.
|
|
*/
|
|
line-height: 1;
|
|
}
|
|
|
|
/**
|
|
* Container for layers. All text is transparent by default, and each direct
|
|
* child creates a layer that overlaps any text content.
|
|
*/
|
|
.hrt_layers,
|
|
.hrt_layers * {
|
|
color: transparent;
|
|
}
|
|
.hrt_layers {
|
|
position: relative;
|
|
}
|
|
.hrt_layers > * {
|
|
position: absolute;
|
|
}
|
|
|
|
/**
|
|
* Cover to clip text from the right. Usage:
|
|
*
|
|
* <div class="hrt_layers">
|
|
* <div><!-- content to clip to “foo” from right --></div>
|
|
* <div><span class="hrt_cover">bar</span>foobar</div>
|
|
* foobar
|
|
* </div>
|
|
*/
|
|
.hrt_cover {
|
|
background: white;
|
|
position: absolute;
|
|
padding: 0.5em 0;
|
|
top: -0.5em;
|
|
right: 0;
|
|
}
|
|
|
|
/**
|
|
* Hider to clip text from the left. Usage:
|
|
*
|
|
* <div class="hrt_layers">
|
|
* <div>foo<span class="hrt_hider">
|
|
* <div><!-- content to clip to “bar” from left --></div>
|
|
* bar
|
|
* </span></div>
|
|
* foobar
|
|
* </div>
|
|
*/
|
|
.hrt_hider {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 0.5em 0;
|
|
top: -0.5em;
|
|
}
|
|
.hrt_hider > * {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|