diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js | 229 |
1 files changed, 229 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js new file mode 100644 index 0000000000..934625867b --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js @@ -0,0 +1,229 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +// Test the creation of the SVG highlighter elements of the css transform +// highlighter. + +const TEST_URL = ` + <div id="transformed" + style="border:1px solid red;width:100px;height:100px;transform:skew(13deg);"> + </div> + <div id="untransformed" + style="border:1px solid blue;width:100px;height:100px;"> + </div> + <span id="inline" + style="transform:rotate(90deg);">this is an inline transformed element + </span> +`; + +add_task(async function () { + const { inspector, highlighterTestFront } = await openInspectorForURL( + "data:text/html;charset=utf-8," + encodeURI(TEST_URL) + ); + const front = inspector.inspectorFront; + + const highlighter = await front.getHighlighterByType( + "CssTransformHighlighter" + ); + + await isHiddenByDefault(highlighterTestFront, highlighter); + await has2PolygonsAnd4Lines(highlighterTestFront, highlighter); + await isNotShownForUntransformed( + highlighterTestFront, + inspector, + highlighter + ); + await isNotShownForInline(highlighterTestFront, inspector, highlighter); + await isVisibleWhenShown(highlighterTestFront, inspector, highlighter); + await linesLinkThePolygons(highlighterTestFront, inspector, highlighter); + + await highlighter.finalize(); +}); + +async function isHiddenByDefault(highlighterTestFront, highlighterFront) { + info("Checking that the highlighter is hidden by default"); + + const hidden = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-elements", + "hidden", + highlighterFront + ); + ok(hidden, "The highlighter is hidden by default"); +} + +async function has2PolygonsAnd4Lines(highlighterTestFront, highlighterFront) { + info("Checking that the highlighter is made up of 4 lines and 2 polygons"); + + let value = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-untransformed", + "class", + highlighterFront + ); + is(value, "css-transform-untransformed", "The untransformed polygon exists"); + + value = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-transformed", + "class", + highlighterFront + ); + is(value, "css-transform-transformed", "The transformed polygon exists"); + + for (const nb of ["1", "2", "3", "4"]) { + value = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-line" + nb, + "class", + highlighterFront + ); + is(value, "css-transform-line", "The line " + nb + " exists"); + } +} + +async function isNotShownForUntransformed( + highlighterTestFront, + inspector, + highlighterFront +) { + info("Asking to show the highlighter on the untransformed test node"); + + const node = await getNodeFront("#untransformed", inspector); + await highlighterFront.show(node); + + const hidden = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-elements", + "hidden", + highlighterFront + ); + ok(hidden, "The highlighter is still hidden"); +} + +async function isNotShownForInline( + highlighterTestFront, + inspector, + highlighterFront +) { + info("Asking to show the highlighter on the inline test node"); + + const node = await getNodeFront("#inline", inspector); + await highlighterFront.show(node); + + const hidden = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-elements", + "hidden", + highlighterFront + ); + ok(hidden, "The highlighter is still hidden"); +} + +async function isVisibleWhenShown( + highlighterTestFront, + inspector, + highlighterFront +) { + info("Asking to show the highlighter on the test node"); + + const node = await getNodeFront("#transformed", inspector); + await highlighterFront.show(node); + + let hidden = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-elements", + "hidden", + highlighterFront + ); + ok(!hidden, "The highlighter is visible"); + + info("Hiding the highlighter"); + await highlighterFront.hide(); + + hidden = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-elements", + "hidden", + highlighterFront + ); + ok(hidden, "The highlighter is hidden"); +} + +async function linesLinkThePolygons( + highlighterTestFront, + inspector, + highlighterFront +) { + info("Showing the highlighter on the transformed node"); + + const node = await getNodeFront("#transformed", inspector); + await highlighterFront.show(node); + + info("Checking that the 4 lines do link the 2 shape's corners"); + + const lines = []; + for (const nb of ["1", "2", "3", "4"]) { + const x1 = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-line" + nb, + "x1", + highlighterFront + ); + const y1 = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-line" + nb, + "y1", + highlighterFront + ); + const x2 = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-line" + nb, + "x2", + highlighterFront + ); + const y2 = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-line" + nb, + "y2", + highlighterFront + ); + lines.push({ x1, y1, x2, y2 }); + } + + let points1 = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-untransformed", + "points", + highlighterFront + ); + points1 = points1.split(" "); + + let points2 = await highlighterTestFront.getHighlighterNodeAttribute( + "css-transform-transformed", + "points", + highlighterFront + ); + points2 = points2.split(" "); + + for (let i = 0; i < lines.length; i++) { + info("Checking line nb " + i); + const line = lines[i]; + + const p1 = points1[i].split(","); + is( + p1[0], + line.x1, + "line " + i + "'s first point matches the untransformed x coordinate" + ); + is( + p1[1], + line.y1, + "line " + i + "'s first point matches the untransformed y coordinate" + ); + + const p2 = points2[i].split(","); + is( + p2[0], + line.x2, + "line " + i + "'s first point matches the transformed x coordinate" + ); + is( + p2[1], + line.y2, + "line " + i + "'s first point matches the transformed y coordinate" + ); + } + + await highlighterFront.hide(); +} |