test_splitter.xhtml (4393B)
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, * { flex-shrink: 0 } hbox { border: 1px solid red; } vbox { border: 1px solid green }" type="text/css"?> 5 <!-- 6 XUL <splitter> collapsing tests 7 --> 8 <window title="XUL splitter collapsing tests" 9 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 10 orient="horizontal"> 11 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/> 12 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/> 13 14 <!-- test results are displayed in the html:body --> 15 <body xmlns="http://www.w3.org/1999/xhtml"> 16 </body> 17 18 <!-- test code goes here --> 19 <script type="application/javascript"><![CDATA[ 20 SimpleTest.waitForExplicitFinish(); 21 22 async function dragSplitter(offsetX) { 23 info(`Dragging splitter ${splitter.id} to ${offsetX}`); 24 25 const splitterRect = splitter.getBoundingClientRect(); 26 const splitterWidth = splitterRect.width; 27 synthesizeMouse(splitter, splitterWidth / 2, 2, {type: "mousedown"}); 28 synthesizeMouse(splitter, splitterWidth / 2, 1, {type: "mousemove"}); 29 await new Promise(SimpleTest.executeSoon); 30 is(splitter.getAttribute("state"), "dragging", "The splitter should be dragged"); 31 synthesizeMouse(splitter, offsetX, 1, {type: "mousemove"}); 32 synthesizeMouse(splitter, offsetX, 1, {type: "mouseup"}); 33 await new Promise(SimpleTest.executeSoon); 34 const newSplitterRect = splitter.getBoundingClientRect(); 35 is( 36 offsetX > 0, 37 newSplitterRect.left > splitterRect.left, 38 `Should move in the right direction ${splitterRect.left} -> ${newSplitterRect.left}, ${offsetX}` 39 ); 40 } 41 42 function shouldBeCollapsed(where) { 43 is(splitter.getAttribute("state"), "collapsed", "The splitter should be collapsed"); 44 is(splitter.getAttribute("substate"), where, "The splitter should be collapsed " + where); 45 } 46 47 function shouldNotBeCollapsed() { 48 is(splitter.getAttribute("state"), "", "The splitter should not be collapsed"); 49 } 50 51 async function runPass(isRTL, rightCollapsed, leftCollapsed) { 52 const containerWidth = splitter.parentNode.getBoundingClientRect().width; 53 await dragSplitter(containerWidth); 54 if (rightCollapsed) { 55 shouldBeCollapsed(isRTL ? "before" : "after"); 56 } else { 57 shouldNotBeCollapsed(); 58 } 59 await dragSplitter(-containerWidth * 2); 60 if (leftCollapsed) { 61 shouldBeCollapsed(isRTL ? "after" : "before"); 62 } else { 63 shouldNotBeCollapsed(); 64 } 65 await dragSplitter(containerWidth / 2); 66 // the splitter should never be collapsed in the middle 67 shouldNotBeCollapsed(); 68 } 69 70 var splitter; 71 var activeBox = null; 72 function setActiveBox(element) { 73 if (activeBox) { 74 activeBox.style.display = "none"; 75 } 76 if (element) { 77 element.style.display = ""; 78 element.getBoundingClientRect(); 79 } 80 activeBox = element; 81 } 82 83 async function runTests(rtl, splitterId) { 84 info(`Running tests for ${splitterId}`); 85 splitter = document.getElementById(splitterId); 86 setActiveBox(splitter.parentNode); 87 await runPass(rtl, false, false); 88 splitter.setAttribute("collapse", "before"); 89 await runPass(rtl, rtl, !rtl); 90 splitter.setAttribute("collapse", "after"); 91 await runPass(rtl, !rtl, rtl); 92 splitter.setAttribute("collapse", "both"); 93 await runPass(rtl, true, true); 94 } 95 96 async function runAllTests() { 97 await runTests(false, "ltr-splitter"); 98 await runTests(true, "rtl-splitter"); 99 SimpleTest.finish(); 100 } 101 102 addLoadEvent(function() {SimpleTest.executeSoon(runAllTests);}); 103 ]]></script> 104 105 <hbox style="display: none; width: 200px; height: 300px; direction: ltr;"> 106 <vbox style="height: 300px; flex: 1 auto"/> 107 <splitter id="ltr-splitter" style="width: 5px"/> 108 <vbox style="height: 300px; flex: 1 auto;"/> 109 </hbox> 110 111 <hbox style="display: none; width: 200px; height: 300px; direction: rtl;"> 112 <vbox style="height: 300px; flex: 1 auto" /> 113 <splitter id="rtl-splitter" style="width: 5px"/> 114 <vbox style="height: 300px; flex: 1 auto" /> 115 </hbox> 116 117 </window>