-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[@counter-style] Add a manual WPT test for the 'speak-as' descriptor
Bug: 1166766 Change-Id: I8468e9f7d865943ade30080245d3d9d716386d99 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3145713 Reviewed-by: Nektarios Paisios <nektar@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/main@{#919296}
- Loading branch information
1 parent
e5604d4
commit f356be2
Showing
1 changed file
with
186 additions
and
0 deletions.
There are no files selected for viewing
186 changes: 186 additions & 0 deletions
186
css/css-counter-styles/counter-style-speak-as-manual.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,186 @@ | ||
| <!doctype html> | ||
| <title>CSS counter style accessibility test</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-counter-styles/#counter-style-speak-as"> | ||
| <link rel="author" href="mailto:xiaochengh@chromium.org"> | ||
| <p> | ||
| This is a manual test. To run the tests, open the browser's developer tools | ||
| and navigate to the Accessibility pane (may need to activate it in Settings), | ||
| or use an OS-level accessibility inspector, and verify that the accessible | ||
| name of the list markers matches the text in the list items (excluding | ||
| quotation marks). | ||
|
|
||
| <br><br> | ||
|
|
||
| The following issue discusses ways to automate these tests: | ||
|
|
||
| <br><br> | ||
|
|
||
| https://github.com/web-platform-tests/wpt/issues/8355 | ||
| </p> | ||
| <style> | ||
| @counter-style base { | ||
| system: cyclic; | ||
| symbols: 'One' 'Two' 'Three'; | ||
| suffix: '. '; | ||
| } | ||
|
|
||
| @counter-style explicit-bullets { | ||
| system: extends base; | ||
| speak-as: bullets; | ||
| } | ||
| @counter-style explicit-numbers { | ||
| system: extends base; | ||
| speak-as: numbers; | ||
| } | ||
| @counter-style explicit-words { | ||
| system: extends base; | ||
| speak-as: words; | ||
| } | ||
|
|
||
| @counter-style auto-alphabetic { | ||
| system: alphabetic; | ||
| symbols: 'One' 'Two' 'Three'; | ||
| suffix: '. '; | ||
| speak-as: auto; | ||
| } | ||
| @counter-style auto-cyclic { | ||
| system: cyclic; | ||
| symbols: 'One' 'Two' 'Three'; | ||
| suffix: '. '; | ||
| speak-as: auto; | ||
| } | ||
| @counter-style auto-extends { | ||
| system: extends base; | ||
| speak-as: auto; | ||
| } | ||
| @counter-style auto-fixed { | ||
| system: fixed; | ||
| symbols: 'One' 'Two' 'Three'; | ||
| suffix: '. '; | ||
| speak-as: auto; | ||
| } | ||
| @counter-style auto-symbolic { | ||
| system: symbolic; | ||
| symbols: 'One' 'Two' 'Three'; | ||
| suffix: '. '; | ||
| speak-as: auto; | ||
| } | ||
| @counter-style auto-numeric { | ||
| system: numeric; | ||
| symbols: 'Zero' 'One' 'Two' 'Three'; | ||
| suffix: '. '; | ||
| speak-as: auto; | ||
| } | ||
| @counter-style auto-additive { | ||
| system: additive; | ||
| additive-symbols: 3 'Three', 2 'Two', 1 'One'; | ||
| suffix: '. '; | ||
| speak-as: auto; | ||
| } | ||
|
|
||
| @counter-style reference-bullets { | ||
| system: fixed; | ||
| symbols: 'Yi' 'Er' 'San'; | ||
| suffix: '> '; | ||
| speak-as: explicit-bullets; | ||
| } | ||
| @counter-style reference-numbers { | ||
| system: fixed; | ||
| symbols: 'Yi' 'Er' 'San'; | ||
| suffix: '> '; | ||
| speak-as: explicit-numbers; | ||
| } | ||
| @counter-style reference-words { | ||
| system: fixed; | ||
| symbols: 'Yi' 'Er' 'San'; | ||
| suffix: '> '; | ||
| speak-as: explicit-words; | ||
| } | ||
|
|
||
| </style> | ||
| <body> | ||
| <ul style="list-style-type: disc"> | ||
| <li>"• "</li> | ||
| </ul> | ||
| <ul style="list-style-type: circle"> | ||
| <li>"◦ "</li> | ||
| </ul> | ||
| <ul style="list-style-type: square"> | ||
| <li>"◾ "</li> | ||
| </ul> | ||
| <ul style="list-style-type: disclosure-open"> | ||
| <li>"▾ "</li> | ||
| </ul> | ||
| <ul style="list-style-type: disclosure-closed"> | ||
| <li>"▸ "</li> | ||
| </ul> | ||
|
|
||
| <ul style="list-style-type: explicit-bullets"> | ||
| <li>"• "</li> | ||
| <li>"• "</li> | ||
| <li>"• "</li> | ||
| </ul> | ||
| <ul style="list-style-type: explicit-numbers"> | ||
| <li>"1. "</li> | ||
| <li>"2. "</li> | ||
| <li>"3. "</li> | ||
| </ul> | ||
| <ul style="list-style-type: explicit-words"> | ||
| <li>"One. "</li> | ||
| <li>"Two. "</li> | ||
| <li>"Three. "</li> | ||
| </ul> | ||
|
|
||
| <ul style="list-style-type: auto-alphabetic"> | ||
| <li>"One. "</li> | ||
| <li>"Two. "</li> | ||
| <li>"Three. "</li> | ||
| </ul> | ||
| <ul style="list-style-type: auto-cyclic"> | ||
| <li>"• "</li> | ||
| <li>"• "</li> | ||
| <li>"• "</li> | ||
| </ul> | ||
| <ul style="list-style-type: auto-extends"> | ||
| <li>"• "</li> | ||
| <li>"• "</li> | ||
| <li>"• "</li> | ||
| </ul> | ||
| <ul style="list-style-type: auto-fixed"> | ||
| <li>"1. "</li> | ||
| <li>"2. "</li> | ||
| <li>"3. "</li> | ||
| </ul> | ||
| <ul style="list-style-type: auto-symbolic"> | ||
| <li>"1. "</li> | ||
| <li>"2. "</li> | ||
| <li>"3. "</li> | ||
| </ul> | ||
| <ul style="list-style-type: auto-numeric"> | ||
| <li>"1. "</li> | ||
| <li>"2. "</li> | ||
| <li>"3. "</li> | ||
| </ul> | ||
| <ul style="list-style-type: auto-additive"> | ||
| <li>"1. "</li> | ||
| <li>"2. "</li> | ||
| <li>"3. "</li> | ||
| </ul> | ||
|
|
||
| <ul style="list-style-type: reference-bullets"> | ||
| <li>"• "</li> | ||
| <li>"• "</li> | ||
| <li>"• "</li> | ||
| </ul> | ||
| <ul style="list-style-type: reference-numbers"> | ||
| <li>"1> "</li> | ||
| <li>"2> "</li> | ||
| <li>"3> "</li> | ||
| </ul> | ||
| <ul style="list-style-type: reference-words"> | ||
| <li>"One> "</li> | ||
| <li>"Two> "</li> | ||
| <li>"Three> "</li> | ||
| </ul> | ||
|
|
||
| </body> |