test_GridElementWidthResizer_RTL.html (7013B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 <!DOCTYPE HTML> 5 <html> 6 <!-- Basic tests for the GridElementWidthResizer component. --> 7 <head> 8 <meta charset="utf-8"> 9 <title>Tree component test</title> 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 12 <link href="chrome://mochikit/content/tests/SimpleTest/test.css" rel="stylesheet" type="text/css"/> 13 <link href="chrome://devtools/skin/splitters.css" rel="stylesheet" type="text/css"/> 14 <link href="chrome://devtools/content/shared/components/splitter/GridElementResizer.css" rel="stylesheet" type="text/css"/> 15 <style> 16 * { 17 box-sizing: border-box; 18 } 19 20 html { 21 --theme-splitter-color: red; 22 } 23 24 main { 25 display: grid; 26 grid-template-columns: auto 1fr auto; 27 grid-template-rows: 20px 20px 20px; 28 grid-gap: 10px; 29 direction: rtl; 30 } 31 32 .a, 33 .b, 34 .c, 35 .d { 36 border: 1px solid green; 37 } 38 39 header { 40 grid-column: 1 / -1; 41 } 42 .a { 43 grid-column: 1 / 2; 44 grid-row: 2 / -1; 45 min-width: 100px; 46 } 47 .b { 48 grid-column: 2 / 3; 49 grid-row: 2 / -1; 50 } 51 52 .c { 53 grid-column: 3 / 4; 54 grid-row: 2 / 3; 55 } 56 57 .d { 58 grid-column: 3 / 4; 59 grid-row: 3 / 4; 60 min-width: 150px; 61 } 62 63 .resizer-a { 64 grid-column: 1 / 2; 65 grid-row: 2 / -1; 66 } 67 68 .resizer-d { 69 grid-column: 3 / 4; 70 grid-row: 2 / -1; 71 } 72 </style> 73 </head> 74 <body> 75 <main></main> 76 <pre id="test"> 77 <script src="head.js" type="application/javascript"></script> 78 <script type="application/javascript"> 79 80 'use strict' 81 82 const FUDGE_FACTOR = .5; 83 function aboutEq(a, b) { 84 dumpn(`Checking ${a} ~= ${b}`); 85 return Math.abs(a - b) < FUDGE_FACTOR; 86 } 87 88 window.onload = async function () { 89 try { 90 const React = browserRequire("devtools/client/shared/vendor/react"); 91 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 92 const dom = require("devtools/client/shared/vendor/react-dom-factories"); 93 94 const GridElementWidthResizer = React.createFactory(browserRequire("devtools/client/shared/components/splitter/GridElementWidthResizer")); 95 ok(GridElementWidthResizer, "Should get GridElementWidthResizer"); 96 97 const resizedA = []; 98 const resizedD = []; 99 100 ReactDOM.render([ 101 dom.header({}, "header"), 102 dom.aside({className: "a"}, "A"), 103 GridElementWidthResizer({ 104 getControlledElementNode: () => a, 105 enabled: true, 106 position: "end", 107 className: "resizer-a", 108 onResizeEnd: width => resizedA.push(width), 109 }), 110 dom.section({className: "b"}, "B"), 111 GridElementWidthResizer({ 112 getControlledElementNode: () => window.document.querySelector(".b"), 113 enabled: false, 114 position: "start", 115 className: "resizer-disabled", 116 }), 117 dom.aside({className: "c"}, "C"), 118 dom.aside({className: "d"}, "D"), 119 GridElementWidthResizer({ 120 getControlledElementNode: () => d, 121 enabled: true, 122 position: "start", 123 className: "resizer-d", 124 onResizeEnd: width => resizedD.push(width), 125 }), 126 ], window.document.querySelector("main")); 127 128 // wait for a bit as we may not have everything setup yet. 129 await new Promise(res => setTimeout(res, 10)); 130 131 const a = window.document.querySelector(".a"); 132 const d = window.document.querySelector(".d"); 133 134 // Test that we properly rendered our two resizers, and not the disabled one. 135 const resizers = window.document.querySelectorAll(".grid-element-width-resizer"); 136 is(resizers.length, 2, "The 2 enabled resizers are rendered"); 137 138 const [resizerA, resizerD] = resizers; 139 140 ok(resizerA.classList.contains("resizer-a") 141 && resizerA.classList.contains("end"), "resizerA has expected classes"); 142 ok(resizerD.classList.contains("resizer-d") 143 && resizerD.classList.contains("start"), "resizerD has expected classes"); 144 145 const aBoundingRect = a.getBoundingClientRect(); 146 const aOriginalWidth = aBoundingRect.width; 147 148 info("Resize element A"); 149 await resize(resizerA, aBoundingRect.left - 20); 150 151 is(resizedA.length, 1, "onResizeEnd was called once"); 152 is(resizedD.length, 0, "resizerD was not impacted"); 153 let aWidth = a.getBoundingClientRect().width; 154 is(resizedA[0], aWidth, "onResizeEnd gives the width of the controlled element"); 155 ok(aboutEq(aWidth, aOriginalWidth + 20), 156 "controlled element was resized to the expected size"); 157 158 info("Resize element A below its min width"); 159 await resize(resizerA, [aBoundingRect.right - 10]); 160 aWidth = a.getBoundingClientRect().width; 161 ok(aboutEq(aWidth, 100), "controlled element was resized to its min width"); 162 163 info("Resize element D below its min width"); 164 const dBoundingRect = d.getBoundingClientRect(); 165 const dOriginalWidth = dBoundingRect.width; 166 167 await resize(resizerD, dBoundingRect.right - 100); 168 is(resizedD.length, 1, "onResizeEnd was called once for d"); 169 is(resizedA.length, 2, "onResizeEnd wasn't called for a"); 170 let dWidth = d.getBoundingClientRect().width; 171 is(resizedD[0], dWidth, "onResizeEnd gives the width of the controlled element"); 172 ok(aboutEq(dWidth, 150), "controlled element wasn't resized below its min-width"); 173 174 info("Resize element D"); 175 await resize(resizerD, dBoundingRect.right + 15); 176 dWidth = d.getBoundingClientRect().width; 177 is(resizedD[1], dWidth, "onResizeEnd gives the width of the controlled element"); 178 ok(aboutEq(dWidth, dOriginalWidth + 15), "element was resized"); 179 } catch(e) { 180 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 181 } finally { 182 SimpleTest.finish(); 183 } 184 185 async function resize(resizer, clientX) { 186 info("Mouse down to start dragging"); 187 synthesizeMouseAtCenter(resizer, { button: 0, type: "mousedown" }, window); 188 await SimpleTest.promiseWaitForCondition( 189 () => document.firstElementChild.classList.contains("dragging"), 190 "dragging class is never set on the root element" 191 ); 192 ok(true, "The dragging class is set on the root element"); 193 194 const event = new MouseEvent("mousemove", { clientX }); 195 resizer.dispatchEvent(event); 196 197 info("Mouse up to stop resizing"); 198 synthesizeMouseAtCenter(document.body, { button: 0, type: "mouseup" }, window); 199 200 await SimpleTest.promiseWaitForCondition( 201 () => !document.firstElementChild.classList.contains("dragging"), 202 "dragging class is never removed from the root element" 203 ); 204 ok(true, "The dragging class is removed from the root element"); 205 } 206 }; 207 </script> 208 </pre> 209 </body> 210 </html>