feat(web): sure, why not add some dynamicness to that last one?

This commit is contained in:
Joshua A. Horton 2023-04-28 12:45:56 +07:00
parent db0dc335de
commit 4fa5ea6ee5
2 changed files with 55 additions and 1 deletions

View file

@ -587,7 +587,7 @@ describe.only('KMW element-attachment logic', function () {
attacher.shutdown();
});
it('tricky layout with absolute positioning', function () {
it('five inputs with absolute positioning', function () {
fixture.load("wild-absolute-positioning.html");
const attacher = this.attacher;
@ -617,6 +617,58 @@ describe.only('KMW element-attachment logic', function () {
]);
attacher.shutdown();
});
it('seven inputs with absolute positioning, two added dynamically', async function () {
fixture.load("wild-absolute-positioning.html");
const attacher = this.attacher;
let attached = [];
attacher.on('enabled', (elem) => attached.push(elem));
attacher.install(false);
// Numerals: the order of their definition within the HTML fixture.
// Directionals: the actual positioning on the page.
const elements = [
"input1-middle",
"input2-top-right",
"input3-bottom-left",
"input4-top-left",
"input5-bottom-right"
];
assert.sameMembers(attached.map((elem) => elem.id), elements);
// Top to bottom, left to right.
assert.sameOrderedMembers(attacher.sortedInputs.map((elem) => elem.id), [
"input4-top-left",
"input2-top-right",
"input1-middle",
"input3-bottom-left",
"input5-bottom-right"
]);
fixture.load("wild-absolute-positioning-extras.html", /* append = */ true );
// Let the MutationObservers handle things
await Promise.resolve();
elements.push("input6-middle-left");
elements.push("input7-top-middle");
assert.sameMembers(attached.map((elem) => elem.id), elements);
// Top to bottom, left to right.
assert.sameOrderedMembers(attacher.sortedInputs.map((elem) => elem.id), [
"input4-top-left",
"input7-top-middle",
"input2-top-right",
"input6-middle-left",
"input1-middle",
"input3-bottom-left",
"input5-bottom-right"
]);
attacher.shutdown();
});
});
describe.skip("maintenance of site-intended .inputMode", () => {

View file

@ -0,0 +1,2 @@
<input id="input6-middle-left" style="position: absolute; left:0%; top:50%;"/>
<input id="input7-top-middle" style="position: absolute; left:40%; top:0%; width:20%"/>