1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
/* 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(function* () {
let {inspector, testActor} = yield openInspectorForURL(
"data:text/html;charset=utf-8," + encodeURI(TEST_URL));
let front = inspector.inspector;
let highlighter = yield front.getHighlighterByType("CssTransformHighlighter");
yield isHiddenByDefault(testActor, highlighter);
yield has2PolygonsAnd4Lines(testActor, highlighter);
yield isNotShownForUntransformed(testActor, inspector, highlighter);
yield isNotShownForInline(testActor, inspector, highlighter);
yield isVisibleWhenShown(testActor, inspector, highlighter);
yield linesLinkThePolygons(testActor, inspector, highlighter);
yield highlighter.finalize();
});
function* isHiddenByDefault(testActor, highlighterFront) {
info("Checking that the highlighter is hidden by default");
let hidden = yield testActor.getHighlighterNodeAttribute(
"css-transform-elements", "hidden", highlighterFront);
ok(hidden, "The highlighter is hidden by default");
}
function* has2PolygonsAnd4Lines(testActor, highlighterFront) {
info("Checking that the highlighter is made up of 4 lines and 2 polygons");
let value = yield testActor.getHighlighterNodeAttribute(
"css-transform-untransformed", "class", highlighterFront);
is(value, "css-transform-untransformed", "The untransformed polygon exists");
value = yield testActor.getHighlighterNodeAttribute(
"css-transform-transformed", "class", highlighterFront);
is(value, "css-transform-transformed", "The transformed polygon exists");
for (let nb of ["1", "2", "3", "4"]) {
value = yield testActor.getHighlighterNodeAttribute(
"css-transform-line" + nb, "class", highlighterFront);
is(value, "css-transform-line", "The line " + nb + " exists");
}
}
function* isNotShownForUntransformed(testActor, inspector, highlighterFront) {
info("Asking to show the highlighter on the untransformed test node");
let node = yield getNodeFront("#untransformed", inspector);
yield highlighterFront.show(node);
let hidden = yield testActor.getHighlighterNodeAttribute(
"css-transform-elements", "hidden", highlighterFront);
ok(hidden, "The highlighter is still hidden");
}
function* isNotShownForInline(testActor, inspector, highlighterFront) {
info("Asking to show the highlighter on the inline test node");
let node = yield getNodeFront("#inline", inspector);
yield highlighterFront.show(node);
let hidden = yield testActor.getHighlighterNodeAttribute(
"css-transform-elements", "hidden", highlighterFront);
ok(hidden, "The highlighter is still hidden");
}
function* isVisibleWhenShown(testActor, inspector, highlighterFront) {
info("Asking to show the highlighter on the test node");
let node = yield getNodeFront("#transformed", inspector);
yield highlighterFront.show(node);
let hidden = yield testActor.getHighlighterNodeAttribute(
"css-transform-elements", "hidden", highlighterFront);
ok(!hidden, "The highlighter is visible");
info("Hiding the highlighter");
yield highlighterFront.hide();
hidden = yield testActor.getHighlighterNodeAttribute(
"css-transform-elements", "hidden", highlighterFront);
ok(hidden, "The highlighter is hidden");
}
function* linesLinkThePolygons(testActor, inspector, highlighterFront) {
info("Showing the highlighter on the transformed node");
let node = yield getNodeFront("#transformed", inspector);
yield highlighterFront.show(node);
info("Checking that the 4 lines do link the 2 shape's corners");
let lines = [];
for (let nb of ["1", "2", "3", "4"]) {
let x1 = yield testActor.getHighlighterNodeAttribute(
"css-transform-line" + nb, "x1", highlighterFront);
let y1 = yield testActor.getHighlighterNodeAttribute(
"css-transform-line" + nb, "y1", highlighterFront);
let x2 = yield testActor.getHighlighterNodeAttribute(
"css-transform-line" + nb, "x2", highlighterFront);
let y2 = yield testActor.getHighlighterNodeAttribute(
"css-transform-line" + nb, "y2", highlighterFront);
lines.push({x1, y1, x2, y2});
}
let points1 = yield testActor.getHighlighterNodeAttribute(
"css-transform-untransformed", "points", highlighterFront);
points1 = points1.split(" ");
let points2 = yield testActor.getHighlighterNodeAttribute(
"css-transform-transformed", "points", highlighterFront);
points2 = points2.split(" ");
for (let i = 0; i < lines.length; i++) {
info("Checking line nb " + i);
let line = lines[i];
let 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");
let 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");
}
yield highlighterFront.hide();
}
|
