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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the flex item sizing info shows the correct dimension values for different
// writing modes. For vertical writing modes, row items should display height values and
// column items should display width values. The opposite is true for horizontal mode
// where rows display width values and columns display height.
const TEST_URI = URL_ROOT + "doc_flexbox_writing_modes.html";
async function checkFlexItemDimension(
inspector,
store,
doc,
selector,
expected
) {
info("Select the container's flex item.");
const onUpdate = waitForDispatch(store, "UPDATE_FLEXBOX");
await selectNode(selector, inspector);
await onUpdate;
info("Check that the minimum size section shows the correct dimension.");
const sectionMinRowItem = doc.querySelector(".flex-item-sizing .section.min");
const minDimension = sectionMinRowItem.querySelector(".css-property-link");
ok(
minDimension.textContent.includes(expected),
"The flex item sizing has the correct dimension value."
);
}
add_task(async function () {
await addTab(TEST_URI);
const { inspector, flexboxInspector } = await openLayoutView();
const { document: doc, store } = flexboxInspector;
await checkFlexItemDimension(
inspector,
store,
doc,
".row.vertical-rl.item",
"min-height"
);
await checkFlexItemDimension(
inspector,
store,
doc,
".column.vertical-tb.item",
"min-height"
);
await checkFlexItemDimension(
inspector,
store,
doc,
".row.vertical-bt.item",
"min-height"
);
await checkFlexItemDimension(
inspector,
store,
doc,
".column.horizontal-rl.item",
"min-width"
);
await checkFlexItemDimension(
inspector,
store,
doc,
".row.horizontal-lr.item",
"min-width"
);
});
|
