test7.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <title>Test 007</title>
  6. <script>
  7. var Hyphenopoly = {
  8. require: {
  9. "en-us": "FORCEHYPHENOPOLY"
  10. },
  11. setup: {
  12. selectors: {
  13. ".class1": {
  14. compound: "all"
  15. },
  16. ".class2": {
  17. compound: "auto"
  18. },
  19. ".class3": {
  20. compound: "hyphen"
  21. }
  22. }
  23. },
  24. handleEvent: {
  25. hyphenopolyEnd: function (e) {
  26. assert();
  27. }
  28. }
  29. };
  30. </script>
  31. <script src="../Hyphenopoly_Loader.js"></script>
  32. <script>
  33. function assert() {
  34. var tests = 3;
  35. var i = 1;
  36. var test = "";
  37. var ref = "";
  38. var result = false;
  39. while (i <= tests) {
  40. test = document.getElementById("test" + i).innerHTML;
  41. ref = document.getElementById("ref" + i).innerHTML;
  42. if (test === ref) {
  43. document.getElementById("result").innerHTML += "<span style=\"background-color: #d6ffd6\">" + (function (i) {
  44. return (i < 10) ? "0" + i : i;
  45. }(i)) + "</span> ";
  46. result = result || true;
  47. } else {
  48. document.getElementById("result").innerHTML += "<span style=\"background-color: #ffd6d6\">" + i + "</span> ";
  49. result = result || false;
  50. }
  51. i += 1;
  52. }
  53. if (parent != window) {
  54. parent.postMessage(JSON.stringify({
  55. desc: document.getElementById("desc").innerHTML,
  56. index: 7,
  57. result: (result ? "passed" : "failed")
  58. }), window.location.href);
  59. }
  60. }
  61. </script>
  62. <style type="text/css">
  63. body {
  64. width:50%;
  65. margin-left:25%;
  66. margin-right:25%;
  67. }
  68. .test {
  69. background-color: #D8E2F9;
  70. width: 2em;
  71. margin: 0.5em;
  72. border: 1px solid blue;
  73. }
  74. .ref {
  75. background-color: #FEEFC0;
  76. width: 2em;
  77. margin: 0.5em;
  78. border: 1px solid yellow;
  79. }
  80. </style>
  81. </head>
  82. <body>
  83. <div id="navigate"><a href="index.html">&Larr;&nbsp;Index</a>&nbsp;|&nbsp;<a href="test6.html">&larr;&nbsp;Prev</a>&nbsp;|&nbsp;<a href="test8.html">Next&nbsp;&rarr;</a></div>
  84. <h1>Test 007</h1>
  85. <p id="desc">Hyphenate compound words differently.</p>
  86. <div id="result"></div>
  87. <hr>
  88. <h2>1: compound: all</h2>
  89. <p id="test1" class="test class1" lang="en-us">hyphenation-two</p>
  90. <p id="ref1" class="ref" lang="en-us">hy&shy;phen&shy;ation-&#8203;two</p>
  91. <h2>2: compound: auto</h2>
  92. <p id="test2" class="test class2" lang="en-us">hyphenation-two</p>
  93. <p id="ref2" class="ref" lang="en-us">hy&shy;phen&shy;ation-two</p>
  94. <h2>3: compound: hyphen</h2>
  95. <p id="test3" class="test class3" lang="en-us">hyphenation-two</p>
  96. <p id="ref3" class="ref" lang="en-us">hyphenation-&#8203;two</p>
  97. <hr>
  98. <div><span class="test">Test</span> <span class="ref">Ref</span></div>
  99. </body>
  100. </html>