test_splitter_sibling.xhtml (3992B)
1 <?xml version="1.0"?> 2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?> 3 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?> 4 <?xml-stylesheet href="data:text/css, hbox { border: 1px solid red; } vbox { border: 1px solid green }" type="text/css"?> 5 <window title="XUL splitter resizebefore/after tests" 6 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 7 orient="horizontal"> 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/> 9 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/> 10 11 <body xmlns="http://www.w3.org/1999/xhtml"> 12 </body> 13 14 <hbox style="width: 200px; height: 200px; direction: ltr; display: none"> 15 <vbox style="height: 200px; width: 40px" /> 16 <splitter id="ltr-splitter-before" style="width: 5px" resizebefore="sibling" resizeafter="none"/> 17 <vbox style="height: 200px;" flex="1"/> 18 </hbox> 19 20 <hbox style="width: 200px; height: 200px; direction: rtl; display: none"> 21 <vbox style="height: 200px; width: 40px" /> 22 <splitter id="rtl-splitter-before" style="width: 5px" resizebefore="sibling" resizeafter="none"/> 23 <vbox style="height: 200px;" flex="1"/> 24 </hbox> 25 26 <hbox style="width: 200px; height: 200px; direction: ltr; display: none"> 27 <vbox style="height: 200px;" flex="1"/> 28 <splitter id="ltr-splitter-after" style="width: 5px" resizeafter="sibling" resizebefore="none"/> 29 <vbox style="height: 200px; width: 40px" /> 30 </hbox> 31 32 <hbox style="width: 200px; height: 200px; direction: rtl; display: none"> 33 <vbox style="height: 200px;" flex="1"/> 34 <splitter id="rtl-splitter-after" style="width: 5px" resizeafter="sibling" resizebefore="none"/> 35 <vbox style="height: 200px; width: 40px" /> 36 </hbox> 37 38 <script><![CDATA[ 39 async function dragSplitter(splitter, offsetX) { 40 info(`Dragging splitter ${splitter.id} to ${offsetX}`); 41 42 const splitterRect = splitter.getBoundingClientRect(); 43 const splitterWidth = splitterRect.width; 44 synthesizeMouse(splitter, splitterWidth / 2, 2, {type: "mousedown"}); 45 synthesizeMouse(splitter, splitterWidth / 2, 1, {type: "mousemove"}); 46 await new Promise(SimpleTest.executeSoon); 47 is(splitter.getAttribute("state"), "dragging", "The splitter should be dragged"); 48 synthesizeMouse(splitter, offsetX, 1, {type: "mousemove"}); 49 synthesizeMouse(splitter, offsetX, 1, {type: "mouseup"}); 50 await new Promise(SimpleTest.executeSoon); 51 const newSplitterRect = splitter.getBoundingClientRect(); 52 is( 53 offsetX > 0, 54 newSplitterRect.left > splitterRect.left, 55 `Should move in the right direction ${splitterRect.left} -> ${newSplitterRect.left}, ${offsetX}` 56 ); 57 } 58 59 add_task(async function() { 60 for (let splitter of document.querySelectorAll("splitter")) { 61 info(`Testing ${splitter.id}`); 62 splitter.parentNode.style.display = ""; 63 const isBefore = splitter.getAttribute("resizebefore") == "sibling"; 64 const isRtl = getComputedStyle(splitter).direction == "rtl"; 65 66 const resizableElement = isBefore ? splitter.previousElementSibling : splitter.nextElementSibling; 67 const nonResizableElement = isBefore ? splitter.nextElementSibling : splitter.previousElementSibling; 68 const oldWidth = resizableElement.getBoundingClientRect().width; 69 70 await dragSplitter(splitter, 10); 71 72 is(nonResizableElement.style.width, "", "Shouldn't have set width"); 73 isnot(resizableElement.style.width, "40px", "Should've changed width"); 74 75 const newWidth = resizableElement.getBoundingClientRect().width; 76 77 info(`Went from ${oldWidth} -> ${newWidth}\n`); 78 79 if (isRtl == isBefore) { 80 ok(newWidth < oldWidth, "Should've shrunk"); 81 } else { 82 ok(newWidth > oldWidth, "Should've grown"); 83 } 84 splitter.parentNode.style.display = "none"; 85 } 86 }); 87 ]]></script> 88 </window>