clone.html (8019B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Test input value retention upon clone</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <style>form {display: none;} </style> 7 <form> 8 <p><input type=checkbox> This checkbox is initially unchecked.</p> 9 <p><input type=checkbox checked="checked"> This checkbox is initially checked.</p> 10 <p><input type=radio name=radio> This radiobutton is initially unchecked.</p> 11 <p><input type=radio checked="checked" name=radio> This radiobutton is initially checked.</p> 12 <p><input type=hidden value="DEFAULT 13 DEFAULT"> This hidden field has the initial value "DEFAULT\nDEFAULT".</p> 14 <p><input type=text value=DEFAULT> This text field has the initial value "DEFAULT".</p> 15 <p><input type=search value=DEFAULT> This search field has the initial value "DEFAULT".</p> 16 <p><input type=tel value=DEFAULT> This phone number field has the initial value "DEFAULT".</p> 17 <p><input type=url value=https://default.invalid/> This URL field has the initial value "https://default.invalid/".</p> 18 <p><input type=email value=default@default.invalid> This email field has the initial value "default@default.invalid".</p> 19 <p><input type=password value=DEFAULT> This password field has the initial value "DEFAULT".</p> 20 <p><input type=date value=2015-01-01> This date field has the initial value "2015-01-01".</p> 21 <p><input type=month value=2015-01> This month field has the initial value "2015-01".</p> 22 <p><input type=week value=2015-W01> This week field has the initial value "2015-W01".</p> 23 <p><input type=time value=12:00> This time field has the initial value "12:00".</p> 24 <p><input type=datetime-local value=2015-01-01T12:00> This datetime (local) field has the initial value "2015-01-01T12:00".</p> 25 <p><input type=number value=1> This number field has the initial value "1".</p> 26 <p><input type=range value=1> This range control has the initial value "1".</p> 27 <p><input type=color value=#ff0000> This color picker has the initial value "#FF0000".</p> 28 <p><input type="button" value="Clone" onclick="clone();"></p> 29 </form> 30 <script> 31 setup(function() { 32 let form = document.getElementsByTagName("form")[0]; 33 let inputs = form.getElementsByTagName("input"); 34 inputs[0].checked = true; 35 inputs[1].checked = false; 36 inputs[2].checked = true; 37 inputs[4].value = "CHANGED\nCHANGED"; 38 inputs[5].value = "CHANGED"; 39 inputs[6].value = "CHANGED"; 40 inputs[7].value = "CHANGED"; 41 inputs[8].value = "https://changed.invalid/"; 42 inputs[9].value = "changed@changed.invalid"; 43 inputs[10].value = "CHANGED"; 44 inputs[11].value = "2016-01-01"; 45 inputs[12].value = "2016-01"; 46 inputs[13].value = "2016-W01"; 47 inputs[14].value = "12:30"; 48 inputs[15].value = "2016-01-01T12:30"; 49 inputs[16].value = "2"; 50 inputs[17].value = "2"; 51 inputs[18].value = "#00ff00"; 52 let clone = form.cloneNode(true); 53 document.body.appendChild(clone); 54 }); 55 test(function() { 56 let clone = document.getElementsByTagName("form")[1]; 57 let inputs = clone.getElementsByTagName("input"); 58 assert_true(inputs[0].checked, "Should have retained checked state"); 59 }, "Checkbox must retain checked state."); 60 test(function() { 61 let clone = document.getElementsByTagName("form")[1]; 62 let inputs = clone.getElementsByTagName("input"); 63 assert_false(inputs[1].checked, "Should have retained unchecked state"); 64 }, "Checkbox must retain unchecked state."); 65 test(function() { 66 let clone = document.getElementsByTagName("form")[1]; 67 let inputs = clone.getElementsByTagName("input"); 68 assert_true(inputs[2].checked, "Should have retained checked state"); 69 }, "Radiobutton must retain checked state."); 70 test(function() { 71 let clone = document.getElementsByTagName("form")[1]; 72 let inputs = clone.getElementsByTagName("input"); 73 assert_false(inputs[3].checked, "Should have retained unchecked state"); 74 }, "Radiobutton must retain unchecked state."); 75 test(function() { 76 let clone = document.getElementsByTagName("form")[1]; 77 let inputs = clone.getElementsByTagName("input"); 78 assert_equals(inputs[4].value, "CHANGED\nCHANGED", "Should have retained the changed value."); 79 }, "Hidden field must retain changed value."); 80 test(function() { 81 let clone = document.getElementsByTagName("form")[1]; 82 let inputs = clone.getElementsByTagName("input"); 83 assert_equals(inputs[5].value, "CHANGED", "Should have retained the changed value."); 84 }, "Text field must retain changed value."); 85 test(function() { 86 let clone = document.getElementsByTagName("form")[1]; 87 let inputs = clone.getElementsByTagName("input"); 88 assert_equals(inputs[6].value, "CHANGED", "Should have retained the changed value."); 89 }, "Search field must retain changed value."); 90 test(function() { 91 let clone = document.getElementsByTagName("form")[1]; 92 let inputs = clone.getElementsByTagName("input"); 93 assert_equals(inputs[7].value, "CHANGED", "Should have retained the changed value."); 94 }, "Phone number field must retain changed value."); 95 test(function() { 96 let clone = document.getElementsByTagName("form")[1]; 97 let inputs = clone.getElementsByTagName("input"); 98 assert_equals(inputs[8].value, "https://changed.invalid/", "Should have retained the changed value."); 99 }, "URL field must retain changed value."); 100 test(function() { 101 let clone = document.getElementsByTagName("form")[1]; 102 let inputs = clone.getElementsByTagName("input"); 103 assert_equals(inputs[9].value, "changed@changed.invalid", "Should have retained the changed value."); 104 }, "Email field must retain changed value."); 105 test(function() { 106 let clone = document.getElementsByTagName("form")[1]; 107 let inputs = clone.getElementsByTagName("input"); 108 assert_equals(inputs[10].value, "CHANGED", "Should have retained the changed value."); 109 }, "Password field must retain changed value."); 110 test(function() { 111 let clone = document.getElementsByTagName("form")[1]; 112 let inputs = clone.getElementsByTagName("input"); 113 assert_equals(inputs[11].value, "2016-01-01", "Should have retained the changed value."); 114 }, "Date field must retain changed value."); 115 test(function() { 116 let clone = document.getElementsByTagName("form")[1]; 117 let inputs = clone.getElementsByTagName("input"); 118 assert_equals(inputs[12].value, "2016-01", "Should have retained the changed value."); 119 }, "Month field must retain changed value."); 120 test(function() { 121 let clone = document.getElementsByTagName("form")[1]; 122 let inputs = clone.getElementsByTagName("input"); 123 assert_equals(inputs[13].value, "2016-W01", "Should have retained the changed value."); 124 }, "Week field must retain changed value."); 125 test(function() { 126 let clone = document.getElementsByTagName("form")[1]; 127 let inputs = clone.getElementsByTagName("input"); 128 assert_equals(inputs[14].value, "12:30", "Should have retained the changed value."); 129 }, "Time field must retain changed value."); 130 test(function() { 131 let clone = document.getElementsByTagName("form")[1]; 132 let inputs = clone.getElementsByTagName("input"); 133 assert_equals(inputs[15].value, "2016-01-01T12:30", "Should have retained the changed value."); 134 }, "Datetime (local) field must retain changed value."); 135 test(function() { 136 let clone = document.getElementsByTagName("form")[1]; 137 let inputs = clone.getElementsByTagName("input"); 138 assert_equals(inputs[16].value, "2", "Should have retained the changed value."); 139 }, "Number field must retain changed value."); 140 test(function() { 141 let clone = document.getElementsByTagName("form")[1]; 142 let inputs = clone.getElementsByTagName("input"); 143 assert_equals(inputs[17].value, "2", "Should have retained the changed value."); 144 }, "Range control must retain changed value."); 145 test(function() { 146 let clone = document.getElementsByTagName("form")[1]; 147 let inputs = clone.getElementsByTagName("input"); 148 assert_equals(inputs[18].value, "#00ff00", "Should have retained the changed value."); 149 }, "Color picker must retain changed value."); 150 </script>