browser_cubic-bezier-02.js (7425B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests the CubicBezierWidget events 7 8 const { 9 CubicBezierWidget, 10 } = require("resource://devtools/client/shared/widgets/CubicBezierWidget.js"); 11 const { 12 PREDEFINED, 13 } = require("resource://devtools/client/shared/widgets/CubicBezierPresets.js"); 14 15 // In this test we have to use a slightly more complete HTML tree, with <body> 16 // in order to remove its margin and prevent shifted positions 17 const TEST_URI = CHROME_URL_ROOT + "doc_cubic-bezier-02.html"; 18 19 add_task(async function () { 20 const { host, win, doc } = await createHost("bottom", TEST_URI); 21 22 // Required or widget will be clipped inside of 'bottom' 23 // host by -14. Setting `fixed` zeroes this which is needed for 24 // calculating offsets. Occurs in test env only. 25 doc.body.setAttribute("style", "position: fixed; margin: 0;"); 26 27 const container = doc.querySelector("#cubic-bezier-container"); 28 const w = new CubicBezierWidget(container, PREDEFINED.linear); 29 30 const rect = w.curve.getBoundingClientRect(); 31 rect.graphTop = rect.height * w.bezierCanvas.padding[0]; 32 rect.graphBottom = rect.height - rect.graphTop; 33 rect.graphHeight = rect.graphBottom - rect.graphTop; 34 35 await pointsCanBeDragged(w, win, doc, rect); 36 await curveCanBeClicked(w, win, doc, rect); 37 await pointsCanBeMovedWithKeyboard(w, win, doc, rect); 38 39 w.destroy(); 40 host.destroy(); 41 }); 42 43 async function pointsCanBeDragged(widget, win, doc, offsets) { 44 info("Checking that the control points can be dragged with the mouse"); 45 46 info("Listening for the update event"); 47 let onUpdated = widget.once("updated"); 48 49 info("Generating a mousedown/move/up on P1"); 50 widget._onPointMouseDown({ target: widget.p1 }); 51 doc.onmousemove({ pageX: offsets.left, pageY: offsets.graphTop }); 52 doc.onmouseup(); 53 54 let bezier = await onUpdated; 55 ok(true, "The widget fired the updated event"); 56 ok(bezier, "The updated event contains a bezier argument"); 57 is(bezier.P1[0], 0, "The new P1 time coordinate is correct"); 58 is(bezier.P1[1], 1, "The new P1 progress coordinate is correct"); 59 60 info("Listening for the update event"); 61 onUpdated = widget.once("updated"); 62 63 info("Generating a mousedown/move/up on P2"); 64 widget._onPointMouseDown({ target: widget.p2 }); 65 doc.onmousemove({ pageX: offsets.right, pageY: offsets.graphBottom }); 66 doc.onmouseup(); 67 68 bezier = await onUpdated; 69 is(bezier.P2[0], 1, "The new P2 time coordinate is correct"); 70 is(bezier.P2[1], 0, "The new P2 progress coordinate is correct"); 71 } 72 73 async function curveCanBeClicked(widget, win, doc, offsets) { 74 info("Checking that clicking on the curve moves the closest control point"); 75 76 info("Listening for the update event"); 77 let onUpdated = widget.once("updated"); 78 79 info("Click close to P1"); 80 let x = offsets.left + offsets.width / 4.0; 81 let y = offsets.graphTop + offsets.graphHeight / 4.0; 82 widget._onCurveClick({ pageX: x, pageY: y }); 83 84 let bezier = await onUpdated; 85 ok(true, "The widget fired the updated event"); 86 is(bezier.P1[0], 0.25, "The new P1 time coordinate is correct"); 87 is(bezier.P1[1], 0.75, "The new P1 progress coordinate is correct"); 88 is(bezier.P2[0], 1, "P2 time coordinate remained unchanged"); 89 is(bezier.P2[1], 0, "P2 progress coordinate remained unchanged"); 90 91 info("Listening for the update event"); 92 onUpdated = widget.once("updated"); 93 94 info("Click close to P2"); 95 x = offsets.right - offsets.width / 4; 96 y = offsets.graphBottom - offsets.graphHeight / 4; 97 widget._onCurveClick({ pageX: x, pageY: y }); 98 99 bezier = await onUpdated; 100 is(bezier.P2[0], 0.75, "The new P2 time coordinate is correct"); 101 is(bezier.P2[1], 0.25, "The new P2 progress coordinate is correct"); 102 is(bezier.P1[0], 0.25, "P1 time coordinate remained unchanged"); 103 is(bezier.P1[1], 0.75, "P1 progress coordinate remained unchanged"); 104 } 105 106 async function pointsCanBeMovedWithKeyboard(widget) { 107 info("Checking that points respond to keyboard events"); 108 109 const singleStep = 3; 110 const shiftStep = 30; 111 112 info("Moving P1 to the left"); 113 let newOffset = parseInt(widget.p1.style.left, 10) - singleStep; 114 let x = widget.bezierCanvas.offsetsToCoordinates({ 115 style: { left: newOffset }, 116 })[0]; 117 118 let onUpdated = widget.once("updated"); 119 widget._onPointKeyDown(getKeyEvent(widget.p1, 37)); 120 let bezier = await onUpdated; 121 122 is(bezier.P1[0], x, "The new P1 time coordinate is correct"); 123 is(bezier.P1[1], 0.75, "The new P1 progress coordinate is correct"); 124 125 info("Moving P1 to the left, fast"); 126 newOffset = parseInt(widget.p1.style.left, 10) - shiftStep; 127 x = widget.bezierCanvas.offsetsToCoordinates({ 128 style: { left: newOffset }, 129 })[0]; 130 131 onUpdated = widget.once("updated"); 132 widget._onPointKeyDown(getKeyEvent(widget.p1, 37, true)); 133 bezier = await onUpdated; 134 is(bezier.P1[0], x, "The new P1 time coordinate is correct"); 135 is(bezier.P1[1], 0.75, "The new P1 progress coordinate is correct"); 136 137 info("Moving P1 to the right, fast"); 138 newOffset = parseInt(widget.p1.style.left, 10) + shiftStep; 139 x = widget.bezierCanvas.offsetsToCoordinates({ 140 style: { left: newOffset }, 141 })[0]; 142 143 onUpdated = widget.once("updated"); 144 widget._onPointKeyDown(getKeyEvent(widget.p1, 39, true)); 145 bezier = await onUpdated; 146 is(bezier.P1[0], x, "The new P1 time coordinate is correct"); 147 is(bezier.P1[1], 0.75, "The new P1 progress coordinate is correct"); 148 149 info("Moving P1 to the bottom"); 150 newOffset = parseInt(widget.p1.style.top, 10) + singleStep; 151 let y = widget.bezierCanvas.offsetsToCoordinates({ 152 style: { top: newOffset }, 153 })[1]; 154 155 onUpdated = widget.once("updated"); 156 widget._onPointKeyDown(getKeyEvent(widget.p1, 40)); 157 bezier = await onUpdated; 158 is(bezier.P1[0], x, "The new P1 time coordinate is correct"); 159 is(bezier.P1[1], y, "The new P1 progress coordinate is correct"); 160 161 info("Moving P1 to the bottom, fast"); 162 newOffset = parseInt(widget.p1.style.top, 10) + shiftStep; 163 y = widget.bezierCanvas.offsetsToCoordinates({ 164 style: { top: newOffset }, 165 })[1]; 166 167 onUpdated = widget.once("updated"); 168 widget._onPointKeyDown(getKeyEvent(widget.p1, 40, true)); 169 bezier = await onUpdated; 170 is(bezier.P1[0], x, "The new P1 time coordinate is correct"); 171 is(bezier.P1[1], y, "The new P1 progress coordinate is correct"); 172 173 info("Moving P1 to the top, fast"); 174 newOffset = parseInt(widget.p1.style.top, 10) - shiftStep; 175 y = widget.bezierCanvas.offsetsToCoordinates({ 176 style: { top: newOffset }, 177 })[1]; 178 179 onUpdated = widget.once("updated"); 180 widget._onPointKeyDown(getKeyEvent(widget.p1, 38, true)); 181 bezier = await onUpdated; 182 is(bezier.P1[0], x, "The new P1 time coordinate is correct"); 183 is(bezier.P1[1], y, "The new P1 progress coordinate is correct"); 184 185 info("Checking that keyboard events also work with P2"); 186 info("Moving P2 to the left"); 187 newOffset = parseInt(widget.p2.style.left, 10) - singleStep; 188 x = widget.bezierCanvas.offsetsToCoordinates({ 189 style: { left: newOffset }, 190 })[0]; 191 192 onUpdated = widget.once("updated"); 193 widget._onPointKeyDown(getKeyEvent(widget.p2, 37)); 194 bezier = await onUpdated; 195 is(bezier.P2[0], x, "The new P2 time coordinate is correct"); 196 is(bezier.P2[1], 0.25, "The new P2 progress coordinate is correct"); 197 } 198 199 function getKeyEvent(target, keyCode, shift = false) { 200 return { 201 target, 202 keyCode, 203 shiftKey: shift, 204 preventDefault: () => {}, 205 }; 206 }