<?xml version="1.0" encoding="UTF-8"?> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <!-- This test is a variant of flexbox-dyn-insertAroundText-3.xhtml with the inserted spans being empty & having padding. This triggered invalidation issues with an older work-in-progress patch, so I'm adding this reftest to track that issue & prevent it from regressing. --> <html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> <head> <style> body { font-size: 10px; } <!-- to make inserted span elements stand out --> span { background: teal; padding: 3px; } 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 createSpanElem() { return document.createElement("span"); } function tweak() { // Inserting span, on either side of existing content // -------------------------------------------------- insertNodeAtPosnInElem(createSpanElem(), 0, "f0"); insertNodeAtPosnInElem(createSpanElem(), 1, "f1"); // Inserting span and whitespace, before existing content // ------------------------------------------------------ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); insertNodeAtPosnInElem(createSpanElem(), 0, "f2"); insertNodeAtPosnInElem(createSpanElem(), 0, "f3"); insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); // Inserting span and whitespace, after existing content // ----------------------------------------------------- insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); insertNodeAtPosnInElem(createSpanElem(), 1, "f4"); insertNodeAtPosnInElem(createSpanElem(), 1, "f5"); insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); // Inserting span and text, before existing content // ------------------------------------------------ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); insertNodeAtPosnInElem(createSpanElem(), 0, "f6"); insertNodeAtPosnInElem(createSpanElem(), 0, "f7"); insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); // Inserting span and text, after existing content // ----------------------------------------------- insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); insertNodeAtPosnInElem(createSpanElem(), 1, "f8"); insertNodeAtPosnInElem(createSpanElem(), 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">[orig]</div> <div class="flexbox" id="f1">[orig]</div> <div class="flexbox" id="f2">[orig]</div> <div class="flexbox" id="f3">[orig]</div> <div class="flexbox" id="f4">[orig]</div> <div class="flexbox" id="f5">[orig]</div> <div class="flexbox" id="f6">[orig]</div> <div class="flexbox" id="f7">[orig]</div> <div class="flexbox" id="f8">[orig]</div> <div class="flexbox" id="f9">[orig]</div> </body> </html>