|
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 verifies that we reconstruct frames as necessary, after content |
|
8 (including whitespace & spans) is dynamically inserted as a child of a |
|
9 flexbox. (Note that in cases where we know the whitespace is going to be |
|
10 dropped, we don't bother reconstructing frames. This test is to be sure we |
|
11 aren't overzealous with that optimization.) |
|
12 --> |
|
13 <html xmlns="http://www.w3.org/1999/xhtml" |
|
14 class="reftest-wait"> |
|
15 <head> |
|
16 <style> |
|
17 body { font-size: 10px; } |
|
18 |
|
19 <!-- to make inserted span elements stand out --> |
|
20 span.inserted { background: teal; } |
|
21 |
|
22 div.flexbox { |
|
23 border: 1px dashed blue; |
|
24 width: 300px; |
|
25 display: flex; |
|
26 justify-content: space-around; |
|
27 margin-bottom: 1px; |
|
28 white-space: pre; |
|
29 } |
|
30 </style> |
|
31 <script> |
|
32 function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { |
|
33 var parent = document.getElementById(aParentId); |
|
34 var insertBeforeTarget = parent.firstChild; |
|
35 for (var i = 0; i < aPosn; i++) { |
|
36 insertBeforeTarget = insertBeforeTarget.nextSibling; |
|
37 } |
|
38 parent.insertBefore(aNodeToInsert, insertBeforeTarget); |
|
39 } |
|
40 |
|
41 function createSpanElem() { |
|
42 var span = document.createElement("span"); |
|
43 span.setAttribute("class", "inserted"); |
|
44 span.appendChild(document.createTextNode("[NewSpan]")); |
|
45 return span; |
|
46 } |
|
47 |
|
48 function tweak() { |
|
49 // Inserting span, on either side of existing content |
|
50 // -------------------------------------------------- |
|
51 insertNodeAtPosnInElem(createSpanElem(), 0, "f0"); |
|
52 insertNodeAtPosnInElem(createSpanElem(), 1, "f1"); |
|
53 |
|
54 // Inserting span and whitespace, before existing content |
|
55 // ------------------------------------------------------ |
|
56 insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); |
|
57 insertNodeAtPosnInElem(createSpanElem(), 0, "f2"); |
|
58 |
|
59 insertNodeAtPosnInElem(createSpanElem(), 0, "f3"); |
|
60 insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); |
|
61 |
|
62 // Inserting span and whitespace, after existing content |
|
63 // ----------------------------------------------------- |
|
64 insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); |
|
65 insertNodeAtPosnInElem(createSpanElem(), 1, "f4"); |
|
66 |
|
67 insertNodeAtPosnInElem(createSpanElem(), 1, "f5"); |
|
68 insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); |
|
69 |
|
70 // Inserting span and text, before existing content |
|
71 // ------------------------------------------------ |
|
72 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); |
|
73 insertNodeAtPosnInElem(createSpanElem(), 0, "f6"); |
|
74 |
|
75 insertNodeAtPosnInElem(createSpanElem(), 0, "f7"); |
|
76 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); |
|
77 |
|
78 // Inserting span and text, after existing content |
|
79 // ----------------------------------------------- |
|
80 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); |
|
81 insertNodeAtPosnInElem(createSpanElem(), 1, "f8"); |
|
82 |
|
83 insertNodeAtPosnInElem(createSpanElem(), 1, "f9"); |
|
84 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); |
|
85 |
|
86 document.documentElement.removeAttribute("class"); |
|
87 } |
|
88 |
|
89 window.addEventListener("MozReftestInvalidate", tweak, false); |
|
90 </script> |
|
91 </head> |
|
92 <body> |
|
93 <div class="flexbox" id="f0"><div>[OldText]</div></div> |
|
94 <div class="flexbox" id="f1"><div>[OldText]</div></div> |
|
95 <div class="flexbox" id="f2"><div>[OldText]</div></div> |
|
96 <div class="flexbox" id="f3"><div>[OldText]</div></div> |
|
97 <div class="flexbox" id="f4"><div>[OldText]</div></div> |
|
98 <div class="flexbox" id="f5"><div>[OldText]</div></div> |
|
99 <div class="flexbox" id="f6"><div>[OldText]</div></div> |
|
100 <div class="flexbox" id="f7"><div>[OldText]</div></div> |
|
101 <div class="flexbox" id="f8"><div>[OldText]</div></div> |
|
102 <div class="flexbox" id="f9"><div>[OldText]</div></div> |
|
103 </body> |
|
104 </html> |