test-001.html (2083B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM Test: A_08_02_01</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 are not accessible using document DOM object's 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_equals(d.querySelector('#' + tagName + '_id'), null, 'Form-associated element ' + tagName + 36 ' in shadow tree must not be accessible using owner\'s document tree accessors'); 37 }); 38 }, 'A_08_02_01_T01'); 39 40 41 //test form elements 42 test(function () { 43 var d = newHTMLDocument(); 44 45 var form = d.createElement('form'); 46 d.body.appendChild(form); 47 48 var div = d.createElement('div'); 49 form.appendChild(div); 50 s = div.attachShadow({mode: 'open'}); 51 52 HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { 53 54 var el = d.createElement(tagName); 55 el.setAttribute('id', tagName + '_id'); 56 s.appendChild(el); 57 58 assert_equals(d.querySelector('#' + tagName + '_id'), null, 'Form element ' + tagName + 59 ' in shadow tree must not be accessible using owner\'s document tree accessors'); 60 }); 61 }, 'A_08_02_01_T02'); 62 </script> 63 </body> 64 </html>