input-valueasdate.html (3605B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <html> 4 <head> 5 <title>HTMLInputElement valueAsDate</title> 6 <link rel="author" title="pmdartus" href="mailto:dartus.pierremarie@gmail.com"> 7 <link rel=help href="https://html.spec.whatwg.org/#dom-input-valueasdate"> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 </head> 12 <body> 13 <h3>input_valueAsDate</h3> 14 <hr> 15 <div id="log"></div> 16 17 <input id="input_date" type="date" /> 18 <input id="input_month" type="month" /> 19 <input id="input_week" type="week" /> 20 <input id="input_time" type="time" /> 21 22 <script> 23 "use strict"; 24 25 function testValueAsDateGetter(type, element, cases) { 26 for (const [actualValue, expectedValueAsDate] of cases) { 27 test( 28 () => { 29 element.value = actualValue; 30 31 const actualValueAsDate = element.valueAsDate; 32 if (actualValueAsDate instanceof Date) { 33 assert_equals( 34 actualValueAsDate.getTime(), 35 expectedValueAsDate.getTime(), 36 `valueAsDate returns an invalid date (actual: ${actualValueAsDate.toISOString()}, ` + 37 `expected: ${expectedValueAsDate.toISOString()})` 38 ); 39 } else { 40 assert_equals(actualValueAsDate, expectedValueAsDate); 41 } 42 }, 43 `valueAsDate getter on type ${type} (with value: ${JSON.stringify(actualValue)})` 44 ); 45 } 46 } 47 48 function testValueAsDateSetter(type, element, cases) { 49 for (const [valueDateStr, expectedValue] of cases) { 50 test(() => { 51 element.valueAsDate = new Date(valueDateStr); 52 assert_equals(element.value, expectedValue); 53 }, `valueAsDate setter on type ${type} (new Date(${JSON.stringify(valueDateStr)}))`); 54 } 55 } 56 57 const dateInput = document.getElementById("input_date"); 58 testValueAsDateGetter("date", dateInput, [ 59 ["", null], 60 ["0000-12-10", null], 61 ["2019-00-12", null], 62 ["2019-12-00", null], 63 ["2019-13-10", null], 64 ["2019-02-29", null], 65 ["2019-12-10", new Date("2019-12-10T00:00:00.000Z")], 66 ["2016-02-29", new Date("2016-02-29T00:00:00.000Z")] // Leap year 67 ]); 68 testValueAsDateSetter("date", dateInput, [ 69 ["2019-12-10T00:00:00.000Z", "2019-12-10"], 70 ["2016-02-29T00:00:00.000Z", "2016-02-29"] // Leap year 71 ]); 72 73 const monthInput = document.getElementById("input_month"); 74 testValueAsDateGetter("month", monthInput, [ 75 ["", null], 76 ["0000-12", null], 77 ["2019-00", null], 78 ["2019-12", new Date("2019-12-01T00:00:00.000Z")] 79 ]); 80 testValueAsDateSetter("month", monthInput, [["2019-12-01T00:00:00.000Z", "2019-12"]]); 81 82 const weekInput = document.getElementById("input_week"); 83 testValueAsDateGetter("week", weekInput, [ 84 ["", null], 85 ["0000-W50", null], 86 ["2019-W00", null], 87 ["2019-W60", null], 88 ["2019-W50", new Date("2019-12-09T00:00:00.000Z")] 89 ]); 90 testValueAsDateSetter("week", weekInput, [["2019-12-09T00:00:00.000Z", "2019-W50"]]); 91 92 const timeInput = document.getElementById("input_time"); 93 testValueAsDateGetter("time", timeInput, [ 94 ["", null], 95 ["24:00", null], 96 ["00:60", null], 97 ["00:00", new Date("1970-01-01T00:00:00.000Z")], 98 ["12:00", new Date("1970-01-01T12:00:00.000Z")], 99 ["23:59", new Date("1970-01-01T23:59:00.000Z")] 100 ]); 101 testValueAsDateSetter("time", timeInput, [ 102 ["1970-01-01T00:00:00.000Z", "00:00"], 103 ["1970-01-01T12:00:00.000Z", "12:00"], 104 ["1970-01-01T23:59:00.000Z", "23:59"] 105 ]); 106 </script> 107 </body> 108 </html>