currency.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Test CurrencyTextBox</title>
  7. <script type="text/javascript" src="../../../dojo/dojo.js"
  8. djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ja-jp','ar-eg']"></script>
  9. <script type="text/javascript" src="../../../dojo/currency.js"></script>
  10. <script type="text/javascript" src="../../../dojo/number.js"></script>
  11. <script type="text/javascript">
  12. dojo.require("dijit.form.NumberTextBox");
  13. dojo.require("dijit.form.CurrencyTextBox");
  14. dojo.require("dijit.form.DateTextBox");
  15. dojo.require("dijit.form.ValidationTextBox");
  16. dojo.require("dojo.date.locale");
  17. dojo.require("dojo.date.stamp");
  18. dojo.require("dojo.parser"); // scan page for widgets and instantiate them
  19. dojo.require("doh.runner");
  20. </script>
  21. <script src="test_i18n.js"></script>
  22. <script type="text/javascript">
  23. dojo.addOnLoad(function(){
  24. doh.register("t", getAllTestCases());
  25. doh.run();
  26. });
  27. </script>
  28. <style type="text/css">
  29. @import "../../../dojo/resources/dojo.css";
  30. @import "../../themes/tundra/tundra.css";
  31. @import "../css/dijitTests.css";
  32. .title {
  33. background-color:#ddd;
  34. }
  35. .hint {
  36. background-color:#eee;
  37. }
  38. .testExample {
  39. background-color:#fbfbfb;
  40. padding:1em;
  41. margin-bottom:1em;
  42. border:1px solid #bfbfbf;
  43. }
  44. .dojoTitlePaneLabel label {
  45. font-weight:bold;
  46. }
  47. td {white-space:nowrap}
  48. </style>
  49. </head>
  50. <body class="tundra">
  51. <h1 class="testTitle">Dijit TextBox Globalization Test for Currency</h1>
  52. <!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2>
  53. <button id="startButton" onclick="startTest()">Start Test</button> -->
  54. <p>
  55. Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr", "ja-jp" and "ar-eg"
  56. and currencies CNY, EGP, EUR, JPY. If not, convert these CLDR data and put them there.
  57. </p>
  58. <script>
  59. (function() {
  60. genFormatTestCases("Currency Format", "dijit.form.CurrencyTextBox", [
  61. { attrs: {Currency: "CNY", lang: "zh-cn"},
  62. desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>",
  63. value: "123456789.46",
  64. expValue: "&#xFFE5;123,456,789.46",
  65. comment: ""
  66. },
  67. { attrs: {Currency: "CNY", lang: "zh-cn"},
  68. desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>",
  69. value: "-123456789.46",
  70. expValue: "-&#xFFE5;123,456,789.46",
  71. comment: ""
  72. },
  73. { attrs: {Currency: "EUR", lang: "fr-fr"},
  74. desc: "Locale: <b>fr_FR</b> Currency: <b>EUR</b>",
  75. value: "123456789.46",
  76. expValue: "123&nbsp;456&nbsp;789,46 &euro;",
  77. comment: "Failed in IE: the currency textbox should not reject the value generated by itself. <a href='#cmt_1'>See #1.</a>"
  78. },
  79. { attrs: {Currency: "EUR", lang: "fr-fr"},
  80. desc: "Locale: <b>zh_CN</b> Currency: <b>EUR</b>",
  81. value: "-123456789.46",
  82. expValue: "-123&nbsp;456&nbsp;789,46 &euro;",
  83. comment: "Failed in IE: the currency textbox should not reject the value generated by itself. <a href='#cmt_1'>See #1.</a>"
  84. },
  85. { attrs: {Currency: "JPY", lang: "ja-jp"},
  86. desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>",
  87. value: "123456789.46",
  88. expValue: "&#xFFE5;123,456,789",
  89. comment: ""
  90. },
  91. { attrs: {Currency: "JPY", lang: "ja-jp"},
  92. desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>",
  93. value: "-123456789.46",
  94. expValue: "-&#xFFE5;123,456,789",
  95. comment: ""
  96. },
  97. { attrs: {Currency: "EGP", lang: "ar-eg"},
  98. desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
  99. value: "123456789.46",
  100. expValue: "&#x062C;.&#x0645;.\u200F 123&#x066C;456&#x066C;789&#x066B;46",
  101. comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
  102. },
  103. { attrs: {Currency: "EGP", lang: "ar-eg"},
  104. desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
  105. value: "-123456789.46",
  106. expValue: "&#x062C;.&#x0645;.\u200F 123&#x066C;456&#x066C;789&#x066B;46-",
  107. comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
  108. },
  109. { attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"},
  110. desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
  111. value: "123456789.46",
  112. expValue: "&#x062C;.&#x0645;.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦",
  113. comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
  114. },
  115. { attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"},
  116. desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
  117. value: "-123456789.46",
  118. expValue: "&#x062C;.&#x0645;.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦-",
  119. comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
  120. }
  121. ]);
  122. genValidateTestCases("Currency Validate", "dijit.form.CurrencyTextBox", [
  123. { attrs: {Currency: "CNY", lang: "zh-cn"},
  124. desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>",
  125. value: 123456789.46,
  126. expValue: "&#xFFE5;123,456,789.46",
  127. comment: ""
  128. },
  129. { attrs: {Currency: "CNY", lang: "zh-cn"},
  130. desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>",
  131. value: -123456789.46,
  132. expValue: "-&#xFFE5;123,456,789.46",
  133. comment: ""
  134. },
  135. { attrs: {Currency: "EUR", lang: "fr-fr"},
  136. desc: "Locale: <b>fr_FR</b> Currency: <b>EUR</b>",
  137. value: 123456789.46,
  138. expValue: "123&nbsp;456&nbsp;789,46 &euro;",
  139. comment: "Failed in IE. <a href='#cmt_1'>See #1.</a>"
  140. },
  141. { attrs: {Currency: "EUR", lang: "fr-fr"},
  142. desc: "Locale: <b>zh_CN</b> Currency: <b>EUR</b>",
  143. value: -123456789.46,
  144. expValue: "-123&nbsp;456&nbsp;789,46 &euro;",
  145. comment: "Failed in IE. <a href='#cmt_1'>See #1.</a>"
  146. },
  147. { attrs: {Currency: "JPY", lang: "ja-jp"},
  148. desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>",
  149. value: 123456789,
  150. expValue: "&#xFFE5;123,456,789",
  151. comment: ""
  152. },
  153. { attrs: {Currency: "JPY", lang: "ja-jp"},
  154. desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>",
  155. value: -123456789,
  156. expValue: "-&#xFFE5;123,456,789",
  157. comment: ""
  158. },
  159. { attrs: {Currency: "EGP", lang: "ar-eg"},
  160. desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
  161. value: 123456789.46,
  162. expValue: "&#x062C;.&#x0645;.\u200F 123&#x066C;456&#x066C;789&#x066B;46",
  163. comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
  164. },
  165. { attrs: {Currency: "EGP", lang: "ar-eg"},
  166. desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
  167. value: -123456789.46,
  168. expValue: "&#x062C;.&#x0645;.\u200F 123&#x066C;456&#x066C;789&#x066B;46-",
  169. comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
  170. },
  171. { attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"},
  172. desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
  173. value: 123456789.46,
  174. expValue: "&#x062C;.&#x0645;.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦",
  175. comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
  176. },
  177. { attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"},
  178. desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
  179. value: -123456789.46,
  180. expValue: "&#x062C;.&#x0645;.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦-",
  181. comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
  182. }
  183. ]);
  184. dojo.parser.parse();
  185. })();
  186. </script>
  187. <h2 class="testTitle">Issues &amp; Comments</h2>
  188. <h3 class="testTitle"><a name="cmt_1">Issue #1<sup style="color:blue">Fixed</sup></a></h3>
  189. <p>
  190. Some browsers like FireFox have a bug on the non-breaking space character (U+00A0, <b>&amp;nbsp;</b> or <b>&amp;#160;</b> or
  191. <b>&amp;#xA0;</b> in HTML).
  192. They always convert the NBSP character to a normal space (U+0020, <b>&amp;#x20;</b> in HTML) automatically in the following circumstances:
  193. </p>
  194. <ul>
  195. <li>Copy text from the page</li>
  196. <li>Use <b>innerHTML</b> to get the content of a certain element</li>
  197. <li>Use <b>value</b> to get an <b>INPUT</b> element's value</li>
  198. </ul>
  199. <p>
  200. You cannot read a real NBSP character from an <b>INPUT</b> element on these browsers. It causes issues when some formatting data in CLDR
  201. contains an NBSP character. For example,
  202. </p>
  203. <ul>
  204. <li>Many locales like French use an NBSP character as a group separator in numbers</li>
  205. <li>French and Finnish use NBSP characters in their percentage and currency format patterns respectively</li>
  206. <li>Russian uses NBSP characters in their date format pattern (see <a href="test_validateDate.html">test_validateDate.html</a>)</li>
  207. </ul>
  208. <p>
  209. So Dojo may generate formatted data with NBSP characters in it but cannot read NBSP charaters from user's input in some browser.
  210. </p>
  211. <h3 class="testTitle"><a name="cmt_2">Issue #2<sup style="color:blue">Fixed: the CLDR data generator should be fixed by adding code to convert U+200F to "\u200F" in nls JS files.</sup></a></h3>
  212. <p>
  213. Most Bidi currency symbols contain an LTR-MARK (U+200F) character at the very beginning.
  214. But Firefox ignores it when it is not in any escaping form. This should be a bug of Firefox.
  215. For example, click <a href="javascript:alert('‏'.indexOf('\u200F'))"><code>alert('‏'.indexOf('\u+200F'))</code></a> (there is a U+200F in the empty-looking string):
  216. </p>
  217. <ul>
  218. <li>In Firefox, shows "-1" -- no U+200F found</li>
  219. <li>In IE &amp; Opera, shows "0" -- the U+200F is found</li>
  220. </ul>
  221. <p>
  222. But if the U+200F is in some escaping form, Firefox will work as well as other browsers.
  223. Click <a href="javascript:alert('\u200F'.indexOf('\u200F'))"><code>alert('\u200F'.indexOf('\u+200F'))</code></a> to see the same result both in Firefox and IE:
  224. </p>
  225. <h3 class="testTitle"><a name="cmt_3">Issue #3<sup style="color:blue">Fixed: added a "localeDigit" to the options</sup></a></h3>
  226. <p>
  227. Strictly speaking, the data conversion must support non-European number characters in some locales like Arabic and Hindi.
  228. For example, ICU formats a number data into Indic number characters by default in the Arabic locale.
  229. However, currently Dojo does not support this feature (Dojo uses the default number conversion of the browser).
  230. </p>
  231. </body>
  232. </html>