select-option-optgroup.html (1824B)
1 <!DOCTYPE html> 2 <title>Selectedness is updated during moveBefore()</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 7 <select> 8 <option value=A>A</option> 9 <optgroup label=Optgroup> 10 <option value=B>B</option> 11 </optgroup> 12 <option value=C>C</option> 13 </select> 14 15 <script> 16 test(t => { 17 const optionA = document.querySelector('option[value=A]'); 18 const optionB = document.querySelector('option[value=B]'); 19 const optionC = document.querySelector('option[value=C]'); 20 21 assert_true(optionA.selected, "A is selected by default"); 22 assert_false(optionB.selected, "B not selected before first move"); 23 assert_false(optionC.selected, "C not selected before first move"); 24 25 // `moveBefore()`, like `insertBefore()` and kin, leaves a text-only-rendered 26 // non-select-owned <option> tag in the "selected" state. 27 document.body.moveBefore(optionA, null); 28 assert_true(optionA.selected, "A STILL selected after it is moved out"); 29 assert_true(optionB.selected, "B becomes selected after first move"); 30 assert_false(optionC.selected, "C is not selected after first move"); 31 32 document.body.moveBefore(optionB, null); 33 assert_true(optionA.selected, "A STILL selected after second move"); 34 assert_true(optionB.selected, "B STILL selected after it is moved out"); 35 assert_true(optionC.selected, "C becomes selected after second move"); 36 37 // Move A back into <select> before C. 38 document.querySelector('select').moveBefore(optionA, optionC); 39 assert_true(optionA.selected, "A STILL selected after it is moved back in"); 40 assert_true(optionB.selected, "B STILL selected after third move"); 41 assert_false(optionC.selected, "C no longer selected after third move"); 42 }, "Option selectedness is updated on option and optgroup DOM moves"); 43 </script>