|
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> |