adoptedstylesheets-observablearray.html (3451B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Adoptedstylesheets as ObservableArray</title> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#extensions-to-the-document-or-shadow-root-interface"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <span id=target>Test Span</span> 10 <div id="divNonConstructed" class="nonConstructed"></div> 11 <style> 12 #target {background-color: red;} 13 </style> 14 15 <script> 16 17 const shadowRootNonConstructed = divNonConstructed.attachShadow({mode:'open'}) 18 nonConstructedStyle = document.createElement("style"); 19 shadowRootNonConstructed.appendChild(nonConstructedStyle); 20 nonConstructedStyle.sheet.insertRule(".nonConstructed { color: red; }", 0); 21 const nonConstructedStyleSheet = nonConstructedStyle.sheet; 22 23 function assert_is(targetStyle, color) { 24 assert_equals(targetStyle.getPropertyValue('background-color'), color); 25 } 26 27 function testRoot(d, targetStyle) { 28 const red = 'rgb(255, 0, 0)'; 29 const green = 'rgb(0, 255, 0)'; 30 const blue = 'rgb(0, 0, 255)'; 31 32 const sheet1 = new CSSStyleSheet(); 33 sheet1.replaceSync('#target {background-color:lime !important;}'); 34 const sheet2 = new CSSStyleSheet(); 35 sheet2.replaceSync('#target {background-color:blue !important;}'); 36 assert_equals(d.adoptedStyleSheets.length, 0); 37 assert_is(targetStyle, red); 38 39 d.adoptedStyleSheets = [sheet1]; 40 assert_equals(d.adoptedStyleSheets.length, 1); 41 assert_is(targetStyle, green); 42 43 d.adoptedStyleSheets.push(sheet2); 44 assert_equals(d.adoptedStyleSheets.length, 2); 45 assert_is(targetStyle, blue); 46 47 d.adoptedStyleSheets.pop(); 48 assert_equals(d.adoptedStyleSheets.length, 1); 49 assert_is(targetStyle, green); 50 51 d.adoptedStyleSheets.push(sheet2); 52 d.adoptedStyleSheets.reverse(); 53 assert_equals(d.adoptedStyleSheets.length, 2); 54 assert_is(targetStyle, green); 55 56 d.adoptedStyleSheets.splice(1, 1); 57 assert_equals(d.adoptedStyleSheets.length, 1); 58 assert_is(targetStyle, blue); 59 d.adoptedStyleSheets.splice(0, 1, sheet1); 60 assert_equals(d.adoptedStyleSheets.length, 1); 61 assert_is(targetStyle, green); 62 63 // Adding non-constructed stylesheet to AdoptedStyleSheets is not allowed. 64 assert_throws_dom('NotAllowedError', () => { document.adoptedStyleSheets.push(nonConstructedStyleSheet); }); 65 66 assert_throws_js(TypeError, () => { document.adoptedStyleSheets.push("foo"); }); 67 } 68 69 test(function() { 70 const target = document.querySelector('#target'); 71 const targetStyle = window.getComputedStyle(target); 72 testRoot(document, targetStyle); 73 }, "document.adoptedStyleSheets should allow mutation in-place"); 74 75 test(function() { 76 const host = document.createElement('div'); 77 document.body.appendChild(host); 78 const shadow = host.attachShadow({mode: 'open'}); 79 shadow.innerHTML = '<span id=target>Test Shadow Span</span><style>#target{background-color: red;}</style>'; 80 const target = shadow.querySelector('#target'); 81 const targetStyle = window.getComputedStyle(target); 82 testRoot(shadow, targetStyle); 83 }, "shadowRoot.adoptedStyleSheets should allow mutation in-place"); 84 85 test(function() { 86 assert_true(Array.isArray(document.adoptedStyleSheets)); 87 const host = document.createElement('div'); 88 document.body.appendChild(host); 89 const shadow = host.attachShadow({mode: 'open'}); 90 assert_true(Array.isArray(shadow.adoptedStyleSheets)); 91 }, "adoptedStyleSheets should return true for isArray()"); 92 </script>