flexbox-dyn-insertEmptySpan-1.xhtml (4024B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 This test is a variant of flexbox-dyn-insertAroundText-3.xhtml with the 8 inserted spans being empty & having padding. This triggered invalidation 9 issues with an older work-in-progress patch, so I'm adding this reftest to 10 track that issue & prevent it from regressing. 11 --> 12 <html xmlns="http://www.w3.org/1999/xhtml" 13 class="reftest-wait"> 14 <head> 15 <style> 16 body { font-size: 10px; } 17 18 <!-- to make inserted span elements stand out --> 19 span { 20 background: teal; 21 padding: 3px; 22 } 23 24 div.flexbox { 25 border: 1px dashed blue; 26 width: 300px; 27 display: flex; 28 justify-content: space-around; 29 margin-bottom: 1px; 30 white-space: pre; 31 } 32 </style> 33 <script> 34 function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { 35 var parent = document.getElementById(aParentId); 36 var insertBeforeTarget = parent.firstChild; 37 for (var i = 0; i < aPosn; i++) { 38 insertBeforeTarget = insertBeforeTarget.nextSibling; 39 } 40 parent.insertBefore(aNodeToInsert, insertBeforeTarget); 41 } 42 43 function createSpanElem() { 44 return document.createElement("span"); 45 } 46 47 function tweak() { 48 // Inserting span, on either side of existing content 49 // -------------------------------------------------- 50 insertNodeAtPosnInElem(createSpanElem(), 0, "f0"); 51 insertNodeAtPosnInElem(createSpanElem(), 1, "f1"); 52 53 // Inserting span and whitespace, before existing content 54 // ------------------------------------------------------ 55 insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); 56 insertNodeAtPosnInElem(createSpanElem(), 0, "f2"); 57 58 insertNodeAtPosnInElem(createSpanElem(), 0, "f3"); 59 insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); 60 61 // Inserting span and whitespace, after existing content 62 // ----------------------------------------------------- 63 insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); 64 insertNodeAtPosnInElem(createSpanElem(), 1, "f4"); 65 66 insertNodeAtPosnInElem(createSpanElem(), 1, "f5"); 67 insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); 68 69 // Inserting span and text, before existing content 70 // ------------------------------------------------ 71 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); 72 insertNodeAtPosnInElem(createSpanElem(), 0, "f6"); 73 74 insertNodeAtPosnInElem(createSpanElem(), 0, "f7"); 75 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); 76 77 // Inserting span and text, after existing content 78 // ----------------------------------------------- 79 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); 80 insertNodeAtPosnInElem(createSpanElem(), 1, "f8"); 81 82 insertNodeAtPosnInElem(createSpanElem(), 1, "f9"); 83 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); 84 85 document.documentElement.removeAttribute("class"); 86 } 87 88 window.addEventListener("MozReftestInvalidate", tweak, false); 89 </script> 90 </head> 91 <body> 92 <div class="flexbox" id="f0">[orig]</div> 93 <div class="flexbox" id="f1">[orig]</div> 94 <div class="flexbox" id="f2">[orig]</div> 95 <div class="flexbox" id="f3">[orig]</div> 96 <div class="flexbox" id="f4">[orig]</div> 97 <div class="flexbox" id="f5">[orig]</div> 98 <div class="flexbox" id="f6">[orig]</div> 99 <div class="flexbox" id="f7">[orig]</div> 100 <div class="flexbox" id="f8">[orig]</div> 101 <div class="flexbox" id="f9">[orig]</div> 102 </body> 103 </html>