pseudo-class-defined-customized-builtins.html (3665B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-defined"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <iframe id="iframe"></iframe> 6 <script> 7 const testList = [ 8 { tag_name: 'abbr', is: 'my-abbr', defined: false }, 9 { tag_name: 'p', is: '', defined: false }, 10 ]; 11 12 // Setup iframe to test the parser. 13 const neither = 'rgb(255, 0, 0)'; 14 const defined = 'rgb(255, 165, 0)'; 15 const not_defined = 'rgb(0, 0, 255)'; 16 const iframe = document.getElementById("iframe"); 17 iframe.srcdoc = `<style> 18 * { color:${neither}; } 19 :defined { color:${defined}; } 20 :not(:defined) { color:${not_defined}; } 21 </style>` 22 + testList.map(d => `<${d.tag_name} is="${d.is}"></${d.tag_name}>`).join(''); 23 setup({ explicit_done: true }); 24 iframe.onload = () => { 25 const doc = iframe.contentDocument; 26 const doc_without_browsing_context = doc.implementation.createHTMLDocument(); 27 for (const data of testList) { 28 // Test elements inserted by parser. 29 test_defined(data.defined, doc.getElementsByTagName(data.tag_name)[0], `<${data.tag_name} is="${data.is}">`); 30 31 // Test DOM createElement() methods. 32 let try_upgrade = !data.defined && (data.is === undefined || data.is.length > 0); 33 test_defined_for_createElement(data.defined, try_upgrade, doc, data.tag_name, data.is); 34 35 // Documents without browsing context should behave the same. 36 test_defined_for_createElement(data.defined, false, doc_without_browsing_context, data.tag_name, data.is, 'Without browsing context: '); 37 } 38 39 done(); 40 }; 41 42 function test_defined_for_createElement(defined, should_test_change, doc, tag_name, is, description = '') { 43 let has_is = is !== undefined; 44 // Test document.createElement(). 45 let element = doc.createElement(tag_name, { is }); 46 doc.body.appendChild(element); 47 test_defined(defined, element, `${description}createElement("${tag_name}", is:"${is}")`); 48 49 // Test document.createElementNS(). 50 let html_element = doc.createElementNS('http://www.w3.org/1999/xhtml', tag_name, { is }) 51 doc.body.appendChild(html_element); 52 test_defined(defined, html_element, `${description}createElementNS("http://www.w3.org/1999/xhtml", "${tag_name}", is:"${is}")`); 53 54 // If the element namespace is not HTML, it should be "uncustomized"; i.e., "defined". 55 let svg_element = doc.createElementNS('http://www.w3.org/2000/svg', tag_name, { is }); 56 doc.body.appendChild(svg_element); 57 test_defined(true, svg_element, `${description}createElementNS("http://www.w3.org/2000/svg", "${tag_name}", is:"${is}")`); 58 59 // Test ":defined" changes when the custom element was defined. 60 if (should_test_change) { 61 let w = doc.defaultView; 62 assert_false(!w, 'defaultView required to test change'); 63 w.customElements.define(is, class extends w.HTMLElement {}, { extends: tag_name }); 64 test_defined(true, element, `Upgraded ${description}createElement("${tag_name}", is:"${is}")`); 65 test_defined(true, html_element, `Upgraded ${description}createElementNS("http://www.w3.org/1999/xhtml", "${tag_name}", is:"${is}")`); 66 } 67 } 68 69 function test_defined(expected, element, description) { 70 test(() => { 71 assert_equals(element.matches(':defined'), expected, 'matches(":defined")'); 72 assert_equals(element.matches(':not(:defined)'), !expected, 'matches(":not(:defined")'); 73 const view = element.ownerDocument.defaultView; 74 if (!view) 75 return; 76 const style = view.getComputedStyle(element); 77 assert_equals(style.color, expected ? defined : not_defined, 'getComputedStyle'); 78 }, `${description} should ${expected ? 'be' : 'not be'} :defined`); 79 } 80 81 </script>