|
+
3.1 Selecting Highlighted Content: the ::selection, ::target-text, ::spelling-error, and ::grammar-error pseudo-elements |
|---|
|
active-selection-001-manual |
|
Interact |
active selection and color (basic)
|
|
active-selection-002-manual |
|
Interact |
active selection and background-color (basic)
|
|
active-selection-004-manual |
|
InteractRecommend |
active selection and text-decoration (basic)
|
|
active-selection-011 |
= |
|
active selection and color (basic)
|
|
active-selection-012 |
= |
|
active selection and background-color (basic)
|
|
active-selection-014 |
= |
Recommend |
active selection and text-decoration
- This test checks that 'text-decoration' applies to highlight pseudo-element. Since neither 'color' nor 'background-color' has been specified by the pseudo-element selector in this test, then OS-default highlight colors should be used. The consequence of this is that the highlight color determines also the color of the underline.
|
|
active-selection-016 |
= |
|
active selection of partial text and color
|
|
active-selection-018 |
= |
|
active selection, color and background-color
|
|
active-selection-025 |
= |
|
active selection and first-letter pseudo-element
- In this test, the div::selection selector has no 'color' declaration. The div::selection selector should use the 'color' declaration from the div rule and, for the first letter only, it should use the 'color' declaration from the ::first-letter pseudo-element. Therefore the first letter 'S' should be purple and the rest of the words should be green.
|
|
active-selection-027 |
= |
|
active selection and first-line pseudo-element
- In this test, the div::selection selector has no 'color' declaration. The div::selection selector should use the 'color' declaration from the div rule and, for the first line only, it should use the 'color' declaration from the ::first-line pseudo-element. Therefore the '1st selected text' should be purple and the '2nd selected text' should be green.
|
|
active-selection-056 |
= |
|
active selection and 3 consecutive <br> elements
- The <br> element is an empty element. Its background color can be painted but specifying its color should generate no rendering effect of any kind. Since the 'background-color' has been specified as 'transparent', then nothing should be painted or viewable in this test.
|
|
active-selection-057 |
= |
|
active selection and 3 empty elements
- The <div id="subtest1"> element and the <hr> element in this test are empty elements. Their background color can be painted but specifying their 'color' should generate no rendering effect of any kind. Since the 'background-color' has not been specified in the ::selection pseudo-element, then it defaults to 'transparent'. The <div id="subtest3"> element is also an empty element since the 2 
 character references are line break control characters. Their background color can not be painted. Therefore, in this test, nothing should be painted or viewable. The fact that lines break at preserved newline characters thanks to 'white-space: pre' does not change that.
|
|
active-selection-063 |
= |
|
active selection and consecutive preserved 	
- In this test, tab characters are preserved and converted into 4 consecutive blank spaces. The background of such blank spaces can be painted. The lines are broken after each tab character since 'white-space: pre' preserves line breaks.
|
|
grammar-error-001 |
= |
|
highlighting of grammar error (basic)
|
|
grammar-error-002-manual |
|
|
highlighting of grammar error
|
|
grammar-error-003-manual |
|
|
highlighting of grammar error
|
|
selection-contenteditable-011 |
= |
|
active selection and contenteditable element
|
|
selection-input-011 |
= |
|
active selection and input type="text" element
|
|
selection-textarea-011 |
= |
|
active selection and textarea element
|
|
spelling-error-001 |
= |
|
highlighting of spelling error (basic)
|
|
spelling-error-002-manual |
|
|
highlighting of spelling error
|
|
spelling-error-003-manual |
|
|
highlighting of spelling error
|
|
textpath-selection-011 |
= |
SVG |
active selection of text following a path (complex)
- This test checks that an SVG application with a text following a text path can be selected and then be styled.
|
|
+
3.2 Styling Highlights |
|---|
|
active-selection-001-manual |
|
Interact |
active selection and color (basic)
|
|
active-selection-002-manual |
|
Interact |
active selection and background-color (basic)
|
|
active-selection-004-manual |
|
InteractRecommend |
active selection and text-decoration (basic)
|
|
active-selection-011 |
= |
|
active selection and color (basic)
|
|
active-selection-012 |
= |
|
active selection and background-color (basic)
|
|
active-selection-014 |
= |
Recommend |
active selection and text-decoration
- This test checks that 'text-decoration' applies to highlight pseudo-element. Since neither 'color' nor 'background-color' has been specified by the pseudo-element selector in this test, then OS-default highlight colors should be used. The consequence of this is that the highlight color determines also the color of the underline.
|
|
active-selection-016 |
= |
|
active selection of partial text and color
|
|
active-selection-018 |
= |
|
active selection, color and background-color
|
|
active-selection-021 |
= |
|
active selection, color and 'text-decoration: underline overline line-through'
|
|
active-selection-031 |
= |
|
active selection and vertical writing-modes
|
|
grammar-error-001 |
= |
|
highlighting of grammar error (basic)
|
|
grammar-error-002-manual |
|
|
highlighting of grammar error
|
|
grammar-error-003-manual |
|
|
highlighting of grammar error
|
|
spelling-error-001 |
= |
|
highlighting of spelling error (basic)
|
|
spelling-error-002-manual |
|
|
highlighting of spelling error
|
|
spelling-error-003-manual |
|
|
highlighting of spelling error
|
|
text-decoration-color-selection-001 |
= |
|
CSS3 text-decoration-color when |::selection| exists
|
|
text-decoration-color-selection-002 |
|
|
CSS3 text-decoration-color when |::selection| exists
|
|
text-decoration-color-selection-pseudo-01 |
= |
|
CSS3 text-decoration-color when |::selection| and another pseudo style exists
- When selected, text decorations apply the selection color when other pseudo styles are present
|
|
textpath-selection-011 |
= |
SVG |
active selection of text following a path (complex)
- This test checks that an SVG application with a text following a text path can be selected and then be styled.
|
|
+
3.4 Area of a Highlight |
|---|
|
active-selection-043 |
= |
|
active selection and image (complex)
- In this test, a filled red image has a padding belt painted red and a red border. This test checks that the associated overlay for an image must not leak outside the image's border box.
|
|
selection-intercharacter-011 |
= |
Optional |
active selection and inter-character spacing
- This test verifies that intercharacter spacing may be part of the overlay area. When intercharacter spacing is part of the overlay area, then it belongs to the innermost element which contains both characters and which contains such spacing when both characters are selected. In this test, the 'c' and the 't' characters and the space between these characters belong to the same element. Therefore, the 'c' character, the 't' character and the space between these characters have the same orange background color painting.
|
|
selection-intercharacter-012 |
= |
Optional |
active selection and inter-character spacing
- In this test, the 'c' and the 't' characters share the same level in the containment hierarchy but the space between these characters does not. Therefore, only the 'c' and the 't' characters themselves have an orange background color painting.
|
|
+
3.5 Cascading and Per-Element Highlight Styles |
|---|
|
active-selection-051 |
= |
InvalidRecommend |
active selection and invalid declaration block
- In this test, the selector div::selection has an invalid declaration block. Therefore, it is ignored. In such case, the UA should use the OS-default highlight colors for div::selection.
|
|
active-selection-052 |
= |
Recommend |
active selection and empty declaration block
- In this test, neither color nor background-color have been specified for the selector div::selection. In such case, the UA should use the OS-default highlight colors for div::selection.
|
|
active-selection-053 |
= |
InvalidRecommend |
active selection and invalid color value
- In this test, 'color' has an invalid value which makes the declaration invalid; therefore, it is ignored. Therefore, the div::selection selector has neither color nor background-color specified. In such case, the UA should use the OS-default highlight colors for div::selection.
|
|
active-selection-054 |
= |
InvalidRecommend |
active selection and invalid background-color value
- In this test, 'background-color' has an invalid value which makes the declaration invalid; therefore, it is ignored. Therefore, the div::selection selector has neither color nor background-color specified. In such case, the UA should use the OS-default highlight colors for div::selection.
|
|
cascade-highlight-001 |
= |
|
higher specificity of selectors (Example 11)
- This test is an adaptation (or modified version) of Example 11 (#example-c35bf49a). The 'div > span::selection' selector has an higher specificity than the 'span::selection' selector.
|
|
cascade-highlight-002 |
= |
|
tag selector missing (Example 12)
- This test is an adaptation (or modified version) of Example 12 (#example-97480f68). In this test, <span> element's ::selection matches the ::selection { background-color: green; } rule and not the div#test::selection rule because '*' is implied when a tag selector is missing.
|
|
cascade-highlight-004 |
= |
|
inheritance of selection highlight colors from its parent element
- In this test, 'color' and 'background-color' have not been given a value for the span element. Since its parent element has an highlight pseudo-element, then these values should be inherited. Therefore the span element should be green on a yellow background and should not use the OS default selection highlight color values.
|
|
+
3.6 Painting the Highlight |
|---|
|
active-selection-014 |
= |
Recommend |
active selection and text-decoration
- This test checks that 'text-decoration' applies to highlight pseudo-element. Since neither 'color' nor 'background-color' has been specified by the pseudo-element selector in this test, then OS-default highlight colors should be used. The consequence of this is that the highlight color determines also the color of the underline.
|
|
active-selection-041 |
≠ |
Recommend |
active selection and image
- In this test, a filled yellow image is selected and is overlaid with an opaque blue background color. The specification states that, for replaced content, the UA should create a semi-transparent wash to coat the content. But such semi-transparent wash could use a transparency of 0.3 or 0.5 or 0.7: so, we do not know. Therefore we can not predict the rendered end result. All we can be sure of is that the image, once selected, must not be identical to its original non-selected version. This test checks precisely and only this.
|
|
active-selection-045 |
= |
|
active selection and image
- This test checks that the associated overlay for image must not cover (or leak) outside the image's content box.
|
|
grammar-spelling-errors-001 |
= |
|
::spelling-error overlay drawn over the ::grammar-error overlay
- In this test, we postulate that the word 'dificultly' represents both a grammar error and a spelling error. In such editorial scenario, then the pseudo-element ::spelling-error's background color (yellow) is supposed to be drawn over the pseudo-element ::grammar-error's background color (red). The color should remain green as the pseudo-element ::spelling-error's 'color' is unspecified.
|
|
grammar-spelling-errors-002 |
= |
|
::spelling-error overlay drawn over the ::grammar-error overlay
- In this test, we postulate that the word 'wolks' represents both a grammar error and a spelling error. In such such editorial scenario, then the pseudo-element ::spelling-error's 'color' (green) is supposed to be drawn over the pseudo-element ::grammar-error's 'color' (red). The background color should remain yellow as ::spelling-error's 'background-color' is unspecified, therefore defaulting to 'transparent'.
|
|
highlight-painting-001 |
= |
|
highlight painting
|
|
highlight-painting-002 |
= |
|
highlight painting
|
|
highlight-painting-003 |
= |
|
highlight painting
|
|
highlight-z-index-001 |
= |
|
highlight pseudo-element drawn below positioned element
- This test checks that the ::selection pseudo-element must be drawn below a relatively positioned element. In this test, such relatively positioned element is a preceding sibling element.
|
|
highlight-z-index-002 |
= |
|
highlight pseudo-element drawn below positioned element
- This test checks that the ::selection pseudo-element must be drawn below an absolutely positioned element. In this test, such absolutely positioned element is a preceding sibling element.
|
|
selection-overlay-and-grammar-001 |
= |
|
::selection overlay drawn over the ::grammar-error overlay
- In this test, the div::selection pseudo-element must be drawn over the div::grammar-error overlay.
|
|
selection-overlay-and-spelling-001 |
= |
|
::selection overlay drawn over the ::spelling-error overlay
- In this test, the div::selection pseudo-element must be drawn over the div::spelling-error overlay.
|