browser_inspector_highlighter-cssshape_07.js (6872B)
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 5 "use strict"; 6 7 // Test that shapes are updated correctly for scaling on one axis in transform mode. 8 9 const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html"; 10 const { TYPES } = ChromeUtils.importESModule( 11 "resource://devtools/shared/highlighters.mjs" 12 ); 13 const HIGHLIGHTER_TYPE = TYPES.SHAPES; 14 const SHAPE_SELECTORS = ["#polygon-transform", "#ellipse"]; 15 16 add_task(async function () { 17 const env = await openInspectorForURL(TEST_URL); 18 const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env); 19 const { highlighterTestFront, inspector } = env; 20 const view = selectRuleView(inspector); 21 const highlighters = view.highlighters; 22 const config = { 23 inspector, 24 view, 25 highlighters, 26 highlighterTestFront, 27 helper, 28 }; 29 30 await testOneDimScale(config); 31 }); 32 33 async function setup(config) { 34 const { inspector, view, selector, property, options } = config; 35 await selectNode(selector, inspector); 36 await toggleShapesHighlighter(view, selector, property, true, options); 37 } 38 39 async function teardown(config) { 40 const { view, selector, property } = config; 41 info(`Turn off shapes highlighter for ${selector}`); 42 await toggleShapesHighlighter(view, selector, property, false); 43 } 44 45 async function testOneDimScale(config) { 46 const { helper, highlighters } = config; 47 const options = { transformMode: true }; 48 const property = "clip-path"; 49 50 for (const selector of SHAPE_SELECTORS) { 51 await setup({ selector, property, options, ...config }); 52 const { mouse } = helper; 53 54 const { nw, width, height, center } = await getBoundingBoxInPx({ 55 selector, 56 ...config, 57 }); 58 59 // if the top or left edges are not visible, move the shape so it is. 60 if (nw[0] < 0 || nw[1] < 0) { 61 const [x, y] = center; 62 const dx = Math.max(0, -nw[0]); 63 const dy = Math.max(0, -nw[1]); 64 await mouse.down(x, y, selector); 65 await mouse.move(x + dx, y + dy, selector); 66 await mouse.up(x + dx, y + dy, selector); 67 await reflowContentPage(); 68 nw[0] += dx; 69 nw[1] += dy; 70 } 71 const dx = width / 10; 72 const dy = height / 10; 73 let onShapeChangeApplied; 74 75 info("Scaling from w"); 76 onShapeChangeApplied = highlighters.once( 77 "shapes-highlighter-changes-applied" 78 ); 79 await mouse.down(nw[0], center[1], selector); 80 await mouse.move(nw[0] + dx, center[1], selector); 81 await mouse.up(nw[0] + dx, center[1], selector); 82 await reflowContentPage(); 83 await onShapeChangeApplied; 84 85 const wBB = await getBoundingBoxInPx({ selector, ...config }); 86 isnot(wBB.nw[0], nw[0], `${selector} nw moved right after w scale`); 87 is(wBB.nw[1], nw[1], `${selector} nw not moved down after w scale`); 88 isnot(wBB.width, width, `${selector} width reduced after w scale`); 89 is(wBB.height, height, `${selector} height not reduced after w scale`); 90 91 info("Scaling from e"); 92 onShapeChangeApplied = highlighters.once( 93 "shapes-highlighter-changes-applied" 94 ); 95 await mouse.down(wBB.ne[0], center[1], selector); 96 await mouse.move(wBB.ne[0] - dx, center[1], selector); 97 await mouse.up(wBB.ne[0] - dx, center[1], selector); 98 await reflowContentPage(); 99 await onShapeChangeApplied; 100 101 const eBB = await getBoundingBoxInPx({ selector, ...config }); 102 isnot(eBB.ne[0], wBB.ne[0], `${selector} ne moved left after e scale`); 103 is(eBB.ne[1], wBB.ne[1], `${selector} ne not moved down after e scale`); 104 isnot(eBB.width, wBB.width, `${selector} width reduced after e scale`); 105 is(eBB.height, wBB.height, `${selector} height not reduced after e scale`); 106 107 info("Scaling from s"); 108 onShapeChangeApplied = highlighters.once( 109 "shapes-highlighter-changes-applied" 110 ); 111 await mouse.down(eBB.center[0], eBB.sw[1], selector); 112 await mouse.move(eBB.center[0], eBB.sw[1] - dy, selector); 113 await mouse.up(eBB.center[0], eBB.sw[1] - dy, selector); 114 await reflowContentPage(); 115 await onShapeChangeApplied; 116 117 const sBB = await getBoundingBoxInPx({ selector, ...config }); 118 is(sBB.sw[0], eBB.sw[0], `${selector} sw not moved right after w scale`); 119 isnot(sBB.sw[1], eBB.sw[1], `${selector} sw moved down after w scale`); 120 is(sBB.width, eBB.width, `${selector} width not reduced after w scale`); 121 isnot(sBB.height, eBB.height, `${selector} height reduced after w scale`); 122 123 info("Scaling from n"); 124 onShapeChangeApplied = highlighters.once( 125 "shapes-highlighter-changes-applied" 126 ); 127 await mouse.down(sBB.center[0], sBB.nw[1], selector); 128 await mouse.move(sBB.center[0], sBB.nw[1] + dy, selector); 129 await mouse.up(sBB.center[0], sBB.nw[1] + dy, selector); 130 await reflowContentPage(); 131 await onShapeChangeApplied; 132 133 const nBB = await getBoundingBoxInPx({ selector, ...config }); 134 is(nBB.nw[0], sBB.nw[0], `${selector} nw not moved right after n scale`); 135 isnot(nBB.nw[1], sBB.nw[1], `${selector} nw moved down after n scale`); 136 is(nBB.width, sBB.width, `${selector} width reduced after n scale`); 137 isnot( 138 nBB.height, 139 sBB.height, 140 `${selector} height not reduced after n scale` 141 ); 142 143 await teardown({ selector, property, ...config }); 144 } 145 } 146 147 async function getBoundingBoxInPx(config) { 148 const { highlighterTestFront, selector, inspector } = config; 149 const quads = await getAllAdjustedQuadsForContentPageElement(selector); 150 const { width, height } = quads.content[0].bounds; 151 const highlightedNode = await getNodeFront(selector, inspector); 152 const highlighterFront = 153 inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE); 154 const computedStyle = 155 await highlightedNode.inspectorFront.pageStyle.getComputed(highlightedNode); 156 const paddingTop = parseFloat(computedStyle["padding-top"].value); 157 const paddingLeft = parseFloat(computedStyle["padding-left"].value); 158 // path is always of form "Mx y Lx y Lx y Lx y Z", where x/y are numbers 159 const path = await highlighterTestFront.getHighlighterNodeAttribute( 160 "shapes-bounding-box", 161 "d", 162 highlighterFront 163 ); 164 const coords = path 165 .replace(/[MLZ]/g, "") 166 .split(" ") 167 .map((n, i) => { 168 return i % 2 === 0 169 ? paddingLeft + (width * n) / 100 170 : paddingTop + (height * n) / 100; 171 }); 172 173 const nw = [coords[0], coords[1]]; 174 const ne = [coords[2], coords[3]]; 175 const se = [coords[4], coords[5]]; 176 const sw = [coords[6], coords[7]]; 177 const center = [(nw[0] + se[0]) / 2, (nw[1] + se[1]) / 2]; 178 const shapeWidth = Math.sqrt((ne[0] - nw[0]) ** 2 + (ne[1] - nw[1]) ** 2); 179 const shapeHeight = Math.sqrt((sw[0] - nw[0]) ** 2 + (sw[1] - nw[1]) ** 2); 180 181 return { nw, ne, se, sw, center, width: shapeWidth, height: shapeHeight }; 182 }