test-002.html (3267B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM Test: A_08_02_02</title> 5 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> 6 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#html-forms"> 7 <meta name="assert" content="HTML Elements in shadow trees: Form elements and form-associated elements in shadow tree must be accessible using shadow tree accessors"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="../../../../html/resources/common.js"></script> 11 </head> 12 <body> 13 <div id="log"></div> 14 <script> 15 //test form-associated elements 16 test(function () { 17 var d = newHTMLDocument(); 18 19 var form = d.createElement('form'); 20 form.setAttribute('id', 'form_id'); 21 d.body.appendChild(form); 22 23 var div = d.createElement('div'); 24 d.body.appendChild(div); 25 var s = div.attachShadow({mode: 'open'}); 26 27 28 HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { 29 30 var el = d.createElement(tagName); 31 el.setAttribute('form', 'form_id'); 32 el.setAttribute('id', tagName + '_id'); 33 s.appendChild(el); 34 35 assert_true(s.querySelector('#' + tagName + '_id') != null, 'Form-associated element ' + tagName + 36 ' in shadow tree must be accessible shadow tree accessors'); 37 assert_equals(s.querySelector('#' + tagName + '_id').getAttribute('id'), tagName + '_id', 38 'Form-associated element ' + tagName + ' in shadow tree must be accessible shadow tree accessors'); 39 }); 40 }, 'A_08_02_02_T01'); 41 42 43 //test form elements 44 test(function () { 45 var d = newHTMLDocument(); 46 47 var form = d.createElement('form'); 48 d.body.appendChild(form); 49 50 var div = d.createElement('div'); 51 form.appendChild(div); 52 var s = div.attachShadow({mode: 'open'}); 53 54 HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { 55 56 var el = d.createElement(tagName); 57 el.setAttribute('id', tagName + '_id'); 58 s.appendChild(el); 59 60 assert_true(s.querySelector('#' + tagName + '_id') != null, 'Form-associated element ' + tagName + 61 ' in shadow tree must be accessible shadow tree accessors'); 62 assert_equals(s.querySelector('#' + tagName + '_id').getAttribute('id'), tagName + '_id', 63 'Form element ' + tagName + ' in shadow tree must be accessible shadow tree accessors'); 64 }); 65 }, 'A_08_02_02_T02'); 66 67 68 //test distributed form elements 69 test(function () { 70 var d = newHTMLDocument(); 71 72 HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { 73 74 var form = d.createElement('form'); 75 d.body.appendChild(form); 76 77 var div = d.createElement('div'); 78 form.appendChild(div); 79 80 var el = d.createElement(tagName); 81 el.setAttribute('id', tagName + '_id'); 82 el.setAttribute('slot', tagName + '_slot'); 83 div.appendChild(el); 84 85 var s = div.attachShadow({mode: 'open'}); 86 s.innerHTML = '<slot name="' + tagName + '_slot"></slot>'; 87 88 assert_true(s.querySelector('#' + tagName + '_id') == null, 'Distributed form-associated element ' + tagName + 89 ' in shadow tree must not be accessible shadow tree accessors'); 90 }); 91 }, 'A_08_02_02_T03'); 92 </script> 93 </body> 94 </html>