PageRenderTime 116ms CodeModel.GetById 27ms RepoModel.GetById 0ms app.codeStats 0ms

/tests/wpt/css-tests/css-writing-modes-3_dev/html/text-orientation-script-001j.htm

https://gitlab.com/0072016/0072016-SDK-js-sdk-framework-
HTML | 149 lines | 149 code | 0 blank | 0 comment | 0 complexity | 0669e654ada176cb2d1156428bdc2824 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html><head><meta charset="utf-8">
    3. 

  3. <title>CSS Writing Modes Test: Test orientation of characters where vo=U (#2/5, 2048 code points in U+2ED8-A387).</title>
    4. 

  4. <link href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help">
    5. 

  5. <meta content="Test orientation of characters where vo=U (#2/5, 2048 code points in U+2ED8-A387)" name="assert">
    6. 

  6. <meta content="dom font" name="flags">
    7. 

  7. <link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii">
    8. 

  8. <script src="/resources/testharness.js"></script>
    9. 

  9. <script src="/resources/testharnessreport.js"></script>
    10. 

  10. <style>
    11. 

  11. @font-face {
    12. 

  12.     font-family: "orientation";
    13. 

  13.     src: url("support/adobe-fonts/CSSHWOrientationTest.otf");
    14. 

  14. }
    15. 

  15. .test {
    16. 

  16.     font: 16px/1 "orientation";
    17. 

  17.     height: 17em;
    18. 

  18.     writing-mode: vertical-rl;
    19. 

  19. }
    20. 

  20. .line {
    21. 

  21.     white-space: pre;
    22. 

  22. }
    23. 

  23. .U {
    24. 

  24.     text-orientation: upright;
    25. 

  25. }
    26. 

  26. .R {
    27. 

  27.     text-orientation: sideways-right;
    28. 

  28. }
    29. 

  29. #details {
    30. 

  30.     margin: 1em .5em;
    31. 

  31. }
    32. 

  32. summary {
    33. 

  33.     font-size: 1.2em;
    34. 

  34.     font-weight: bold;
    35. 

  35.     margin-top: .5em;
    36. 

  36. }
    37. 

  37. </style>
    38. 

  38. </head><body><div id="log"></div>
    39. 

  39. <div id="details"></div>
    40. 

  40. <div id="container">
    41. 

  41. <div data-vo="U" class="test">
    42. 

  42. <div data-block="CJK">
    43. 

  43. <div class="line">⻘⻙⻚⻛⻜⻝⻞⻟⻠⻡⻢⻣⻤⻥⻦⻧⻨⻩⻪⻫⻬⻭⻮⻯⻰⻱⻲⻳</div>
    44. 

  44. </div>
    45. 

  45. <div data-block="Kangxi">
    46. 

  46. <div class="line">⼀⼁⼂⼃⼄⼅⼆⼇⼈⼉⼊⼋⼌⼍⼎⼏⼐⼑⼒⼓⼔⼕⼖⼗⼘⼙⼚⼛⼜⼝⼞⼟</div>
    47. 

  47. <div class="line">⼠⼡⼢⼣⼤⼥⼦⼧⼨⼩⼪⼫⼬⼭⼮⼯⼰⼱⼲⼳⼴⼵⼶⼷⼸⼹⼺⼻⼼⼽⼾⼿</div>
    48. 

  48. <div class="line">⽀⽁⽂⽃⽄⽅⽆⽇⽈⽉⽊⽋⽌⽍⽎⽏⽐⽑⽒⽓⽔⽕⽖⽗⽘⽙⽚⽛⽜⽝⽞⽟</div>
    49. 

  49. <div class="line">⽠⽡⽢⽣⽤⽥⽦⽧⽨⽩⽪⽫⽬⽭⽮⽯⽰⽱⽲⽳⽴⽵⽶⽷⽸⽹⽺⽻⽼⽽⽾⽿</div>
    50. 

  50. <div class="line">⾀⾁⾂⾃⾄⾅⾆⾇⾈⾉⾊⾋⾌⾍⾎⾏⾐⾑⾒⾓⾔⾕⾖⾗⾘⾙⾚⾛⾜⾝⾞⾟</div>
    51. 

  51. <div class="line">⾠⾡⾢⾣⾤⾥⾦⾧⾨⾩⾪⾫⾬⾭⾮⾯⾰⾱⾲⾳⾴⾵⾶⾷⾸⾹⾺⾻⾼⾽⾾⾿</div>
    52. 

  52. <div class="line">⿀⿁⿂⿃⿄⿅⿆⿇⿈⿉⿊⿋⿌⿍⿎⿏⿐⿑⿒⿓⿔⿕</div>
    53. 

  53. </div>
    54. 

  54. <div data-block="Ideographic">
    55. 

  55. <div class="line">⿰⿱⿲⿳⿴⿵⿶⿷⿸⿹⿺⿻</div>
    56. 

  56. </div>
    57. 

  57. <div data-block="CJK">
    58. 

  58. <div class="line">&#x3000;〃〄々〆〇〒〓〠〡〢〣〤〥〦〧〨〩〱〲〳〴〵〶〷〸〹〺〻〼〽〾</div>
    59. 

  59. <div class="line">〿</div>
    60. 

  60. </div>
    61. 

  61. <div data-block="Hiragana">
    62. 

  62. <div class="line">あいうえおかがきぎくぐけげこごさざしじすずせぜそぞただちぢつづて</div>
    63. 

  63. <div class="line">でとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもやゆよら</div>
    64. 

  64. <div class="line">りるれろわゐゑをんゔゝゞゟ</div>
    65. 

  65. </div>
    66. 

  66. <div data-block="Katakana">
    67. 

  67. <div class="line">アイウエオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂツヅテ</div>
    68. 

  68. <div class="line">デトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモヤユヨラ</div>
    69. 

  69. <div class="line">リルレロワヰヱヲンヴヷヸヹヺ・ヽヾヿ</div>
    70. 

  70. </div>
    71. 

  71. <div data-block="Bopomofo">
    72. 

  72. <div class="line">ㄅㄆㄇㄈㄉㄊㄋㄌㄍㄎㄏㄐㄑㄒㄓㄔㄕㄖㄗㄘㄙㄚㄛㄜㄝㄞㄟㄠㄡㄢㄣㄤ</div>
    73. 

  73. <div class="line">ㄥㄦㄨㄩㄪㄫㄬㄭ</div>
    74. 

  74. </div>
    75. 

  75. <div data-block="Hangul">
    76. 

  76. <div class="line">ㄱㄲㄳㄴㄵㄶㄷㄸㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅃㅄㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎㅏㅐ</div>
    77. 

  77. <div class="line">ㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣㅤㅥㅦㅧㅨㅩㅪㅫㅬㅭㅮㅯㅰ</div>
    78. 

  78. <div class="line">ㅱㅲㅳㅴㅵㅶㅷㅸㅹㅺㅻㅼㅽㅾㅿㆀㆁㆂㆃㆄㆅㆆㆇㆈㆉㆊㆋㆌㆍㆎ</div>
    79. 

  79. </div>
    80. 

  80. <div data-block="Kanbun">
    81. 

  81. <div class="line">㆐㆑㆒㆓㆔㆕㆖㆗㆘㆙㆚㆛㆜㆝㆞㆟</div>
    82. 

  82. </div>
    83. 

  83. <div data-block="Bopomofo">
    84. 

  84. <div class="line">ㆠㆡㆢㆣㆤㆥㆦㆧㆨㆩㆪㆫㆬㆭㆮㆯㆰㆱㆲㆳㆴㆵㆶㆷㆸㆹㆺ</div>
    85. 

  85. </div>
    86. 

  86. <div data-block="CJK">
    87. 

  87. <div class="line">㇀㇁㇂㇃㇄㇅㇆㇇㇈㇉㇊㇋㇌㇍㇎㇏㇐㇑㇒㇓㇔㇕㇖㇗㇘㇙㇚㇛㇜㇝㇞㇟</div>
    88. 

  88. <div class="line">㇠㇡㇢㇣</div>
    89. 

  89. </div>
    90. 

  90. <div data-block="Enclosed">
    91. 

  91. <div class="line">㈀㈁㈂㈃㈄㈅㈆㈇㈈㈉㈊㈋㈌㈍㈎㈏㈐㈑㈒㈓㈔㈕㈖㈗㈘㈙㈚㈛㈜㈝㈞㈠</div>
    92. 

  92. <div class="line">㈡㈢㈣㈤㈥㈦㈧㈨㈩㈪㈫㈬㈭㈮㈯㈰㈱㈲㈳㈴㈵㈶㈷㈸㈹㈺㈻㈼㈽㈾㈿㉀</div>
    93. 

  93. <div class="line">㉁㉂㉃㉄㉅㉆㉇㉈㉉㉊㉋㉌㉍㉎㉏㉐㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㉠</div>
    94. 

  94. <div class="line">㉡㉢㉣㉤㉥㉦㉧㉨㉩㉪㉫㉬㉭㉮㉯㉰㉱㉲㉳㉴㉵㉶㉷㉸㉹㉺㉻㉼㉽㉾㉿㊀</div>
    95. 

  95. <div class="line">㊁㊂㊃㊄㊅㊆㊇㊈㊉㊊㊋㊌㊍㊎㊏㊐㊑㊒㊓㊔㊕㊖㊗㊘㊙㊚㊛㊜㊝㊞㊟㊠</div>
    96. 

  96. <div class="line">㊡㊢㊣㊤㊥㊦㊧㊨㊩㊪㊫㊬㊭㊮㊯㊰㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿㋀</div>
    97. 

  97. <div class="line">㋁㋂㋃㋄㋅㋆㋇㋈㋉㋊㋋㋌㋍㋎㋏㋐㋑㋒㋓㋔㋕㋖㋗㋘㋙㋚㋛㋜㋝㋞㋟㋠</div>
    98. 

  98. <div class="line">㋡㋢㋣㋤㋥㋦㋧㋨㋩㋪㋫㋬㋭㋮㋯㋰㋱㋲㋳㋴㋵㋶㋷㋸㋹㋺㋻㋼㋽㋾</div>
    99. 

  99. </div>
    100. 

  100. <div data-block="CJK">
    101. 

  101. <div class="line">㍘㍙㍚㍛㍜㍝㍞㍟㍠㍡㍢㍣㍤㍥㍦㍧㍨㍩㍪㍫㍬㍭㍮㍯㍰㍱㍲㍳㍴㍵㍶㍷</div>
    102. 

  102. <div class="line">㍸㍹㍺㎀㎁㎂㎃㎄㎅㎆㎇㎈㎉㎊㎋㎌㎍㎎㎏㎐㎑㎒㎓㎔㎕㎖㎗㎘㎙㎚㎛㎜</div>
    103. 

  103. <div class="line">㎝㎞㎟㎠㎡㎢㎣㎤㎥㎦㎧㎨㎩㎪㎫㎬㎭㎮㎯㎰㎱㎲㎳㎴㎵㎶㎷㎸㎹㎺㎻㎼</div>
    104. 

  104. <div class="line">㎽㎾㎿㏀㏁㏂㏃㏄㏅㏆㏇㏈㏉㏊㏋㏌㏍㏎㏏㏐㏑㏒㏓㏔㏕㏖㏗㏘㏙㏚㏛㏜</div>
    105. 

  105. <div class="line">㏝㏞㏟㏠㏡㏢㏣㏤㏥㏦㏧㏨㏩㏪㏫㏬㏭㏮㏯㏰㏱㏲㏳㏴㏵㏶㏷㏸㏹㏺㏻㏼</div>
    106. 

  106. <div class="line">㏽㏾㏿㐀䶵</div>
    107. 

  107. </div>
    108. 

  108. <div data-block="Yijing">
    109. 

  109. <div class="line">䷀䷁䷂䷃䷄䷅䷆䷇䷈䷉䷊䷋䷌䷍䷎䷏䷐䷑䷒䷓䷔䷕䷖䷗䷘䷙䷚䷛䷜䷝䷞䷟</div>
    110. 

  110. <div class="line">䷠䷡䷢䷣䷤䷥䷦䷧䷨䷩䷪䷫䷬䷭䷮䷯䷰䷱䷲䷳䷴䷵䷶䷷䷸䷹䷺䷻䷼䷽䷾䷿</div>
    111. 

  111. </div>
    112. 

  112. <div data-block="CJK">
    113. 

  113. <div class="line">一鿌</div>
    114. 

  114. </div>
    115. 

  115. <div data-block="Yi">
    116. 

  116. <div class="line">ꀀꀁꀂꀃꀄꀅꀆꀇꀈꀉꀊꀋꀌꀍꀎꀏꀐꀑꀒꀓꀔꀕꀖꀗꀘꀙꀚꀛꀜꀝꀞꀟ</div>
    117. 

  117. <div class="line">ꀠꀡꀢꀣꀤꀥꀦꀧꀨꀩꀪꀫꀬꀭꀮꀯꀰꀱꀲꀳꀴꀵꀶꀷꀸꀹꀺꀻꀼꀽꀾꀿ</div>
    118. 

  118. <div class="line">ꁀꁁꁂꁃꁄꁅꁆꁇꁈꁉꁊꁋꁌꁍꁎꁏꁐꁑꁒꁓꁔꁕꁖꁗꁘꁙꁚꁛꁜꁝꁞꁟ</div>
    119. 

  119. <div class="line">ꁠꁡꁢꁣꁤꁥꁦꁧꁨꁩꁪꁫꁬꁭꁮꁯꁰꁱꁲꁳꁴꁵꁶꁷꁸꁹꁺꁻꁼꁽꁾꁿ</div>
    120. 

  120. <div class="line">ꂀꂁꂂꂃꂄꂅꂆꂇꂈꂉꂊꂋꂌꂍꂎꂏꂐꂑꂒꂓꂔꂕꂖꂗꂘꂙꂚꂛꂜꂝꂞꂟ</div>
    121. 

  121. <div class="line">ꂠꂡꂢꂣꂤꂥꂦꂧꂨꂩꂪꂫꂬꂭꂮꂯꂰꂱꂲꂳꂴꂵꂶꂷꂸꂹꂺꂻꂼꂽꂾꂿ</div>
    122. 

  122. <div class="line">ꃀꃁꃂꃃꃄꃅꃆꃇꃈꃉꃊꃋꃌꃍꃎꃏꃐꃑꃒꃓꃔꃕꃖꃗꃘꃙꃚꃛꃜꃝꃞꃟ</div>
    123. 

  123. <div class="line">ꃠꃡꃢꃣꃤꃥꃦꃧꃨꃩꃪꃫꃬꃭꃮꃯꃰꃱꃲꃳꃴꃵꃶꃷꃸꃹꃺꃻꃼꃽꃾꃿ</div>
    124. 

  124. <div class="line">ꄀꄁꄂꄃꄄꄅꄆꄇꄈꄉꄊꄋꄌꄍꄎꄏꄐꄑꄒꄓꄔꄕꄖꄗꄘꄙꄚꄛꄜꄝꄞꄟ</div>
    125. 

  125. <div class="line">ꄠꄡꄢꄣꄤꄥꄦꄧꄨꄩꄪꄫꄬꄭꄮꄯꄰꄱꄲꄳꄴꄵꄶꄷꄸꄹꄺꄻꄼꄽꄾꄿ</div>
    126. 

  126. <div class="line">ꅀꅁꅂꅃꅄꅅꅆꅇꅈꅉꅊꅋꅌꅍꅎꅏꅐꅑꅒꅓꅔꅕꅖꅗꅘꅙꅚꅛꅜꅝꅞꅟ</div>
    127. 

  127. <div class="line">ꅠꅡꅢꅣꅤꅥꅦꅧꅨꅩꅪꅫꅬꅭꅮꅯꅰꅱꅲꅳꅴꅵꅶꅷꅸꅹꅺꅻꅼꅽꅾꅿ</div>
    128. 

  128. <div class="line">ꆀꆁꆂꆃꆄꆅꆆꆇꆈꆉꆊꆋꆌꆍꆎꆏꆐꆑꆒꆓꆔꆕꆖꆗꆘꆙꆚꆛꆜꆝꆞꆟ</div>
    129. 

  129. <div class="line">ꆠꆡꆢꆣꆤꆥꆦꆧꆨꆩꆪꆫꆬꆭꆮꆯꆰꆱꆲꆳꆴꆵꆶꆷꆸꆹꆺꆻꆼꆽꆾꆿ</div>
    130. 

  130. <div class="line">ꇀꇁꇂꇃꇄꇅꇆꇇꇈꇉꇊꇋꇌꇍꇎꇏꇐꇑꇒꇓꇔꇕꇖꇗꇘꇙꇚꇛꇜꇝꇞꇟ</div>
    131. 

  131. <div class="line">ꇠꇡꇢꇣꇤꇥꇦꇧꇨꇩꇪꇫꇬꇭꇮꇯꇰꇱꇲꇳꇴꇵꇶꇷꇸꇹꇺꇻꇼꇽꇾꇿ</div>
    132. 

  132. <div class="line">ꈀꈁꈂꈃꈄꈅꈆꈇꈈꈉꈊꈋꈌꈍꈎꈏꈐꈑꈒꈓꈔꈕꈖꈗꈘꈙꈚꈛꈜꈝꈞꈟ</div>
    133. 

  133. <div class="line">ꈠꈡꈢꈣꈤꈥꈦꈧꈨꈩꈪꈫꈬꈭꈮꈯꈰꈱꈲꈳꈴꈵꈶꈷꈸꈹꈺꈻꈼꈽꈾꈿ</div>
    134. 

  134. <div class="line">ꉀꉁꉂꉃꉄꉅꉆꉇꉈꉉꉊꉋꉌꉍꉎꉏꉐꉑꉒꉓꉔꉕꉖꉗꉘꉙꉚꉛꉜꉝꉞꉟ</div>
    135. 

  135. <div class="line">ꉠꉡꉢꉣꉤꉥꉦꉧꉨꉩꉪꉫꉬꉭꉮꉯꉰꉱꉲꉳꉴꉵꉶꉷꉸꉹꉺꉻꉼꉽꉾꉿ</div>
    136. 

  136. <div class="line">ꊀꊁꊂꊃꊄꊅꊆꊇꊈꊉꊊꊋꊌꊍꊎꊏꊐꊑꊒꊓꊔꊕꊖꊗꊘꊙꊚꊛꊜꊝꊞꊟ</div>
    137. 

  137. <div class="line">ꊠꊡꊢꊣꊤꊥꊦꊧꊨꊩꊪꊫꊬꊭꊮꊯꊰꊱꊲꊳꊴꊵꊶꊷꊸꊹꊺꊻꊼꊽꊾꊿ</div>
    138. 

  138. <div class="line">ꋀꋁꋂꋃꋄꋅꋆꋇꋈꋉꋊꋋꋌꋍꋎꋏꋐꋑꋒꋓꋔꋕꋖꋗꋘꋙꋚꋛꋜꋝꋞꋟ</div>
    139. 

  139. <div class="line">ꋠꋡꋢꋣꋤꋥꋦꋧꋨꋩꋪꋫꋬꋭꋮꋯꋰꋱꋲꋳꋴꋵꋶꋷꋸꋹꋺꋻꋼꋽꋾꋿ</div>
    140. 

  140. <div class="line">ꌀꌁꌂꌃꌄꌅꌆꌇꌈꌉꌊꌋꌌꌍꌎꌏꌐꌑꌒꌓꌔꌕꌖꌗꌘꌙꌚꌛꌜꌝꌞꌟ</div>
    141. 

  141. <div class="line">ꌠꌡꌢꌣꌤꌥꌦꌧꌨꌩꌪꌫꌬꌭꌮꌯꌰꌱꌲꌳꌴꌵꌶꌷꌸꌹꌺꌻꌼꌽꌾꌿ</div>
    142. 

  142. <div class="line">ꍀꍁꍂꍃꍄꍅꍆꍇꍈꍉꍊꍋꍌꍍꍎꍏꍐꍑꍒꍓꍔꍕꍖꍗꍘꍙꍚꍛꍜꍝꍞꍟ</div>
    143. 

  143. <div class="line">ꍠꍡꍢꍣꍤꍥꍦꍧꍨꍩꍪꍫꍬꍭꍮꍯꍰꍱꍲꍳꍴꍵꍶꍷꍸꍹꍺꍻꍼꍽꍾꍿ</div>
    144. 

  144. <div class="line">ꎀꎁꎂꎃꎄꎅꎆꎇ</div>
    145. 

  145. </div>
    146. 

  146. </div>
    147. 

  147. </div>
    148. 

  148. <script src="support/text-orientation.js"></script>
    149. 

  149. </body></html>
    150.