dom/base/test/test_bug166235.html
author Emilio Cobos Álvarez <emilio@crisal.io>
Mon, 26 Nov 2018 09:21:37 +0000
changeset 504393 8e88421b280c2afda62f4ba704ce29701c30549f
parent 504376 14d532b8d89432c1a4b01d5007960295a13022da
child 528458 ba6f655fd68963530c866d0d4a48c3db3d307777
permissions -rw-r--r--
Bug 1506547 - Align user-select behavior more with other UAs. r=mats There's a few subtle behavior changes here, which I'll try to break down in the commit message. The biggest one is the EditableDescendantCount stuff going away. This was added in bug 1181130, to prevent clicking on the non-editable div from selecting the editable div inside. This is problematic for multiple reasons: * First, I don't think non-editable regions of an editable element should be user-select: all. * Second, it just doesn't work in Shadow DOM (the editable descendant count is not kept up-to-date when not in the uncomposed doc), so nested contenteditables behave differently inside vs. outside a Shadow Tree. * Third, I think it's user hostile to just entirely disable selection if you have a contenteditable descendant as a child of a user-select: all thing. WebKit behaves like this patch in the following test-case (though not Blink): https://crisal.io/tmp/user-select-all-contenteditable-descendant.html Edge doesn't seem to support user-select: all at all (no pun intended). But we don't allow to select anything at all which looks wrong. * Fourth, it's not tested at all (which explains how we broke it in Shadow DOM and not even notice...). In any case I've verified that this doesn't regress the editor from that bug. If this regresses anything we can fix it as outlined in the first bullet point above, which should also make us more compatible with other UAs in that test-case. The other change is `all` not overriding everything else. So, something like: <div style="-webkit-user-select: all">All <div style="-webkit-user-select: none">None</div></div> Totally ignores the -webkit-user-select: none declaration in Firefox before this change. This doesn't match any other UA nor the spec, and this patch aligns us with WebKit / Blink. This in turn makes us not need -moz-text anymore, whose only purpose was to avoid this. This also fixes a variety of bugs uncovered by the previous changes, like the SetIgnoreUserModify(false) call in editor being completely useless, since presShell->SetCaretEnabled ended in nsCaret::SetVisible, which overrode it. This in turn uncovered even more bugs, from bugs in the caret painting code, like not checking -moz-user-modify on the right frame if you're the last frame of a line, to even funnier bits where before this patch you show the caret but can't write at all... In any case, the new setup I came up with is that when you're editing (the selection is focused on an editable node) moving the caret forces it to end up in an editable node, thus jumping over non-editable ones. This has the nice effect of not completely disabling selection of -moz-user-select: all elements that have editable descendants (which was a very ad-hoc hack for bug 1181130, and somewhat broken per the above), and also not needing the -moz-user-select: all for non-editable bits in contenteditable.css at all. This also fixes issues with br-skipping like not being able to insert content in the following test-case: <div contenteditable="true"><span contenteditable="false">xyz </span><br>editable</div> If you start moving to the left from the second line, for example. I think this yields way better behavior in all the relevant test-cases from bug 1181130 / bug 1109968 / bug 1132768, shouldn't cause any regression, and the complexity is significantly reduced in some places. There's still some other broken bits that this patch doesn't fix, but I'll file follow-ups for those. Differential Revision: https://phabricator.services.mozilla.com/D12687

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=166235
https://bugzilla.mozilla.org/show_bug.cgi?id=816298
-->
<head>
  <title>Test for Bug 166235</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=166235">Mozilla Bug 166235 and Bug 816298</a>
<p id="test0">This text should be copied.</p>
<p id="test1">This text should<span style="-moz-user-select: none;"> NOT</span> be copied.</p>
<p id="test2">This<span style="-moz-user-select: none;"><span style="-moz-user-select: text"> text should</span> NOT</span> be copied.</p>
<p id="test3">This text should<span style="-moz-user-select: -moz-none;"> NOT</span> be copied.</p>
<p id="test4">This<span style="-moz-user-select: -moz-none;"><span style="-moz-user-select: text"> text should</span> NOT</span> be copied.</p>
<p id="test5">This<span style="-moz-user-select: all"> text should</span> be copied.</p>
<div id="content" style="display: none">
  
</div>
<textarea id="input"></textarea>
<pre id="test">
<script type="application/javascript">
  "use strict";

/** Test for Bug 166235 **/
  var Cc = SpecialPowers.Cc;
  var Ci = SpecialPowers.Ci;

  var docShell = SpecialPowers.wrap(window).docShell;

  var documentViewer = docShell.contentViewer
                               .QueryInterface(SpecialPowers.Ci.nsIContentViewerEdit);

  var clipboard = Cc["@mozilla.org/widget/clipboard;1"]
                    .getService(SpecialPowers.Ci.nsIClipboard);

  var textarea = SpecialPowers.wrap(document.getElementById('input'));

  function getLoadContext() {
    return SpecialPowers.wrap(window).docShell
                                     .QueryInterface(Ci.nsILoadContext);
  }

  function copyChildrenToClipboard(id) {
    textarea.blur();
    clipboard.emptyClipboard(1);
    window.getSelection().selectAllChildren(document.getElementById(id));
    documentViewer.copySelection();

    is(clipboard.hasDataMatchingFlavors(["text/unicode"], 1,1), true);
    is(clipboard.hasDataMatchingFlavors(["text/html"], 1,1), true);
  }
  function getClipboardData(mime) {
    var transferable = Cc['@mozilla.org/widget/transferable;1']
                         .createInstance(SpecialPowers.Ci.nsITransferable);
    transferable.init(getLoadContext());
    transferable.addDataFlavor(mime);
    clipboard.getData(transferable, 1);
    var data = SpecialPowers.createBlankObject();
    transferable.getTransferData(mime, data) ;
    return SpecialPowers.wrap(data);
  }
  function testHtmlClipboardValue(mime, expected, test) {
    var expectedValue = expected;
    // For Windows, navigator.platform returns "Win32".
    if (navigator.platform.includes("Win")) {
      expectedValue = "<html><body>\n<!--StartFragment-->" + expected + "<!--EndFragment-->\n</body>\n</html>";
    }
    testClipboardValue(mime, expectedValue, test);
  }
  function testClipboardValue(mime, expected, test) {
    var data = getClipboardData(mime);
    is (data.value == null ? data.value :
        data.value.QueryInterface(SpecialPowers.Ci.nsISupportsString).data,
      expected,
      mime + " value in the clipboard");
    return data.value;
  }
  function testPasteText(expected, test) {
    textarea.value="";
    textarea.focus();
    textarea.editor.paste(1);
    is(textarea.value, expected, test + ": textarea paste");
  }
  function testInnerHTML(id, expected) {
    var value = document.getElementById(id).innerHTML;
    is(value, expected, id + ".innerHTML");
  }

// expected results for Selection.toString()
var originalStrings = [
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.'
];

// expected results for clipboard text/html
var clipboardHTML = [
  '<p id=\"test0\">This text should be copied.</p>',
  '<p id=\"test1\">This text should be copied.</p>',
  '<p id=\"test2\">This<span style=\"-moz-user-select: text\"> text should</span> be copied.</p>',
  '<p id=\"test3\">This text should be copied.</p>',
  '<p id=\"test4\">This<span style=\"-moz-user-select: text\"> text should</span> be copied.</p>',
  '<p id=\"test5\">This<span style=\"-moz-user-select: all\"> text should</span> be copied.</p>',
];

// expected results for clipboard text/unicode
var clipboardUnicode = [
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.'
];

// expected results for .innerHTML
var innerHTMLStrings = [
  'This text should be copied.',
  'This text should<span style=\"-moz-user-select: none;\"> NOT</span> be copied.',
  'This<span style=\"-moz-user-select: none;\"><span style=\"-moz-user-select: text\"> text should</span> NOT</span> be copied.',
  'This text should<span style=\"-moz-user-select: -moz-none;\"> NOT</span> be copied.',
  'This<span style=\"-moz-user-select: -moz-none;\"><span style=\"-moz-user-select: text\"> text should</span> NOT</span> be copied.',
  'This<span style=\"-moz-user-select: all\"> text should</span> be copied.',
];

// expected results for pasting into a TEXTAREA
var textareaStrings = [
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.',
  'This text should be copied.'
];

for (var i = 0; i < originalStrings.length; i++) {
  var id = 'test' + i;
  copyChildrenToClipboard(id);
  is(window.getSelection().toString(), originalStrings[i], id + ' Selection.toString()');
  testHtmlClipboardValue("text/html", clipboardHTML[i], id);
  testClipboardValue("text/unicode", clipboardUnicode[i], id);
  testInnerHTML(id, innerHTMLStrings[i]);
  testPasteText(textareaStrings[i], id + '.innerHTML');
}

</script>
</pre>
</body>
</html>