<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    /* FIXME: Add testcases for unprefixed version (webkit.org/b/208677) */
    #bar {
        -webkit-user-select: none;
    }
</style>
<div id="container">
<p id="description">Test setting CSSStyleDeclaration.webkitUserSelect and userSelect</p>
<div id="sample1" contenteditable="true">editable</div>
<div id="sample2" contenteditable="false">uneditable</div>
<div class="none" style="-webkit-user-select:none"></div>
</div>
<div id="log"></div>
<script>
var selection = window.getSelection();
function setSelection(node)
{
    var range = document.createRange();
    range.selectNodeContents(node);
    selection.empty();
    selection.addRange(range);
}

test(function(){
    // user-select:none in editable element
    sample1.style.webkitUserSelect = "none";
    setSelection(sample1);
    assert_equals(selection.type, "Range");

    // user-select:none in uneditable element
    sample2.style.webkitUserSelect = "none";
    setSelection(sample2);
    assert_equals(selection.type, "Range");
});

var style = document.createElement("baz").style;
test(function () {
    assert_true("webkitUserSelect" in style);
}, "'webkitUserSelect' in style");

for (let cssRule of document.styleSheets[0].cssRules) {
    testUserSelect(cssRule.style, cssRule.cssText);
}

for (let element of document.querySelectorAll(".none")) {
    testUserSelect(getComputedStyle(element), element.getAttribute("style"));
}

function testUserSelect(style, title) {
    test(function () {
        assert_equals(style.webkitUserSelect, "none");
    }, "webkitUserSelect of '" + title + "' should be 'none'");
}
</script>