| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/shadow-dom.js"></script> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id='sandbox'></div> |
| <pre id='console'></pre> |
| </body> |
| <script> |
| var borderColor; |
| |
| function borderColorOf(node) |
| { |
| return document.defaultView.getComputedStyle(node, null).getPropertyValue('border-color'); |
| } |
| |
| function borderColorShouldBe(selector, color) |
| { |
| var text = 'borderColorOf(getNodeInComposedTree("' + selector + '"))'; |
| shouldBeEqualToString(text, color); |
| } |
| |
| function borderColorShouldNotBe(selector, color) |
| { |
| var text = 'borderColorOf(getNodeInComposedTree("' + selector + '"))'; |
| var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"'; |
| shouldNotBe(text, unevaledString); |
| } |
| |
| function cleanUp() |
| { |
| document.getElementById('sandbox').innerHTML = ''; |
| } |
| |
| description('Test for casacde of treeboundary crossing rules.'); |
| |
| // Rules declared in inner treescope should win. |
| // TODO: V1 inverts this order. |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createDOM('style', {}, |
| document.createTextNode('p:empty { border: 1px solid blue; }')), |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('::content > p { border: 1px solid red; }')), |
| createDOM('div', {}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('::content > p { border: 1px solid green; }')), |
| createDOM('content', {})), |
| createDOM('content', {}))), |
| createDOM('p', {'id': 'target'}))); |
| |
| borderColorShouldBe('target', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| // Comparing important rules declared in outer treescope with important rules declared in inner treescope. |
| // Inner's should win. |
| sandbox.appendChild( |
| createDOM('div', {}, |
| createDOM('style', {}, |
| document.createTextNode('div { border: 1px solid red !important; }')), |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('#target { border: 1px solid green !important; }')), |
| createDOM('p', {'id': 'target'}))))); |
| |
| borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| </script> |
| </html> |
