test_abs_positioner_appearance.html (7984B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test for absolute positioner appearance</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="/tests/SimpleTest/EventUtils.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 8 </head> 9 <body> 10 <p id="display"></p> 11 <div id="content" style="display: none;"> 12 13 </div> 14 15 <div id="editor" contenteditable></div> 16 <div id="clickaway" style="width: 3px; height: 3px;"></div> 17 <img src="green.png"><!-- for ensuring to load the image at first test of <img> case --> 18 <pre id="test"> 19 20 <script class="testbody" type="application/javascript"> 21 "use strict"; 22 23 SimpleTest.waitForExplicitFinish(); 24 SimpleTest.waitForFocus(async function() { 25 async function waitForSelectionChange() { 26 return new Promise(resolve => { 27 document.addEventListener("selectionchange", () => { 28 resolve(); 29 }, {once: true}); 30 }); 31 } 32 33 let editor = document.getElementById("editor"); 34 let outOfEditor = document.getElementById("clickaway"); 35 36 async function testIfAppears() { 37 const kTests = [ 38 { description: "absolute positioned <div>", 39 innerHTML: "<div id=\"target\" style=\"position: absolute; top: 50px; left: 50px;\">positioned</div>", 40 movable: true, 41 }, 42 { description: "fixed positioned <div>", 43 innerHTML: "<div id=\"target\" style=\"position: fixed; top: 50px; left: 50px;\">positioned</div>", 44 movable: false, 45 }, 46 { description: "relative positioned <div>", 47 innerHTML: "<div id=\"target\" style=\"position: relative; top: 50px; left: 50px;\">positioned</div>", 48 movable: false, 49 }, 50 ]; 51 52 for (const kTest of kTests) { 53 const kDescription = "testIfAppears, " + kTest.description + ": "; 54 editor.innerHTML = kTest.innerHTML; 55 let target = document.getElementById("target"); 56 57 document.execCommand("enableAbsolutePositionEditing", false, false); 58 ok(!document.queryCommandState("enableAbsolutePositionEditing"), 59 kDescription + "Absolute positioned element editor should be disabled by the call of execCommand"); 60 61 synthesizeMouseAtCenter(outOfEditor, {}); 62 let promiseSelectionChangeEvent1 = waitForSelectionChange(); 63 synthesizeMouseAtCenter(target, {}); 64 await promiseSelectionChangeEvent1; 65 66 ok(!target.hasAttribute("_moz_abspos"), 67 kDescription + "While enableAbsolutePositioner is disabled, positioner shouldn't appear"); 68 69 document.execCommand("enableAbsolutePositionEditing", false, true); 70 ok(document.queryCommandState("enableAbsolutePositionEditing"), 71 kDescription + "Absolute positioned element editor should be enabled by the call of execCommand"); 72 73 synthesizeMouseAtCenter(outOfEditor, {}); 74 let promiseSelectionChangeEvent2 = waitForSelectionChange(); 75 synthesizeMouseAtCenter(target, {}); 76 await promiseSelectionChangeEvent2; 77 78 is(target.hasAttribute("_moz_abspos"), kTest.movable, 79 kDescription + (kTest.movable ? "While enableAbsolutePositionEditing is enabled, positioner should appear" : 80 "Even while enableAbsolutePositionEditing is enabled, positioner shouldn't appear")); 81 82 document.execCommand("enableAbsolutePositionEditing", false, false); 83 ok(!target.hasAttribute("_moz_abspos"), 84 kDescription + "When enableAbsolutePositionEditing is disabled even while positioner is visible, positioner should disappear"); 85 86 document.execCommand("enableAbsolutePositionEditing", false, true); 87 is(target.hasAttribute("_moz_abspos"), kTest.movable, 88 kDescription + (kTest.movable ? 89 "When enableAbsolutePositionEditing is enabled when absolute positioned element is selected, positioner should appear" : 90 "Even if enableAbsolutePositionEditing is enabled when static positioned element is selected, positioner shouldn't appear")); 91 } 92 } 93 94 async function testStyle() { 95 // See HTMLEditor::GetTemporaryStyleForFocusedPositionedElement(). 96 const kTests = [ 97 { description: "background-color: transparent; color: white;", 98 innerHTML: "<div id=\"target\" style=\"position: absolute; " + 99 "top: 50%; left: 50%; " + 100 "background-color: transparent; " + 101 "color: white;\">positioned</div>", 102 value: "black", 103 }, 104 { description: "background-color: transparent; color: black;", 105 innerHTML: "<div id=\"target\" style=\"position: absolute; " + 106 "top: 50%; left: 50%; " + 107 "background-color: transparent; " + 108 "color: black;\">positioned</div>", 109 value: "white", 110 }, 111 { description: "background-color: black; color: white;", 112 innerHTML: "<div id=\"target\" style=\"position: absolute; " + 113 "top: 50%; left: 50%; " + 114 "background-color: black; " + 115 "color: white;\">positioned</div>", 116 value: "", 117 }, 118 { description: "background-color: white; color: black;", 119 innerHTML: "<div id=\"target\" style=\"position: absolute; " + 120 "top: 50%; left: 50%; " + 121 "background-color: white; " + 122 "color: black;\">positioned</div>", 123 value: "", 124 }, 125 { description: "background-image: green.png; background-color: black; color: white;", 126 innerHTML: "<div id=\"target\" style=\"position: absolute; " + 127 "top: 50%; left: 50%; " + 128 "background-image: green.png; " + 129 "background-color: black; " + 130 "color: white;\">positioned</div>", 131 value: "", 132 }, 133 { description: "background-image: green.png; background-color: white; color: black;", 134 innerHTML: "<div id=\"target\" style=\"position: absolute; " + 135 "top: 50%; left: 50%; " + 136 "background-image: green.png; " + 137 "background-color: white; " + 138 "color: black;\">positioned</div>", 139 value: "", 140 }, 141 { description: "background-image: green.png;", 142 innerHTML: "<div id=\"target\" style=\"position: absolute; " + 143 "top: 50%; left: 50%; " + 144 "background-image: green.png;\">positioned</div>", 145 value: "white", // XXX Why? background-image is not "none"... 146 }, 147 ]; 148 149 document.execCommand("enableAbsolutePositionEditing", false, true); 150 ok(document.queryCommandState("enableAbsolutePositionEditing"), 151 "testStyle, Absolute positioned element editor should be enabled by the call of execCommand"); 152 153 for (const kTest of kTests) { 154 const kDescription = "testStyle, " + kTest.description + ": "; 155 156 editor.innerHTML = kTest.innerHTML; 157 let target = document.getElementById("target"); 158 159 synthesizeMouseAtCenter(outOfEditor, {}); 160 let promiseSelectionChangeEvent = waitForSelectionChange(); 161 synthesizeMouseAtCenter(target, {}); 162 await promiseSelectionChangeEvent; 163 164 is(target.getAttribute("_moz_abspos"), kTest.value, 165 kDescription + "The value of _moz_abspos attribute is unexpected"); 166 } 167 } 168 169 await testIfAppears(); 170 await testStyle(); 171 172 SimpleTest.finish(); 173 }); 174 </script> 175 </pre> 176 </body> 177 </html>