OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="../../../resources/js-test.js"></script> | 4 <script src="../../../resources/js-test.js"></script> |
5 <script src="resources/shadow-dom.js"></script> | 5 <script src="resources/shadow-dom.js"></script> |
6 </head> | 6 </head> |
7 <body> | 7 <body> |
8 <p id="description"></p> | 8 <p id="description"></p> |
9 <div id="contenteditable-host1" contenteditable></div> | 9 <div id="contenteditable-host1" contenteditable></div> |
10 <div id="contenteditable-host2" contenteditable></div> | 10 <div id="contenteditable-host2" contenteditable></div> |
11 <div id="contenteditable-host3" contenteditable></div> | 11 <div id="contenteditable-host3" contenteditable></div> |
12 <div id="non-contenteditable-host1"></div> | 12 <div id="non-contenteditable-host1"></div> |
13 <div id="non-contenteditable-host2"></div> | 13 <div id="non-contenteditable-host2"></div> |
14 <div id="non-contenteditable-host3"></div> | 14 <div id="non-contenteditable-host3"></div> |
15 <div id="sandbox"></div> | 15 <div id="sandbox"></div> |
16 <div id="sandbox2"></div> | 16 <div id="sandbox2"></div> |
17 <pre id="console"></pre> | 17 <pre id="console"></pre> |
18 <script> | 18 <script> |
19 description("Tests to ensure that a '-webkit-user-modify' CSS porperty is not in
herited across shadow boundaries."); | 19 description("Tests to ensure that a '-webkit-user-modify' CSS property is not in
herited across shadow boundaries."); |
20 if (window.testRunner) | 20 if (window.testRunner) |
21 testRunner.dumpAsText(); | 21 testRunner.dumpAsText(); |
22 | 22 |
23 function computedStyle(element, style) { | 23 function computedStyle(element) { |
24 var cs = window.getComputedStyle(element); | 24 return window.getComputedStyle(element).webkitUserModify; |
25 if (!cs) | |
26 return '(NA)'; | |
27 if (cs.getPropertyCSSValue(style)) | |
28 return cs.getPropertyCSSValue(style).cssText; | |
29 return undefined; | |
30 } | 25 } |
31 | 26 |
32 function getUserModifyProperty(id) { | 27 function getUserModifyProperty(id) { |
33 return computedStyle(document.getElementById(id), userModifyPropertyName); | 28 return computedStyle(document.getElementById(id)); |
34 } | 29 } |
35 | 30 |
36 function prepareNodeInShadowRoot(host, contentEditableAttributeValueForNode) { | 31 function prepareNodeInShadowRoot(host, contentEditableAttributeValueForNode) { |
37 var shadowRoot = host.createShadowRoot(); | 32 var shadowRoot = host.createShadowRoot(); |
38 var nodeInShadow = document.createElement('div'); | 33 var nodeInShadow = document.createElement('div'); |
39 if (contentEditableAttributeValueForNode != null) | 34 if (contentEditableAttributeValueForNode != null) |
40 nodeInShadow.setAttribute('contenteditable', contentEditableAttributeVal
ueForNode); | 35 nodeInShadow.setAttribute('contenteditable', contentEditableAttributeVal
ueForNode); |
41 shadowRoot.appendChild(nodeInShadow); | 36 shadowRoot.appendChild(nodeInShadow); |
42 document.body.offsetLeft; | 37 document.body.offsetLeft; |
43 return nodeInShadow; | 38 return nodeInShadow; |
44 } | 39 } |
45 | 40 |
46 var userModifyPropertyName = '-webkit-user-modify'; | 41 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("contenteditable-host1"), null))', 'read-only'); |
47 | 42 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("contenteditable-host2"), "false"))', 'read-only'); |
48 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("contenteditable-host1"), null), userModifyPropertyName)', 'read-only'); | 43 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("contenteditable-host3"), "true"))', 'read-write'); |
49 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("contenteditable-host2"), "false"), userModifyPropertyName)', 'read-only'); | 44 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("non-contenteditable-host1"), null))', 'read-only'); |
50 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("contenteditable-host3"), "true"), userModifyPropertyName)', 'read-write'); | 45 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("non-contenteditable-host2"), "false"))', 'read-only'); |
51 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("non-contenteditable-host1"), null), userModifyPropertyName)', 'read-only')
; | 46 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("non-contenteditable-host3"), "true"))', 'read-write'); |
52 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("non-contenteditable-host2"), "false"), userModifyPropertyName)', 'read-onl
y'); | |
53 shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElement
ById("non-contenteditable-host3"), "true"), userModifyPropertyName)', 'read-writ
e'); | |
54 | 47 |
55 document.getElementById('sandbox').appendChild( | 48 document.getElementById('sandbox').appendChild( |
56 createDOM('div', {'id': 'host', 'contenteditable': 'true'}, | 49 createDOM('div', {'id': 'host', 'contenteditable': 'true'}, |
57 createShadowRoot(createDOM('content', {'select': '#child-a'}), | 50 createShadowRoot(createDOM('content', {'select': '#child-a'}), |
58 createDOM('div', {}, | 51 createDOM('div', {}, |
59 createDOM('content', {'select': '#child
-b'}))), | 52 createDOM('content', {'select': '#child
-b'}))), |
60 createDOM('div', {'id': 'child-a'}), | 53 createDOM('div', {'id': 'child-a'}), |
61 createDOM('div', {'id': 'child-b'}))); | 54 createDOM('div', {'id': 'child-b'}))); |
62 | 55 |
63 document.body.offsetLeft; | 56 document.body.offsetLeft; |
64 | 57 |
65 shouldBeEqualToString('getUserModifyProperty("child-a")', 'read-write'); | 58 shouldBeEqualToString('getUserModifyProperty("child-a")', 'read-write'); |
66 shouldBeEqualToString('getUserModifyProperty("child-b")', 'read-write'); | 59 shouldBeEqualToString('getUserModifyProperty("child-b")', 'read-write'); |
67 | 60 |
68 document.getElementById('sandbox2').appendChild( | 61 document.getElementById('sandbox2').appendChild( |
69 createDOM('div', {'id': 'host', 'contenteditable': 'false'}, | 62 createDOM('div', {'id': 'host', 'contenteditable': 'false'}, |
70 createShadowRoot(createDOM('content', {'select': '#child-c'}), | 63 createShadowRoot(createDOM('content', {'select': '#child-c'}), |
71 createDOM('div', {'contenteditable' : 'true'}, | 64 createDOM('div', {'contenteditable' : 'true'}, |
72 createDOM('content', {'select': '#child
-d'}))), | 65 createDOM('content', {'select': '#child
-d'}))), |
73 createDOM('div', {'id': 'child-c'}), | 66 createDOM('div', {'id': 'child-c'}), |
74 createDOM('div', {'id': 'child-d'}))); | 67 createDOM('div', {'id': 'child-d'}))); |
75 | 68 |
76 shouldBeEqualToString('getUserModifyProperty("child-c")', 'read-only'); | 69 shouldBeEqualToString('getUserModifyProperty("child-c")', 'read-only'); |
77 shouldBeEqualToString('getUserModifyProperty("child-d")', 'read-only'); | 70 shouldBeEqualToString('getUserModifyProperty("child-d")', 'read-only'); |
78 | 71 |
79 </script> | 72 </script> |
80 </body> | 73 </body> |
81 </html> | 74 </html> |
OLD | NEW |