Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"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"
);
});