| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| #webkit-test * { |
| background-color: white; |
| } |
| #webkit-test :default { |
| background-color: rgb(1, 2, 3); |
| } |
| </style> |
| </head> |
| <body> |
| <div style="display:none" id="webkit-test"> |
| <button id="button1">Button1</button> |
| <form> |
| <input id="input1"> |
| <button id="button2">Button2</button> |
| </form> |
| <form> |
| <input id="input2" type="submit"> |
| <button id="button3">Button3</button> |
| </form> |
| <form> |
| <input id="input3" type="image"> |
| <button id="button4">Button4</button> |
| </form> |
| <form id="free-form-1"> |
| </form> |
| <input id="input4" type="submit" form="free-form-1"> |
| <button id="button5" form="free-form-1">Button5</button> |
| <form id="free-form-2"> |
| </form> |
| <button id="button6" form="free-form-2">Button6</button> |
| <input id="input5" type="image" form="free-form-2"> |
| <input type="checkbox" id="input6"> |
| <input type="checkbox" id="input7" checked> |
| <input type="radio" id="input8"> |
| <input type="radio" id="input9" checked> |
| <input type="radio" id="input10" name="group1"> |
| <input type="radio" id="input11" name="group1" checked> |
| <option id="option1">Option</option> |
| <option selected id="option2">Option</option> |
| <select> |
| <option id="option3">Option</option> |
| <option selected id="option4">Option</option> |
| </select> |
| </div> |
| </body> |
| <script> |
| "use strict"; |
| description('Check the basic features of the :default pseudo class'); |
| |
| function elementsStyledWithDefaultSelector() { |
| let elements = []; |
| for (let element of document.querySelectorAll("#webkit-test *")) { |
| if (getComputedStyle(element).backgroundColor === 'rgb(1, 2, 3)') { |
| elements.push(element.id); |
| } |
| } |
| return elements; |
| } |
| |
| function elementsMatchingDefaultSelector() { |
| let elements = []; |
| for (let element of document.querySelectorAll(":default")) { |
| elements.push(element.id); |
| } |
| return elements; |
| } |
| |
| debug("Initial State"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Changing input1 input a submit button, it should become the form's default button"); |
| var input1 = document.getElementById("input1"); |
| input1.type = "submit"; |
| shouldBe('elementsStyledWithDefaultSelector()', '["input1", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["input1", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Changing button order in the first form"); |
| input1.parentElement.appendChild(input1); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Removing button2 from its form"); |
| var button2 = document.getElementById("button2"); |
| button2.parentElement.removeChild(button2); |
| shouldBe('elementsStyledWithDefaultSelector()', '["input1", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["input1", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBeFalse('button2.matches(":default")'); |
| |
| debug("Adding back button2"); |
| input1.parentElement.insertBefore(button2, input1); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting button2 type to button"); |
| button2.setAttribute("type", "button"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["input1", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["input1", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting button2 type to submit"); |
| button2.setAttribute("type", "submit"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting button2 type to reset"); |
| button2.setAttribute("type", "reset"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["input1", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["input1", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting button2 type to webkit"); |
| button2.setAttribute("type", "webkit"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Removing the type attribute from button2"); |
| button2.removeAttribute("type"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Removing input1, button2 is still the first button"); |
| input1.parentElement.removeChild(input1); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button2", "input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBeFalse('input1.matches(":default")'); |
| |
| debug("Removing the form from the tree"); |
| var firstRemovedForm = button2.parentElement; |
| firstRemovedForm.parentElement.removeChild(firstRemovedForm); |
| shouldBe('elementsStyledWithDefaultSelector()', '["input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBeTrue('button2.matches(":default")'); |
| shouldBeFalse('input1.matches(":default")'); |
| |
| // Give GC a chance to collect. |
| firstRemovedForm = undefined; |
| input1 = undefined; |
| button2 = undefined; |
| |
| debug("Changing the type of input2 to password"); |
| var input2 = document.getElementById("input2"); |
| input2.setAttribute("type", "password"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Changing the type of input2 to image"); |
| input2.setAttribute("type", "image"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["input2", "input3", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Moving input2 to the form of input3, before input3"); |
| var input3 = document.getElementById("input3"); |
| input3.parentElement.insertBefore(input2, input3); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Moving button5 inside the first form, but button5 has a form attribute"); |
| var button3 = document.getElementById("button3"); |
| var button5 = document.getElementById("button5"); |
| button3.parentElement.insertBefore(button5, button3); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button5", "button3", "input2", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button5", "button3", "input2", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Removing button 5"); |
| button5.parentElement.removeChild(button5); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBeFalse('button5.matches(":default")'); |
| button5 = undefined; |
| |
| debug("Moving input5 above button 6"); |
| var input5 = document.getElementById("input5"); |
| var button6 = document.getElementById("button6"); |
| input5.parentElement.insertBefore(input5, button6) |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input4", "input5", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input4", "input5", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Changing input5's type to submit"); |
| input5.type = "SUBMIT"; |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input4", "input5", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input4", "input5", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Changing input5's type to reset"); |
| input5.type = "reset"; |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input4", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Removing free-form-1"); |
| var freeForm1 = document.getElementById("free-form-1"); |
| freeForm1.parentElement.removeChild(freeForm1); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| freeForm1 = undefined; |
| |
| debug("Changing input5's type to image"); |
| input5.type = "image"; |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input5", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input5", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Removing input5"); |
| input5.parentElement.removeChild(input5); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "button6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBeFalse('input5.matches(":default")'); |
| input5 = undefined; |
| |
| debug("Removing button6"); |
| button6.parentElement.removeChild(button6); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBeFalse('button6.matches(":default")'); |
| button6 = undefined; |
| |
| debug("Setting input6 as checked"); |
| var input6 = document.getElementById("input6"); |
| // Interestingly, the selector looks for the attribute, not the state. |
| input6.checked = true; |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting the checked attribute to input6"); |
| input6.setAttribute("checked", ""); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting input7 as unchecked"); |
| var input7 = document.getElementById("input7"); |
| // Interestingly, the selector looks for the attribute, not the state. |
| input7.checked = false; |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting input7's checked attribute to 'WebKit'"); |
| input7.setAttribute("checked", "WebKit"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input6", "input7", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input6", "input7", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Removing input7's checked attribute"); |
| input7.removeAttribute("checked"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input6", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input6", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting input7's selected attribute"); |
| input7.setAttribute("selected", ""); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input6", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input6", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Removing input6"); |
| input6.parentElement.removeChild(input6); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input9", "input11", "option2", "option4"]'); |
| shouldBeTrue('input6.matches(":default")'); |
| input6 = undefined; |
| |
| debug("Setting input8 as checked"); |
| var input8 = document.getElementById("input8"); |
| // Interestingly, the selector looks for the attribute, not the state. |
| input8.checked = true; |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting the checked attribute to input8"); |
| input8.setAttribute("checked", ""); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting input9 as unchecked"); |
| var input9 = document.getElementById("input9"); |
| // Interestingly, the selector looks for the attribute, not the state. |
| input9.checked = false; |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Setting input9's checked attribute to 'WebKit'"); |
| input9.setAttribute("checked", "WebKit"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "input9", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "input9", "input11", "option2", "option4"]'); |
| |
| debug("Removing input9's checked attribute"); |
| input9.removeAttribute("checked"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "input11", "option2", "option4"]'); |
| |
| debug("Setting input9's selected attribute"); |
| input9.setAttribute("selected", ""); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "input11", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "input11", "option2", "option4"]'); |
| |
| debug("Removing input11"); |
| var input11 = document.getElementById("input11"); |
| input11.parentElement.removeChild(input11); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "option2", "option4"]'); |
| shouldBeTrue('input11.matches(":default")'); |
| input11 = undefined; |
| |
| debug("Add the selected attribute to option1"); |
| var option1 = document.getElementById("option1"); |
| option1.setAttribute("selected", ""); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "option1", "option2", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "option1", "option2", "option4"]'); |
| |
| debug("Remove the selected attribute from option2"); |
| var option2 = document.getElementById("option2"); |
| option2.removeAttribute("selected"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "option1", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "option1", "option4"]'); |
| |
| debug("Set the checked attribute on option2"); |
| var option2 = document.getElementById("option2"); |
| option2.setAttribute("checked", ""); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "option1", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "option1", "option4"]'); |
| |
| debug("Add the selected attribute to false on option3"); |
| var option3 = document.getElementById("option3"); |
| option3.setAttribute("selected", "false"); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "option1", "option3", "option4"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "option1", "option3", "option4"]'); |
| |
| debug("Remove option4"); |
| var option4 = document.getElementById("option4"); |
| option4.parentElement.removeChild(option4); |
| shouldBe('elementsStyledWithDefaultSelector()', '["button3", "input2", "input8", "option1", "option3"]'); |
| shouldBe('elementsMatchingDefaultSelector()', '["button3", "input2", "input8", "option1", "option3"]'); |
| shouldBeTrue('option4.matches(":default")'); |
| option4 = undefined; |
| |
| gc(); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
