click-in-margins-inside-editable-div.html

<!doctype html>
<script src="../../resources/ahem.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
// When clicking between divs separated by margins in an editable
// text region, the browsers differ in behavior:
// FF3: vertical padding box + some sort of overhang decent?
// IE6/IE7: vertical padding box
// IE8 b2: margin box
// Safari 3: margin box (but cursor goes at end of line)

// We're going to follow IE 7's behavior and use the padding box height
// for determining if the click below a div (in the padding/margin region)

// The rules for clicking above or below the text are different on Windows and
// Mac.
const kStyleTarget = [
    'font-family:  Ahem;',
    'font-size: 20px;',
    'width: 40px;',
    'height: 80px;',
    'padding: 20px;',
    'background-color: green;',
].join(' ');

const kStyleXX = [
    'padding-bottom: 19px;',
    'border-bottom: 1px solid pink;',
    'margin-bottom: 20px;',
].join(' ');

const kStyle = `#target {${kStyleTarget}} #xx {${kStyleXX}}`;

const testCases = [
    // y=10
    {
        x: 10, y: 10,
        expected: '<div id="xx">|XX</div><div id="yy">YY</div>',
    },
    {
        x: 40, y: 10,
        expected: '<div id="xx">X|X</div><div id="yy">YY</div>',
        mac: '<div id="xx">|XX</div><div id="yy">YY</div>',
        unix: '<div id="xx">|XX</div><div id="yy">YY</div>',
    },
    {
        x: 70, y: 10,
        expected: '<div id="xx">XX|</div><div id="yy">YY</div>',
        mac: '<div id="xx">|XX</div><div id="yy">YY</div>',
        unix: '<div id="xx">|XX</div><div id="yy">YY</div>',
    },
    // y=30
    {
        x: 10, y: 30,
        expected: '<div id="xx">|XX</div><div id="yy">YY</div>',
    },
    {
        x: 70, y: 30,
        expected: '<div id="xx">XX|</div><div id="yy">YY</div>',
    },
    // y=50
    {
        x: 10, y: 50,
        expected: '<div id="xx">|XX</div><div id="yy">YY</div>',
        mac: '<div id="xx">XX|</div><div id="yy">YY</div>',
        unix: '<div id="xx">XX|</div><div id="yy">YY</div>',
    },
    {
        x: 40, y: 50,
        expected: '<div id="xx">X|X</div><div id="yy">YY</div>',
        mac: '<div id="xx">XX|</div><div id="yy">YY</div>',
        unix: '<div id="xx">XX|</div><div id="yy">YY</div>',
    },
    {
        x: 70, y: 50,
        expected: '<div id="xx">XX|</div><div id="yy">YY</div>',
    },
    // y=70
    {
        x: 10, y: 70,
        expected: '<div id="xx">XX</div><div id="yy">|YY</div>',
    },
    {
        x: 40, y: 70,
        expected: '<div id="xx">XX</div><div id="yy">Y|Y</div>',
        mac: '<div id="xx">XX</div><div id="yy">|YY</div>',
        unix: '<div id="xx">XX</div><div id="yy">|YY</div>',
    },
    {
        x: 70, y: 70,
        expected: '<div id="xx">XX</div><div id="yy">YY|</div>',
        mac: '<div id="xx">XX</div><div id="yy">|YY</div>',
        unix: '<div id="xx">XX</div><div id="yy">|YY</div>',
    },
    // y=110
    {
        x: 10, y: 110,
        expected: '<div id="xx">XX</div><div id="yy">|YY</div>',
        mac: '<div id="xx">XX</div><div id="yy">YY|</div>',
        unix: '<div id="xx">XX</div><div id="yy">YY|</div>',
    },
    {
        x: 40, y: 110,
        expected: '<div id="xx">XX</div><div id="yy">Y|Y</div>',
        mac: '<div id="xx">XX</div><div id="yy">YY|</div>',
        unix: '<div id="xx">XX</div><div id="yy">YY|</div>',
    },
    {
        x: 70, y: 110,
        expected: '<div id="xx">XX</div><div id="yy">YY|</div>',
    },
];

for (const behavior of ['android', 'mac', 'unix', 'win']) {
    for (const testCase of testCases) {
        if (!(behavior in testCase))
            testCase[behavior] = testCase.expected;
        selection_test(
            [
                `<style>${kStyle}</style>`,
                '<div contenteditable id="target">',
                    '<div id="xx">XX</div>',
                    '<div id="yy">YY</div>',
                '</div>',
            ],
            selection => {
                if (!window.internals)
                    throw 'This test requires internals.';
                if (!window.eventSender)
                    throw 'This test requires eventSender.';
                internals.settings.setEditingBehavior(behavior);
                const target = selection.document.getElementById('target');
                eventSender.mouseMoveTo(
                    selection.computeLeft(target) + testCase.x,
                    selection.computeTop(target) + testCase.y);
                eventSender.mouseDown();
                eventSender.mouseUp();
            },
            [
                `<style>${kStyle}</style>`,
                '<div contenteditable id="target">',
                    testCase[behavior],
                '</div>',
            ],
            `${behavior}: click at (${testCase.x},${testCase.y})`);
    }
}
</script>
chromium/third_party/blink/web_tests/editing/selection/click-in-margins-inside-editable-div.html
