test_image_selection_in_contenteditable.html (4235B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1551185 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1551185</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/WindowSnapshot.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 12 <style> 13 #editor:focus { 14 outline: none; 15 } 16 </style> 17 </head> 18 <body> 19 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1551185">Mozilla Bug 1551185</a> 20 <p id="display"></p> 21 <div id="editor"><img id="img1" src="blue-32x32.png"><img id="img2" src="blue-32x32.png"></div> 22 <div id="content" style="display: none"></div> 23 <pre id="test"> 24 <script type="application/javascript"> 25 SimpleTest.waitForExplicitFinish(); 26 SimpleTest.waitForFocus(() => { 27 let selection = window.getSelection(); 28 let selectionController = 29 SpecialPowers.wrap(window) 30 .docShell 31 .QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor) 32 .getInterface(SpecialPowers.Ci.nsISelectionDisplay) 33 .QueryInterface(SpecialPowers.Ci.nsISelectionController); 34 let editor = document.getElementById("editor"); 35 let img1 = document.getElementById("img1"); 36 let img2 = document.getElementById("img2"); 37 // First, take snapshot without selection. 38 selection.removeAllRanges(); 39 const kSnapshotWithoutSelection = snapshotWindow(window); 40 // Next, take snapshot of selected both images. 41 selection.setBaseAndExtent(editor, 0, editor, 2); 42 const kSnapshotBothImagesSelected = snapshotWindow(window); 43 // Next, take snapshot of selected the last image. 44 selection.setBaseAndExtent(editor, 1, editor, 2); 45 const kSnapshotLastImageSelected = snapshotWindow(window); 46 47 editor.contentEditable = true; 48 editor.focus(); 49 50 document.execCommand("enableObjectResizing", false, false); 51 selection.collapse(editor, 2); 52 selectionController.characterMove(false, true); 53 // When object resizing is disabled, <img> elements should be rendered 54 // as selected if they are in selection ranges. 55 assertSnapshots(snapshotWindow(window), kSnapshotLastImageSelected, true, null, 56 "Selects only the last image when object resizing is disabled", ""); 57 selectionController.characterMove(false, true); 58 assertSnapshots(snapshotWindow(window), kSnapshotBothImagesSelected, true, null, 59 "Selects both the images when object resizing is disabled", ""); 60 61 document.execCommand("enableObjectResizing", false, true); 62 selection.collapse(editor, 2); 63 // When an <img> element is selected, it should become target of resizers. 64 // At this time, the image shouldn't be rendered as selected but there should 65 // be resizers. I.e., shouldn't match with kSnapshotWithoutSelection nor 66 // kSnapshotLastImageSelected. 67 selectionController.characterMove(false, true); 68 assertSnapshots(snapshotWindow(window), kSnapshotLastImageSelected, false, null, 69 "Selects only the last image when object resizing is enabled", 70 "(compared with the last image selected snapshot)"); 71 assertSnapshots(snapshotWindow(window), kSnapshotWithoutSelection, false, null, 72 "Selects only the last image when object resizing is enabled", 73 "(compared without no selection)"); 74 // If not only one <img> element is selected, selected <img> elements should 75 // be rendered as selected normally. 76 selectionController.characterMove(false, true); 77 assertSnapshots(snapshotWindow(window), kSnapshotBothImagesSelected, true, null, 78 "Selects both the images when object resizing is enabled"); 79 80 SimpleTest.finish(); 81 }); 82 </script> 83 </pre> 84 </body> 85 </html>