Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/reftests/flexbox/reftest.list
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
-->
<!--
This test verifies that we reconstruct frames as necessary, after content
(including whitespace & divs) is dynamically inserted as a child of a
flexbox. (Note that in cases where we know the whitespace is going to be
dropped, we don't bother reconstructing frames. This test is to be sure we
aren't overzealous with that optimization.)
-->
class="reftest-wait">
<head>
<style>
body {
font-size: 10px;
}
div.inserted {
background: teal; /* To make inserted div elements stand out. */
}
div.flexbox {
border: 1px dashed blue;
width: 300px;
display: flex;
justify-content: space-around;
margin-bottom: 1px;
white-space: pre;
}
</style>
<script>
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
var parent = document.getElementById(aParentId);
var insertBeforeTarget = parent.firstChild;
for (var i = 0; i < aPosn; i++) {
insertBeforeTarget = insertBeforeTarget.nextSibling;
}
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
}
function createDivElem() {
var div = document.createElement("div");
div.setAttribute("class", "inserted");
div.appendChild(document.createTextNode("[NewDiv]"));
return div;
}
function tweak() {
// Inserting div, adjacent to inline content
// -----------------------------------------
insertNodeAtPosnInElem(createDivElem(), 0, "f0");
insertNodeAtPosnInElem(createDivElem(), 1, "f1");
// Inserting div and whitespace, before inline content
// ---------------------------------------------------
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
insertNodeAtPosnInElem(createDivElem(), 0, "f2");
insertNodeAtPosnInElem(createDivElem(), 0, "f3");
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
// Inserting div and whitespace, after inline content
// ---------------------------------------------------
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
insertNodeAtPosnInElem(createDivElem(), 1, "f4");
insertNodeAtPosnInElem(createDivElem(), 1, "f5");
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
// Inserting div and text, before inline content
// ---------------------------------------------------
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
insertNodeAtPosnInElem(createDivElem(), 0, "f6");
insertNodeAtPosnInElem(createDivElem(), 0, "f7");
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
// Inserting div and text, after inline content
// ---------------------------------------------------
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
insertNodeAtPosnInElem(createDivElem(), 1, "f8");
insertNodeAtPosnInElem(createDivElem(), 1, "f9");
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", tweak, false);
</script>
</head>
<body>
<div class="flexbox" id="f0"><span>[OldText]</span></div>
<div class="flexbox" id="f1"><span>[OldText]</span></div>
<div class="flexbox" id="f2"><span>[OldText]</span></div>
<div class="flexbox" id="f3"><span>[OldText]</span></div>
<div class="flexbox" id="f4"><span>[OldText]</span></div>
<div class="flexbox" id="f5"><span>[OldText]</span></div>
<div class="flexbox" id="f6"><span>[OldText]</span></div>
<div class="flexbox" id="f7"><span>[OldText]</span></div>
<div class="flexbox" id="f8"><span>[OldText]</span></div>
<div class="flexbox" id="f9"><span>[OldText]</span></div>
</body>
</html>