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 like flexbox-float-1a.xhtml, but with the float-styled 8 element dynamically inserted. 9--> 10<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> 11 <head> 12 <script> 13 function generateFloat(aFloatDirection) { 14 var newElem = document.createElement("span"); 15 newElem.setAttribute("style", "float: " + aFloatDirection); 16 newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]"; 17 return newElem; 18 } 19 20 function tweak() { 21 var containerList = document.getElementsByClassName("flexbox"); 22 for (var i = 0; i < containerList.length; i++) { 23 var container = containerList[i]; 24 var newElem = generateFloat(container.getAttribute("floatValToUse")); 25 26 var nodeToInsertBefore; 27 var insertPosn = container.getAttribute("insertPosn"); 28 if (insertPosn == "begin") { 29 nodeToInsertBefore = container.firstChild; 30 } else if (insertPosn == "mid") { 31 nodeToInsertBefore = container.firstChild.nextSibling; 32 } else if (insertPosn == "end") { 33 nodeToInsertBefore = null; 34 } 35 36 container.insertBefore(newElem, nodeToInsertBefore); 37 } 38 39 document.documentElement.removeAttribute("class"); 40 } 41 42 window.addEventListener("MozReftestInvalidate", tweak, false); 43 </script> 44 <style> 45 div.flexbox { 46 display: flex; 47 width: 400px; 48 margin-bottom: 2px; 49 font-family: sans-serif; 50 background: lightgreen; 51 justify-content: space-around; 52 } 53 </style> 54 </head> 55 <body> 56 <div class="flexbox" floatValToUse="left" insertPosn="mid"> 57 aaa<span>bbb</span> 58 </div> 59 <div class="flexbox" floatValToUse="right" insertPosn="mid"> 60 aaa<span>bbb</span> 61 </div> 62 <div class="flexbox" floatValToUse="left" insertPosn="end"> 63 aaa 64 </div> 65 <div class="flexbox" floatValToUse="right" insertPosn="end"> 66 aaa 67 </div> 68 <div class="flexbox" floatValToUse="left" insertPosn="begin"> 69 bbb 70 </div> 71 <div class="flexbox" floatValToUse="right" insertPosn="begin"> 72 bbb 73 </div> 74 </body> 75</html> 76