<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    #foo {
        user-select: none;
    }
    #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="user-select:none"></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, "None");
});

var style = document.createElement("baz").style;
test(function() {
  assert_true("userSelect" in style);
}, "'userSelect' in 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.userSelect, "none");
    }, `userSelect of '${title}' should be 'none'`);
    test(function() {
        assert_equals(style.webkitUserSelect, "none");
    }, `webkitUserSelect of '${title}' should be 'none'`);
}
</script>