test18.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <title>Test 018</title>
  6. <script>
  7. var Hyphenopoly = {
  8. require: {
  9. "de": "FORCEHYPHENOPOLY"
  10. },
  11. setup: {
  12. selectors: {
  13. ".hyphenate": {
  14. hyphen: "•"
  15. }
  16. }
  17. },
  18. handleEvent: {
  19. hyphenopolyEnd: function (e) {
  20. assert();
  21. }
  22. }
  23. };
  24. var assertRunCount = 0;
  25. function assert() {
  26. assertRunCount += 1;
  27. var tests = (assertRunCount === 1) ? 1 : 3;
  28. var i = 1;
  29. var test = "";
  30. var ref = "";
  31. var result = false;
  32. document.getElementById("result").innerHTML = "";
  33. while (i <= tests) {
  34. test = document.getElementById("test" + i).innerHTML;
  35. ref = document.getElementById("ref" + i).innerHTML;
  36. if (test === ref) {
  37. document.getElementById("result").innerHTML += "<span style=\"background-color: #d6ffd6\">" + i + "</span> ";
  38. result = result || true;
  39. } else {
  40. document.getElementById("result").innerHTML += "<span style=\"background-color: #ffd6d6\">" + i + "</span> ";
  41. result = result || false;
  42. }
  43. i += 1;
  44. }
  45. if (parent != window && assertRunCount === 2) {
  46. parent.postMessage(JSON.stringify({
  47. desc: document.getElementById("desc").innerHTML,
  48. index: 18,
  49. result: (result ? "passed" : "failed")
  50. }), window.location.href);
  51. }
  52. }
  53. window.setTimeout(function () {
  54. document.getElementById("test1").innerHTML = "Typografie";
  55. document.getElementById("ref1").innerHTML = "Ty•po•gra•fie";
  56. document.getElementById("test2").innerHTML = "Textlayout";
  57. document.getElementById("ref2").innerHTML = "Text•lay•out";
  58. document.getElementById("test3").innerHTML ='<p class="hyphenate">Satzstruktur</p>';
  59. document.getElementById("ref3").innerHTML ='<p class="hyphenate">Satz•struk•tur</p>';
  60. Hyphenopoly.events.dispatch("contentLoaded");
  61. }, 500);
  62. </script>
  63. <script src="../Hyphenopoly_Loader.js"></script>
  64. <style type="text/css">
  65. body {
  66. width:50%;
  67. margin-left:25%;
  68. margin-right:25%;
  69. }
  70. .test {
  71. background-color: #D8E2F9;
  72. }
  73. .ref {
  74. background-color: #FEEFC0;
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <div id="navigate"><a href="index.html">&Larr;&nbsp;Index</a>&nbsp;|&nbsp;<a href="test17.html">&larr;&nbsp;Prev</a>&nbsp;|&nbsp;<a href="test19.html">Next&nbsp;&rarr;</a></div>
  80. <h1>Test 018</h1>
  81. <p id="desc">Hyphenate element manually</p>
  82. <div id="result">wait for it...</div>
  83. <hr>
  84. <h2>1: Hyphenate on load, changed later</h2>
  85. <p id="test1" class="test hyphenate" lang="de">Silbentrennungsalgorithmus</p>
  86. <p id="ref1" class="ref" lang="de">Sil•ben•tren•nungs•al•go•rith•mus</p>
  87. <h2>2: Hyphenate text added to element with class="hyphenate"</h2>
  88. <p id="test2" class="test hyphenate" lang="de"></p>
  89. <p id="ref2" class="ref" lang="de"></p>
  90. <h2>3: Hyphenate element with class="hyphenate" added to container</h2>
  91. <div id="test3" class="test" lang="de"></div>
  92. <div id="ref3" class="ref" lang="de"></div>
  93. <hr>
  94. <div><span class="test">Test</span> <span class="ref">Ref</span></div>
  95. </body>
  96. </html>