| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/shadow-dom.js"></script> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id='sandbox'> |
| </div> |
| </body> |
| <script> |
| var borderColor; |
| |
| function colorOf(node) |
| { |
| return document.defaultView.getComputedStyle(node, null).getPropertyValue('color'); |
| } |
| |
| function colorShouldBe(selector, color) |
| { |
| var text = 'colorOf(getNodeInComposedTree("' + selector + '"))'; |
| shouldBeEqualToString(text, color); |
| } |
| |
| function colorShouldNotBe(selector, color) |
| { |
| var text = 'colorOf(getNodeInComposedTree("' + selector + '"))'; |
| var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"'; |
| shouldNotBe(text, unevaledString); |
| } |
| |
| function cleanUp() |
| { |
| document.getElementById('sandbox').innerHTML = ''; |
| } |
| |
| description('crbug.com/337573: Test direct/indirect adjucent and positinal rules under shadow root.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('#child1.target + #child2 { color: green }')), |
| createDOM('div', {'id': 'child1'}, |
| document.createTextNode('first div')), |
| createDOM('div', {'id': 'child2'}, |
| document.createTextNode('second div'))))); |
| document.body.offsetLeft; |
| getNodeInComposedTree('host/child1').className = 'target'; |
| colorShouldBe('host/child2', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('#child1.target ~ div { color: green }')), |
| createDOM('div', {'id': 'child1'}, |
| document.createTextNode('first div')), |
| createDOM('div', {'id': 'child2'}, |
| document.createTextNode('second div')), |
| createDOM('div', {'id': 'child3'}, |
| document.createTextNode('third div'))))); |
| document.body.offsetLeft; |
| getNodeInComposedTree('host/child1').className = 'target'; |
| colorShouldBe('host/child2', 'rgb(0, 128, 0)'); |
| colorShouldBe('host/child3', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| // Test div:first-child under shadow-root. |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'child1'}, |
| document.createTextNode('first div')), |
| createDOM('div', {'id': 'child2'}, |
| document.createTextNode('second div')), |
| createDOM('div', {'id': 'child3'}, |
| document.createTextNode('third div')), |
| createDOM('style', {}, |
| document.createTextNode('div:first-child { color: green }'))))); |
| |
| colorShouldBe('host/child1', 'rgb(0, 128, 0)'); |
| colorShouldNotBe('host/child2', 'rgb(0, 128, 0)'); |
| colorShouldNotBe('host/child3', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| // Test div:last-child under shadow-root. |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('div:last-child { color: green }')), |
| createDOM('div', {'id': 'child1'}, |
| document.createTextNode('first div')), |
| createDOM('div', {'id': 'child2'}, |
| document.createTextNode('second div')), |
| createDOM('div', {'id': 'child3'}, |
| document.createTextNode('third div'))))); |
| |
| colorShouldNotBe('host/child1', 'rgb(0, 128, 0)'); |
| colorShouldNotBe('host/child2', 'rgb(0, 128, 0)'); |
| colorShouldBe('host/child3', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| // Test div:nth-child under shadow-root. |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('div:nth-child(3) { color: green }')), |
| createDOM('div', {'id': 'child1'}, |
| document.createTextNode('first div')), |
| createDOM('div', {'id': 'child2'}, |
| document.createTextNode('second div')), |
| createDOM('div', {'id': 'child3'}, |
| document.createTextNode('third div'))))); |
| |
| colorShouldNotBe('host/child1', 'rgb(0, 128, 0)'); |
| colorShouldBe('host/child2', 'rgb(0, 128, 0)'); |
| colorShouldNotBe('host/child3', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| // Test div:first-of-type under shadow-root. |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('span', {}, |
| document.createTextNode('first span')), |
| createDOM('div', {'id': 'child1'}, |
| document.createTextNode('first div')), |
| createDOM('div', {'id': 'child2'}, |
| document.createTextNode('second div')) , |
| createDOM('div', {'id': 'child3'}, |
| document.createTextNode('third div')), |
| createDOM('style', {}, |
| document.createTextNode('div:first-of-type { color: green }'))))); |
| |
| colorShouldBe('host/child1', 'rgb(0, 128, 0)'); |
| colorShouldNotBe('host/child2', 'rgb(0, 128, 0)'); |
| colorShouldNotBe('host/child3', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| // Test div:last-of-type under shadow-root. |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('div:last-of-type { color: green }')), |
| createDOM('span', {}, |
| document.createTextNode('first span')), |
| createDOM('div', {'id': 'child1'}, |
| document.createTextNode('first div')), |
| createDOM('div', {'id': 'child2'}, |
| document.createTextNode('second div')) , |
| createDOM('div', {'id': 'child3'}, |
| document.createTextNode('last div')), |
| createDOM('span', {'id': 'child4'}, |
| document.createTextNode('last span'))))); |
| |
| colorShouldNotBe('host/child1', 'rgb(0, 128, 0)'); |
| colorShouldNotBe('host/child2', 'rgb(0, 128, 0)'); |
| colorShouldBe('host/child3', 'rgb(0, 128, 0)'); |
| colorShouldNotBe('host/child4', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| // Test div:nth-of-type under shadow-root. |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('div:nth-of-type(2) { color: green }')), |
| createDOM('span', {}, |
| document.createTextNode('first span')), |
| createDOM('div', {'id': 'child1'}, |
| document.createTextNode('first div')), |
| createDOM('span', {}, |
| document.createTextNode('second span')), |
| createDOM('div', {'id': 'child2'}, |
| document.createTextNode('second div')) , |
| createDOM('div', {'id': 'child3'}, |
| document.createTextNode('last div')), |
| createDOM('span', {}, |
| document.createTextNode('last span'))))); |
| |
| colorShouldNotBe('host/child1', 'rgb(0, 128, 0)'); |
| colorShouldBe('host/child2', 'rgb(0, 128, 0)'); |
| colorShouldNotBe('host/child3', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| </script> |
| </html> |
