part-name-idl.html (2078B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Shadow Parts - Part Name IDL</title> 5 <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly"> 6 <link href="http://www.google.com/" rel="author" title="Google"> 7 <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="support/shadow-helper.js"></script> 11 </head> 12 <body> 13 <span id="s_no_part"></span> 14 <span id="s_part" part="part1"></span> 15 <span id="s_2_parts" part="part1 part2"></span> 16 <script> 17 "use strict"; 18 test(function() { 19 const parts = s_no_part.part; 20 assert_equals(parts.length, 0); 21 assert_equals(parts.value, ""); 22 }, "Access to .part returns an empty DOMTokenList."); 23 test(function() { 24 const parts = s_2_parts.part; 25 assert_equals(parts.length, 2); 26 assert_equals(parts[0], "part1"); 27 assert_equals(parts[1], "part2"); 28 assert_equals(parts.value, "part1 part2"); 29 }, "Multiple names give a DOMTokenList with multiple entries."); 30 test(function() { 31 const parts = s_no_part.part; 32 assert_equals(parts.length, 0); 33 assert_equals(parts.value, ""); 34 parts.add("part1"); 35 assert_equals(parts.length, 1); 36 assert_equals(parts.value, "part1"); 37 }, "DOMTokenList created by access is persisted."); 38 test(function() { 39 const parts = s_part.part; 40 assert_equals(parts.length, 1); 41 assert_equals(parts.value, "part1"); 42 parts.add("part2"); 43 assert_equals(parts.length, 2); 44 assert_equals(parts.value, "part1 part2"); 45 assert_equals(s_part.getAttribute("part"), parts.value); 46 parts.remove("part1"); 47 assert_equals(parts.length, 1); 48 assert_equals(parts.value, "part2"); 49 assert_equals(s_part.getAttribute("part"), parts.value); 50 }, "Changes in DOMTokenList are refected in attribute."); 51 </script> 52 </body> 53 </html>