<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.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 porperty is not inherited across shadow boundaries.");
if (window.testRunner)
    testRunner.dumpAsText();

function computedStyle(element, style) {
    var cs = window.getComputedStyle(element);
    if (!cs)
        return '(NA)';
    if (cs.getPropertyCSSValue(style))
        return cs.getPropertyCSSValue(style).cssText;
    return undefined;
}

function getUserModifyProperty(id) {
    return computedStyle(document.getElementById(id), userModifyPropertyName);
}

function prepareNodeInShadowRoot(host, contentEditableAttributeValueForNode) {
    var shadowRoot = host.webkitCreateShadowRoot();
    var nodeInShadow = document.createElement('div');
    if (contentEditableAttributeValueForNode != null)
        nodeInShadow.setAttribute('contenteditable', contentEditableAttributeValueForNode);
    shadowRoot.appendChild(nodeInShadow);
    document.body.offsetLeft;
    return nodeInShadow;
}

var userModifyPropertyName = '-webkit-user-modify';

shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("contenteditable-host1"), null), userModifyPropertyName)', 'read-only');
shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("contenteditable-host2"), "false"), userModifyPropertyName)', 'read-only');
shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("contenteditable-host3"), "true"), userModifyPropertyName)', 'read-write');
shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("non-contenteditable-host1"), null), userModifyPropertyName)', 'read-only');
shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("non-contenteditable-host2"), "false"), userModifyPropertyName)', 'read-only');
shouldBeEqualToString('computedStyle(prepareNodeInShadowRoot(document.getElementById("non-contenteditable-host3"), "true"), userModifyPropertyName)', '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>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>