| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="contenteditable-host1" contenteditable></div> |
| <div id="contenteditable-host2" contenteditable></div> |
| <div id="contenteditable-host3" contenteditable></div> |
| <div id="non-contenteditable-host1"></div> |
| <div id="non-contenteditable-host2"></div> |
| <div id="non-contenteditable-host3"></div> |
| <div id="sandbox"></div> |
| <div id="sandbox2"></div> |
| <pre id="console"></pre> |
| <script> |
| description("Tests to ensure that a '-webkit-user-modify' CSS property is not inherited across shadow boundaries."); |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function computedStyle(element) { |
| return window.getComputedStyle(element).webkitUserModify; |
| } |
| |
| function getUserModifyProperty(id) { |
| return computedStyle(document.getElementById(id)); |
| } |
| |
| function prepareNodeInShadowRoot(host, contentEditableAttributeValueForNode) { |
| var shadowRoot = host.createShadowRoot(); |
| var nodeInShadow = document.createElement('div'); |
| if (contentEditableAttributeValueForNode != null) |
| nodeInShadow.setAttribute('contenteditable', contentEditableAttributeValueForNode); |
| shadowRoot.appendChild(nodeInShadow); |
| document.body.offsetLeft; |
| return nodeInShadow; |
| } |
| |
| shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("contenteditable-host1"), null))', 'read-only'); |
| shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("contenteditable-host2"), "false"))', 'read-only'); |
| shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("contenteditable-host3"), "true"))', 'read-write'); |
| shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("non-contenteditable-host1"), null))', 'read-only'); |
| shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("non-contenteditable-host2"), "false"))', 'read-only'); |
| shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("non-contenteditable-host3"), "true"))', 'read-write'); |
| |
| document.getElementById('sandbox').appendChild( |
| createDOM('div', {'id': 'host', 'contenteditable': 'true'}, |
| createShadowRoot(createDOM('content', {'select': '#child-a'}), |
| createDOM('div', {}, |
| createDOM('content', {'select': '#child-b'}))), |
| createDOM('div', {'id': 'child-a'}), |
| createDOM('div', {'id': 'child-b'}))); |
| |
| document.body.offsetLeft; |
| |
| shouldBeEqualToString('getUserModifyProperty("child-a")', 'read-write'); |
| shouldBeEqualToString('getUserModifyProperty("child-b")', 'read-write'); |
| |
| document.getElementById('sandbox2').appendChild( |
| createDOM('div', {'id': 'host', 'contenteditable': 'false'}, |
| createShadowRoot(createDOM('content', {'select': '#child-c'}), |
| createDOM('div', {'contenteditable' : 'true'}, |
| createDOM('content', {'select': '#child-d'}))), |
| createDOM('div', {'id': 'child-c'}), |
| createDOM('div', {'id': 'child-d'}))); |
| |
| shouldBeEqualToString('getUserModifyProperty("child-c")', 'read-only'); |
| shouldBeEqualToString('getUserModifyProperty("child-d")', 'read-only'); |
| |
| </script> |
| </body> |
| </html> |
