Home Explore Help
Sign In
khronosschoty
/
palemoon-dev
Watch 2
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: ac60e7ecec
Branches Tags
palemoon-dev
/
platform
/
layout
/
reftests
/
counter-style
/
name-case-sensitivity.html

name-case-sensitivity.html 2.2 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 
  1. <!DOCTYPE html>
    2. 

  2. <style type="text/css">
    3. 

  3.   ol, div, p {
    4. 

  4.     padding: 0; margin: 0;
    5. 

  5.     line-height: 150%;
    6. 

  6.   }
    7. 

  7.   ol {
    8. 

  8.     list-style-position: inside;
    9. 

  9.   }
    10. 

  10.   li, div, p {
    11. 

  11.     float: left;
    12. 

  12.   }
    13. 

  13.   @counter-style decimal-leading-zero {
    14. 

  14.     system: extends decimal;
    15. 

  15.     pad: 3 '0';
    16. 

  16.   }
    17. 

  17.   @counter-style custom-style {
    18. 

  18.     system: cyclic;
    19. 

  19.     symbols: \2023;
    20. 

  20.   }
    21. 

  21. </style>
    22. 

  22. 

  23. <!-- list-style -->
    24. 

  24. <ol><li style="list-style: Hiragana inside;"></li></ol>
    25. 

  25. <ol><li style="list-style: Decimal-Leading-Zero inside;"></li></ol>
    26. 

  26. <ol><li style="list-style: custom-style inside;"></li></ol>
    27. 

  27. <ol><li style="list-style: Custom-Style inside;"></li></ol>
    28. 

  28. 

  29. <!-- list-style-type -->
    30. 

  30. <ol><li style="list-style-type: Hiragana;"></li></ol>
    31. 

  31. <ol><li style="list-style-type: Decimal-Leading-Zero;"></li></ol>
    32. 

  32. <ol><li style="list-style-type: custom-style;"></li></ol>
    33. 

  33. <ol><li style="list-style-type: Custom-Style;"></li></ol>
    34. 

  34. 

  35. <!-- counter() -->
    36. 

  36. <style type="text/css">
    37. 

  37.   #counter { counter-reset: a 1; }
    38. 

  38.   #counter-a::before { content: counter(a, Hiragana); }
    39. 

  39.   #counter-b::before { content: counter(a, Decimal-leading-Zero); }
    40. 

  40.   #counter-c::before { content: counter(a, custom-style); }
    41. 

  41.   #counter-d::before { content: counter(a, Custom-Style); }
    42. 

  42. </style>
    43. 

  43. <div id="counter">
    44. 

  44.   <p id="counter-a"></p>
    45. 

  45.   <p id="counter-b"></p>
    46. 

  46.   <p id="counter-c"></p>
    47. 

  47.   <p id="counter-d"></p>
    48. 

  48. </div>
    49. 

  49. 

  50. <!-- counters() -->
    51. 

  51. <style type="text/css">
    52. 

  52.   #counters { counter-reset: a 1; }
    53. 

  53.   #counters-a::before { content: counters(a, '', Hiragana); }
    54. 

  54.   #counters-b::before { content: counters(a, '', Decimal-leading-Zero); }
    55. 

  55.   #counters-c::before { content: counters(a, '', custom-style); }
    56. 

  56.   #counters-d::before { content: counters(a, '', Custom-Style); }
    57. 

  57. </style>
    58. 

  58. <div id="counters">
    59. 

  59.   <p id="counters-a"></p>
    60. 

  60.   <p id="counters-b"></p>
    61. 

  61.   <p id="counters-c"></p>
    62. 

  62.   <p id="counters-d"></p>
    63. 

  63. </div>
    64. 

  64. 

  65. <style type="text/css">
    66. 

  66.   @counter-style a { system: extends HiRaGaNa; }
    67. 

  67.   @counter-style b { system: extends Decimal-leading-ZERO; }
    68. 

  68.   @counter-style c { system: extends custom-style; }
    69. 

  69.   @counter-style d { system: extends Custom-Style; }
    70. 

  70. </style>
    71. 

  71. <ol><li style="list-style-type: a;"></li></ol>
    72. 

  72. <ol><li style="list-style-type: b;"></li></ol>
    73. 

  73. <ol><li style="list-style-type: c;"></li></ol>
    74. 

  74. <ol><li style="list-style-type: d;"></li></ol>
    75. 

  75.