mirror of
https://github.com/servo/servo.git
synced 2025-10-17 08:49:21 +01:00
97 lines
3.9 KiB
Text
97 lines
3.9 KiB
Text
<csstest def="Contextual ::selection" module="W3C Selectors" modulename="css3-modsel" number="162" rev="1.1" date="29-may-2004" xmlns="http://www.example.org/css3tests">
|
|
|
|
<author>Ian Hickson</author>
|
|
|
|
<userinteraction/>
|
|
|
|
<cssrules>
|
|
|
|
<!--
|
|
foo::selection matches the part of <foo> that has the selection.
|
|
*::selection matches the parts of every element that have the selection.
|
|
|
|
The following properties definitely apply to ::selection:
|
|
color
|
|
background-color
|
|
outline
|
|
cursor
|
|
?
|
|
|
|
This is quite a thorough test IMHO. :-)
|
|
-->
|
|
|
|
td > div { border: solid thick black; padding: 1em; line-height: 2; }
|
|
td > div > span { padding: 0.25em; }
|
|
|
|
/* test version */
|
|
.test > * { background: aqua; }
|
|
.test > div > ::selection { outline: solid thick green; }
|
|
.test > div > :nth-child(even)::selection { outline: solid thick yellow; }
|
|
.test > div > :empty::selection { outline: solid thick blue; background: red; }
|
|
.test > div *::selection { background: transparent; } /* applies to spans 4 to 6 and the strong */
|
|
.test span:first-child::selection { background: white; } /* selects "Cascadable" */
|
|
.test span[id=b]::selection { background: silver; } /* selects "Advanced" */
|
|
.test #b + * + * { background: green; color: white; } /* affects "Selectors"'s span, whose selection inherits the background-color (next rule) */
|
|
.test span[id=b] ~ ::selection { background: inherit; color: inherit; } /* selects "Tree", "Selectors" and "for CSS" but is overriden for "Tree" and "for CSS" */
|
|
.test span[id=b] + ::selection { background: yellow; cursor: crosshair; } /* selects "Tree" */
|
|
.test :not(#b):last-child::selection { background: transparent; } /* selects "for CSS" and "CSS" */
|
|
.test ::selection { color: black; } /* applies to all spans and the strong */
|
|
.test::selection { background: red ! important; } /* applies to the text in the cell and the div... so nothing. */
|
|
.test::selection { color: red ! important; background: aqua; } /* should end up doing nothing - no text at that level and background is aqua is already the background */
|
|
.test strong { color: red ! important; } /* should also end up doing nothing */
|
|
|
|
/* control version */
|
|
.control ::selection { background: transparent; color: inherit; cursor: inherit; outline: none; }
|
|
.control > div { background: aqua; color: black; }
|
|
.control > div > span { padding: 0; margin: 0.25em; }
|
|
.control > div > span.a { background: white; }
|
|
.control > div > span.b { background: silver; }
|
|
.control > div > span.c { background: yellow; cursor: crosshair; }
|
|
.control > div > span.d { background: green; color: white; padding: 0.25em; margin: 0; }
|
|
.control > div > span.green { outline: solid thick green; }
|
|
.control > div > span.yellow { outline: solid thick yellow; }
|
|
.control > div > span.blue { outline: solid thick blue; background: red; }
|
|
|
|
</cssrules>
|
|
|
|
<code>
|
|
<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<p>Select everything in this document. The following two constructs
|
|
(in the thick black borders) should end up looking identical. You
|
|
should also check that the cursor is the same on equivalent parts
|
|
(in particular the cursor should either be a crosshair over "Tree"
|
|
and the default everywhere else, or the default everywhere).</p>
|
|
|
|
<table>
|
|
<tr>
|
|
<td class="test">
|
|
|
|
<div>
|
|
<span>Cascadable</span>
|
|
<span id="b">Advanced</span>
|
|
<span>Tree</span>
|
|
<span>Selectors</span>
|
|
<span><!-- empty --></span>
|
|
<span>for <strong>CSS</strong></span>
|
|
</div>
|
|
|
|
</td>
|
|
<td class="control">
|
|
|
|
<div>
|
|
<span class="a green">Cascadable</span>
|
|
<span class="b yellow">Advanced</span>
|
|
<span class="c green">Tree</span>
|
|
<span class="d yellow">Selectors</span>
|
|
<span class="e blue"/>
|
|
<span class="f yellow">for <strong>CSS</strong></span>
|
|
</div>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</code>
|
|
|
|
</csstest>
|