user-drag-element-and-user-select-none.html

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<head>
<title>Test for WebKit bug 15106: Dragging text inside an element with "user-drag: element" and "user-select: none" should initiate a drag</title>
<style type="text/css">
    .test {
        background-color: #ccc;
        border: 1px solid #333;
        width: 200px;
        text-align: center;
        margin: 10px;
    }

    body > div {
        clear: both;
        padding-top: 15px;
    }
</style>
</head>
<body>
    <h3>Test for <a href='https://bugs.webkit.org/show_bug.cgi?id=15106'>WebKit bug 15106</a>: Dragging text inside an element with "user-drag: element" and "user-select: none" should initiate a drag</h3>

    <div>
        <div id="draggable" class="test" style="-webkit-user-drag: element;">
            This element should be draggable, but initiating a drag from within the text should begin a selection.
        </div>
    </div>

    <div>
        <div id="unselectable" class="test" style="-webkit-user-select: none;">
            This element should not be draggable, and initiating a drag from within the text should not begin a selection.
        </div>
    </div>

    <div>
        <div id="draggable-unselectable" class="test" style="-webkit-user-drag: element; -webkit-user-select: none;">
            This element should be draggable, and initiating a drag from within the text should drag the element.
        </div>
    </div>
    <div id="log"></div>
    <script type="text/javascript">
    function compareResults(id, expectedResult, actualResult) {
        var resultElement = document.getElementById(id + '-result');
        assert_equals(actualResult.length, expectedResult.length, 'results length');
        for (var i = 0; i < expectedResult.length; i++) {
            assert_equals(actualResult[i], expectedResult[i], 'action');
        }
    }

    function registerEventListenersWithResults(resultArray) {
        document.ondragstart = function() {
            resultArray.push('dragstart');
        }

        document.onmousedown = function(event) {
            resultArray.push('mousedown');
        }

        document.onmouseup = function(event) {
            resultArray.push('mouseup');
            resultArray.push(window.getSelection().toString() == '' ? 'No selection' : 'Selection');
        }
    }

    function dragFromTopOfElement(element) {
        var startX = Math.round(element.offsetLeft + element.offsetWidth / 2);
        var startY = Math.round(element.offsetTop + 1.0);

        eventSender.mouseMoveTo(startX, startY);
        eventSender.mouseDown();
        eventSender.mouseMoveTo(startX, startY + element.offsetHeight / 2);
        eventSender.mouseUp();
    }

    test(function () {
        getSelection().removeAllRanges();
        var draggableResults = [];
        registerEventListenersWithResults(draggableResults);
        var draggable = document.getElementById('draggable');
        dragFromTopOfElement(draggable);
        compareResults('draggable', ['mousedown', 'mouseup', 'Selection'], draggableResults);
    });

    test(function () {
        getSelection().removeAllRanges();
        var unselectableResults = [];
        registerEventListenersWithResults(unselectableResults);
        var unselectable = document.getElementById('unselectable');
        dragFromTopOfElement(unselectable);
        compareResults('unselectable', ['mousedown', 'mouseup', 'No selection'], unselectableResults);
    });

    test(function () {
        getSelection().removeAllRanges();
        var draggableUnselectableResults = [];
        registerEventListenersWithResults(draggableUnselectableResults);
        var draggableUnselectable = document.getElementById('draggable-unselectable');
        dragFromTopOfElement(draggableUnselectable);
        compareResults('draggable-unselectable', ['mousedown', 'dragstart'], draggableUnselectableResults);
    });
    </script>
</body>
chromium/third_party/blink/web_tests/editing/selection/mouse/user-drag-element-and-user-select-none.html
