| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>CSS Test: fallback cycle</title> |
| <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-counter-styles-3/#counter-style-range"> |
| <link rel="help" href="https://drafts.csswg.org/css-counter-styles-3/#counter-style-fallback"> |
| <meta name="assert" content="While following fallbacks to find a counter style that can render the given counter value, |
| if a loop in the specified fallbacks is detected, the decimal style must be used instead"> |
| <link rel="match" href="fallback-cycle-ref.html"> |
| <style> |
| /* |
| Three styles with different but overlapping ranges, |
| with fallback to each other in a cycle. |
| |
| Depending where in the cycle we start, we expect different results |
| for the overlapping ranges; in all cases we fall back to the default |
| (decimal) style when fallback would loop around. |
| */ |
| @counter-style paren { |
| system: extends decimal; |
| prefix: "("; |
| suffix: ")\A0"; |
| range: 2 4; |
| fallback: bracket; |
| } |
| |
| @counter-style bracket { |
| system: extends lower-roman; |
| prefix: "["; |
| suffix: "]\A0"; |
| range: 4 7; |
| fallback: brace; |
| } |
| |
| @counter-style brace { |
| system: extends lower-alpha; |
| prefix: "{"; |
| suffix: "}\A0"; |
| range: 7 9; |
| fallback: paren; |
| } |
| |
| ol { |
| list-style-type: disc; /* overridden by the counter-style rules */ |
| } |
| </style> |
| |
| <ol style="list-style: paren"> |
| <li>paren > bracket > brace > decimal |
| <li>paren |
| <li>paren |
| <li>paren |
| <li>paren > bracket |
| <li>paren > bracket |
| <li>paren > bracket |
| <li>paren > bracket > brace |
| <li>paren > bracket > brace |
| <li>paren > bracket > brace > decimal |
| </ol> |
| |
| <ol style="list-style: bracket"> |
| <li>bracket > brace > paren > decimal |
| <li>bracket > brace > paren |
| <li>bracket > brace > paren |
| <li>bracket |
| <li>bracket |
| <li>bracket |
| <li>bracket |
| <li>bracket > brace |
| <li>bracket > brace |
| <li>bracket > brace > paren > decimal |
| </ol> |
| |
| <ol style="list-style: brace"> |
| <li>brace > paren > bracket > decimal |
| <li>brace > paren |
| <li>brace > paren |
| <li>brace > paren |
| <li>brace > paren > bracket |
| <li>brace > paren > bracket |
| <li>brace |
| <li>brace |
| <li>brace |
| <li>brace > paren > bracket > decimal |
| </ol> |
