dom/base/test/test_bug1101364.html

   1 <!DOCTYPE>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1101364
   5 -->
   6 <head>
   7 <title>Test for Bug 1101364</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
  10   <script src="/tests/SimpleTest/EventUtils.js"></script>
  11   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  12   <style>
  13     #test1 {
  14       user-select: none;
  15     }
  16
  17     #testDiv, #test2 {
  18       user-select: text;
  19     }
  20   </style>
  21 </head>
  22 <body id='body'>
  23
  24 <iframe id="test1" srcdoc="<h1 id='test1' style='user-select:none'>Header</h1><div id='testDiv'>test1</div>"></iframe>
  25 <iframe id="test2" srcdoc="<div contenteditable id='test2'>AAA<span id='test2Inner'>BBB</span></div>"></iframe>
  26 <pre id="test">
  27 <script class="testbody" type="text/javascript">
  28
  29 SimpleTest.waitForExplicitFinish();
  30 SimpleTest.waitForFocus(async () => {
  31   await (async () => {
  32     const iframe = document.getElementById("test1");
  33     iframe.focus();
  34     const docShell = SpecialPowers.wrap(iframe.contentWindow).docShell;
  35
  36     docShell.doCommand("cmd_selectAll");
  37     info(
  38       "Waiting for getting screenshot of \"Select All\" without contenteditable..."
  39     );
  40     const withoutContenteditable = await snapshotWindow(iframe.contentWindow);
  41
  42     iframe.contentDocument
  43       .getElementById("testDiv")
  44       .setAttribute("contentEditable", true);
  45     docShell.doCommand("cmd_selectAll");
  46     info(
  47       "Waiting for getting screenshot of \"Select All\" in contenteditable..."
  48     );
  49     const withContenteditable = await snapshotWindow(iframe.contentWindow);
  50     const result =
  51       compareSnapshots(withoutContenteditable, withContenteditable, true);
  52     ok(
  53       result[0],
  54       `Select all should look identical\ngot: ${
  55         result[2]
  56       }\nexpected: ${result[1]}`
  57     );
  58   })();
  59
  60   await (async () => {
  61     const iframe = document.getElementById("test2");
  62     iframe.focus();
  63     iframe.contentDocument.querySelector("div[contenteditable]").focus();
  64     const docShell = SpecialPowers.wrap(iframe.contentWindow).docShell;
  65     const test2Inner = iframe.contentDocument.getElementById("test2Inner");
  66     test2Inner.style.MozUserSelect = "text";
  67     docShell.doCommand("cmd_selectAll");
  68     info(
  69       "Waiting for getting screenshot of \"Select All\" in contenteditable (use-select: text)..."
  70     );
  71     const withoutUserSelect = await snapshotWindow(iframe.contentWindow);
  72
  73     test2Inner.style.MozUserSelect = "none";
  74     docShell.doCommand("cmd_selectAll");
  75     info(
  76       "Waiting for getting screenshot of \"Select All\" in contenteditable (use-select: none)..."
  77     );
  78     const withUserSelect = await snapshotWindow(iframe.contentWindow);
  79     const result = compareSnapshots(withoutUserSelect, withUserSelect, true);
  80     ok(
  81       result[0],
  82       `Editable fields should ignore user select style\ngot: ${
  83         result[2]
  84       }\nexpected: ${result[1]}`
  85     );
  86   })();
  87
  88   SimpleTest.finish();
  89 });
  90 </script>
  91 </pre>
  92 </body>
  93 </html>