| <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> |