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 &lt; 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