blob: f26ca751cdc7dab9fb55f33d80c89f647b761a5c (
plain)
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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the flex item outline is rotated for flex items in a column flexbox layout.
const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
add_task(async function () {
await addTab(TEST_URI);
const { inspector, flexboxInspector } = await openLayoutView();
const { document: doc } = flexboxInspector;
// Select a flex item in the row flexbox layout.
let onFlexItemOutlineRendered = waitForDOM(
doc,
".flex-outline-container .flex-outline"
);
await selectNode(".container .item", inspector);
let [flexOutline] = await onFlexItemOutlineRendered;
ok(
flexOutline.classList.contains("horizontal-lr"),
"The flex outline has the horizontal-lr class"
);
// Check that the outline is wider than it is tall in the configuration.
let bounds = flexOutline.getBoxQuads()[0].getBounds();
Assert.greater(bounds.width, bounds.height, "The outline looks like a row");
// Select a flex item in the column flexbox layout.
onFlexItemOutlineRendered = waitForDOM(
doc,
".flex-outline-container .flex-outline"
);
await selectNode(".container.column .item", inspector);
await waitUntil(() => {
flexOutline = doc.querySelector(
".flex-outline-container .flex-outline.vertical-tb"
);
return flexOutline;
});
ok(true, "The flex outline has the vertical-tb class");
// Check that the outline is taller than it is wide in the configuration.
bounds = flexOutline.getBoxQuads()[0].getBounds();
Assert.greater(
bounds.height,
bounds.width,
"The outline looks like a column"
);
});
|
