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

/third_party/blink/web_tests/external/wpt/html/semantics/forms/the-input-element/range.html

https://github.com/chromium/chromium
HTML | 249 lines | 215 code | 34 blank | 0 comment | 0 complexity | 52c71c2e45e487e6125df42b7bceba69 MD5 | raw file
Possible License(s): MPL-2.0-no-copyleft-exception, Apache-2.0, BSD-3-Clause
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Input Range</title>
  5. <meta name=viewport content="width=device-width, maximum-scale=1.0, user-scalable=no" />
  6. <link rel="author" title="Fabrice Clari" href="mailto:f.clari@inno-group.com">
  7. <link rel="author" title="Dimitri Bocquet" href="mailto:Dimitri.Bocquet@mosquito-fp7.eu">
  8. <link rel="author" title="Tomoyuki SHIMIZU" href="mailto:tomoyuki.labs@gmail.com">
  9. <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-input-element">
  10. <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-type">
  11. <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-min">
  12. <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-max">
  13. <link rel="help" href="https://html.spec.whatwg.org/multipage/#range-state-(type=range)">
  14. <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-stepup">
  15. <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-input-stepdown">
  16. <link rel="help" href="https://html.spec.whatwg.org/multipage/#best-representation-of-the-number-as-a-floating-point-number">
  17. <script src="/resources/testharness.js"></script>
  18. <script src="/resources/testharnessreport.js"></script>
  19. </head>
  20. <body>
  21. <h1>Input Range</h1>
  22. <div style="display:none">
  23. <input type="range" id="range_basic" min=0 max=5 />
  24. <input type="range" id="value_smaller_than_min" min=0 max=5 value=-10 />
  25. <input type="range" id="value_larger_than_max" min=0 max=5 value=7 />
  26. <input type="range" id="empty_attributes" />
  27. <input type="range" id="value_not_specified" min=2 max=6 />
  28. <input type="range" id="control_step_mismatch" min=0 max=7 step=2 />
  29. <input type="range" id="max_smaller_than_min" min=2 max=-3 />
  30. <input type="range" id="default_step_scale_factor_1" min=5 max=12.6 value=6.7 />
  31. <input type="range" id="default_step_scale_factor_2" min=5.3 max=12 value=6.7 />
  32. <input type="range" id="default_step_scale_factor_3"min=5 max=12.6 step=0.5 value=6.7 />
  33. <input type="range" id="float_step_scale_factor" min=5.3 max=12 step=0.5 value=6.7 />
  34. <input type="range" id="stepup" min=3 max=14 value=6 step=3 />
  35. <input type="range" id="stepdown" min=3 max=11 value=9 step=3 />
  36. <input type="range" id="stepup_beyond_max" min=3 max=14 value=9 step=3 />
  37. <input type="range" id="stepdown_beyond_min" min=3 max=11 value=6 step=3 />
  38. <input type="range" id="illegal_min_and_max" min="ab" max="f" />
  39. <input type="range" id="illegal_value_and_step" min=0 max=5 value="ppp" step="xyz" />
  40. <input type="range" id="should_skip_whitespace" value=" 123"/>
  41. <input type="range" id="exponent_value1" value=""/>
  42. <input type="range" id="exponent_value2" value=""/>
  43. </div>
  44. <div id="log">
  45. </div>
  46. <script type="text/javascript">
  47. test(
  48. function() {
  49. assert_equals(document.getElementById('range_basic').type, "range");
  50. },
  51. "range type support on input element"
  52. );
  53. test(
  54. function() {
  55. assert_equals(document.getElementById('range_basic').min, "0")
  56. },
  57. "min attribute support on input element"
  58. );
  59. test(
  60. function() {
  61. assert_equals(document.getElementById('range_basic').max, "5")
  62. },
  63. "max attribute support on input element"
  64. );
  65. test(
  66. function() {
  67. assert_equals(document.getElementById('illegal_min_and_max').min, "ab")
  68. },
  69. "Illegal value of min attribute"
  70. );
  71. test(
  72. function() {
  73. assert_equals(document.getElementById('illegal_min_and_max').max, "f")
  74. },
  75. "Illegal value of max attribute"
  76. );
  77. test(
  78. function() {
  79. assert_equals(document.getElementById('illegal_value_and_step').value, "3")
  80. },
  81. "Converting an illegal string to the default value"
  82. );
  83. test(
  84. function() {
  85. assert_equals(document.getElementById('illegal_value_and_step').step, "xyz")
  86. },
  87. "Illegal value of step attribute"
  88. );
  89. test(
  90. function() {
  91. assert_equals(document.getElementById('value_smaller_than_min').value, "0")
  92. },
  93. "the value is set to min when a smaller value than min attribute is given"
  94. );
  95. test(
  96. function() {
  97. assert_equals(document.getElementById('value_larger_than_max').value, "5")
  98. },
  99. "the value is set to max when a larger value than max attribute is given"
  100. );
  101. test(
  102. function() {
  103. assert_equals(document.getElementById('empty_attributes').min, "")
  104. },
  105. "default value of min attribute in input type=range"
  106. );
  107. test(
  108. function() {
  109. assert_equals(document.getElementById('empty_attributes').max, "")
  110. },
  111. "default value of max attribute in input type=range"
  112. );
  113. test(
  114. function() {
  115. assert_equals(document.getElementById('value_not_specified').value, "4")
  116. },
  117. "default value when min and max attributes are given (= min plus half the difference between min and max)"
  118. );
  119. test(
  120. function() {
  121. assert_equals(document.getElementById('control_step_mismatch').value, "4")
  122. },
  123. "default value with step control when both min and max attributes are given"
  124. );
  125. // Chrome would result in different value out of the range between min and max. Why?
  126. test(
  127. function() {
  128. assert_equals(document.getElementById('max_smaller_than_min').value, "2")
  129. },
  130. "default value when both min and max attributes are given, while min > max"
  131. );
  132. test(
  133. function() {
  134. assert_equals(document.getElementById('default_step_scale_factor_1').value, "7")
  135. },
  136. "The default step scale factor is 1, unless min attribute has non-integer value"
  137. );
  138. test(
  139. function() {
  140. assert_equals(document.getElementById('default_step_scale_factor_2').value, "6.3")
  141. },
  142. "Step scale factor behavior when min attribute has integer value but max attribute is non-integer "
  143. );
  144. test(
  145. function() {
  146. assert_equals(document.getElementById('default_step_scale_factor_3').step, "1")
  147. },
  148. "The default scale factor is 1 even if step attribute is explicitly set to non-integer value, unless min attribute has non-integer value"
  149. );
  150. test(
  151. function() {
  152. assert_equals(document.getElementById('float_step_scale_factor').value, "6.8")
  153. },
  154. "Solving the step mismatch"
  155. );
  156. // Firefox Nightly (24.0a1) would result in the possible maximum value in this range... (i.e. 12)
  157. test(
  158. function() {
  159. var e = document.getElementById('stepup');
  160. e.stepUp();
  161. assert_equals(e.value, "9")
  162. },
  163. "Performing stepUp()"
  164. );
  165. // Firefox Nightly (24.0a1) would result in the possible minimum value in this range... (i.e. 3)
  166. test(
  167. function() {
  168. var e = document.getElementById('stepdown');
  169. e.stepDown();
  170. assert_equals(e.value, "6")
  171. },
  172. "Performing stepDown()"
  173. );
  174. // Chrome and Opera would throw DOM Exception 11 (InvalidStateError)
  175. // Firefox Nightly gives the correct result
  176. test(
  177. function() {
  178. var e = document.getElementById('stepup_beyond_max');
  179. e.stepUp(2);
  180. assert_equals(e.value, "12")
  181. },
  182. "Performing stepUp() beyond the value of the max attribute"
  183. );
  184. // Chrome and Opera would throw DOM Exception 11 (InvalidStateError)
  185. // Firefox Nightly gives the correct result
  186. test(
  187. function() {
  188. var e = document.getElementById('stepdown_beyond_min');
  189. e.stepDown(2);
  190. assert_equals(e.value, "3")
  191. }, "Performing stepDown() beyond the value of the min attribute"
  192. );
  193. test(
  194. function() {
  195. var e = document.getElementById('should_skip_whitespace');
  196. assert_equals(e.value, "123")
  197. }, "Skip ASCII whitespace within input"
  198. );
  199. test(
  200. function() {
  201. var e = document.getElementById('exponent_value1');
  202. e.value = 1e2;
  203. assert_equals(e.value, "100")
  204. }, "Multiply value by ten raised to the exponentth power with `e`"
  205. );
  206. test(
  207. function() {
  208. var e = document.getElementById('exponent_value2');
  209. e.value = 1E2;
  210. assert_equals(e.value, "100")
  211. }, "Multiply value by ten raised to the exponentth power with `E`"
  212. );
  213. </script>
  214. </body>
  215. </html>