HTMLSourceElement.html (7152B)
1 <!DOCTYPE html> 2 <title>Custom Elements: CEReactions on HTMLSourceElement interface</title> 3 <link rel="author" title="Intel" href="http://www.intel.com"> 4 <meta name="assert" content="src, type, srcset, sizes, media of 5 HTMLSourceElement interface must have CEReactions"> 6 <meta name="help" content="https://html.spec.whatwg.org/#the-source-element"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="../../resources/custom-elements-helpers.js"></script> 10 <script src="../resources/reactions.js"></script> 11 12 <video controls id='video' width='5' height='5'></video> 13 <picture id='pic'> 14 <img src='/images/green-1x1.png'> 15 </picture> 16 <body> 17 <script> 18 19 function getParentElement(id) { 20 let element = document.getElementById(id); 21 return element; 22 } 23 24 testReflectAttributeWithParentNode( 25 'src', 'src', '/media/video.webm', 26 '/media/white.mp4', 'src on HTMLSourceElement', 'source', 27 () => getParentElement('video'), HTMLSourceElement 28 ); 29 testReflectAttributeWithDependentAttributes( 30 'type', 'type', 'video/mp4; codecs="mp4v.20.240, mp4a.40.2"', 31 'video/mp4; codecs="mp4v.20.8, mp4a.40.2"', 'type on HTMLSourceElement', 32 'source', 33 () => getParentElement('video'), 34 instance => instance.setAttribute('src', '/media/white.mp4'), HTMLSourceElement 35 ); 36 37 function testReflectAttributeWithContentValuesAndParentNode( 38 jsAttributeName, contentAttributeName, validValue1, 39 contentValue1, validValue2, contentValue2, 40 name, elementName, getParentElement, 41 interfaceName) { 42 43 let parentElement = getParentElement(); 44 45 test(() => { 46 let element = define_build_in_custom_element( 47 [contentAttributeName], interfaceName, elementName 48 ); 49 let instance = document.createElement(elementName, { is: element.name }); 50 51 assert_array_equals(element.takeLog().types(), ['constructed']); 52 // source element as a child of a picture element, before the img element 53 parentElement.prepend(instance); 54 assert_array_equals(element.takeLog().types(), ['connected']); 55 instance[jsAttributeName] = validValue1; 56 let logEntries = element.takeLog(); 57 assert_array_equals(logEntries.types(), ['attributeChanged']); 58 assert_attribute_log_entry( 59 logEntries.last(), 60 { name: contentAttributeName, oldValue: null, 61 newValue: contentValue1, namespace: null 62 } 63 ); 64 }, name + ' must enqueue an attributeChanged reaction when adding a new attribute'); 65 66 test(() => { 67 let element = define_build_in_custom_element( 68 [contentAttributeName], interfaceName, elementName 69 ); 70 let instance = document.createElement(elementName, { is: element.name }); 71 // source element as a child of a picture element, before the img element 72 parentElement.prepend(instance); 73 74 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 75 instance[jsAttributeName] = validValue1; 76 assert_array_equals(element.takeLog().types(), ['attributeChanged']); 77 instance[jsAttributeName] = validValue2; 78 let logEntries = element.takeLog(); 79 assert_array_equals(logEntries.types(), ['attributeChanged']); 80 assert_attribute_log_entry( 81 logEntries.last(), 82 { name: contentAttributeName, oldValue: contentValue1, 83 newValue: contentValue2, namespace: null 84 } 85 ); 86 }, name + ' must enqueue an attributeChanged reaction when replacing an existing attribute'); 87 } 88 89 function testReflectAttributeWithParentNode( 90 jsAttributeName, contentAttributeName, validValue1, 91 validValue2, name, elementName, 92 getParentElement, interfaceName) { 93 94 testReflectAttributeWithContentValuesAndParentNode( 95 jsAttributeName, contentAttributeName, validValue1, 96 validValue1, validValue2, validValue2, 97 name, elementName, getParentElement, 98 interfaceName 99 ); 100 } 101 102 function testReflectAttributeWithContentValuesAndDependentAttributes( 103 jsAttributeName, contentAttributeName, validValue1, 104 contentValue1, validValue2, contentValue2, 105 name, elementName, getParentElement, 106 setAttributes, interfaceName) { 107 108 let parentElement = getParentElement(); 109 110 test(() => { 111 let element = define_build_in_custom_element( 112 [contentAttributeName], interfaceName, elementName 113 ); 114 let instance = document.createElement(elementName, { is: element.name }); 115 116 assert_array_equals(element.takeLog().types(), ['constructed']); 117 // source element as a child of a picture element, before the img element 118 parentElement.prepend(instance); 119 assert_array_equals(element.takeLog().types(), ['connected']); 120 setAttributes(instance); 121 instance[jsAttributeName] = validValue1; 122 let logEntries = element.takeLog(); 123 assert_array_equals(logEntries.types(), ['attributeChanged']); 124 assert_attribute_log_entry( 125 logEntries.last(), 126 { name: contentAttributeName, oldValue: null, 127 newValue: contentValue1, namespace: null 128 } 129 ); 130 }, name + ' must enqueue an attributeChanged reaction when adding a new attribute'); 131 132 test(() => { 133 let element = define_build_in_custom_element( 134 [contentAttributeName], interfaceName, elementName 135 ); 136 let instance = document.createElement(elementName, { is: element.name }); 137 // source element as a child of a picture element, before the img element 138 parentElement.prepend(instance); 139 setAttributes(instance); 140 instance[jsAttributeName] = validValue1; 141 142 assert_array_equals( 143 element.takeLog().types(), 144 ['constructed', 'connected', 'attributeChanged'] 145 ); 146 instance[jsAttributeName] = validValue2; 147 let logEntries = element.takeLog(); 148 assert_array_equals(logEntries.types(), ['attributeChanged']); 149 assert_attribute_log_entry( 150 logEntries.last(), 151 { name: contentAttributeName, oldValue: contentValue1, 152 newValue: contentValue2, namespace: null 153 } 154 ); 155 }, name + ' must enqueue an attributeChanged reaction when replacing an existing attribute'); 156 } 157 158 function testReflectAttributeWithDependentAttributes( 159 jsAttributeName, contentAttributeName, validValue1, 160 validValue2, name, elementName, 161 getParentElement, setAttributes, interfaceName) { 162 163 testReflectAttributeWithContentValuesAndDependentAttributes( 164 jsAttributeName, contentAttributeName, validValue1, 165 validValue1, validValue2, validValue2, 166 name, elementName, getParentElement, 167 setAttributes, interfaceName); 168 } 169 170 testReflectAttributeWithParentNode( 171 'srcset', 'srcset', '/images/green.png', 172 '/images/green-1x1.png', 'srcset on HTMLSourceElement', 'source', 173 () => getParentElement('pic'), HTMLSourceElement 174 ); 175 testReflectAttributeWithDependentAttributes( 176 'sizes', 'sizes', '(max-width: 32px) 28px', 177 '(max-width: 48px) 44px', 'sizes on HTMLSourceElement', 'source', 178 () => getParentElement('pic'), 179 instance => instance.setAttribute('srcset', '/images/green.png 3x'), 180 HTMLSourceElement 181 ); 182 testReflectAttributeWithDependentAttributes( 183 'media', 'media', '(max-width: 7px)', 184 '(max-width: 9px)', 'media on HTMLSourceElement', 'source', 185 () => getParentElement('pic'), 186 instance => instance.setAttribute('srcset', '/images/green.png 3x'), 187 HTMLSourceElement 188 ); 189 190 </script> 191 </body>