|
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 { |
|
18 font-size: 10px; |
|
19 } |
|
20 |
|
21 span.inserted { |
|
22 background: teal; /* To make inserted span elements stand out. */ |
|
23 } |
|
24 |
|
25 div.flexbox { |
|
26 border: 1px dashed blue; |
|
27 width: 300px; |
|
28 display: flex; |
|
29 justify-content: space-around; |
|
30 margin-bottom: 1px; |
|
31 white-space: pre; |
|
32 } |
|
33 </style> |
|
34 <script> |
|
35 function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { |
|
36 var parent = document.getElementById(aParentId); |
|
37 var insertBeforeTarget = parent.firstChild; |
|
38 for (var i = 0; i < aPosn; i++) { |
|
39 insertBeforeTarget = insertBeforeTarget.nextSibling; |
|
40 } |
|
41 parent.insertBefore(aNodeToInsert, insertBeforeTarget); |
|
42 } |
|
43 |
|
44 function createSpanElem() { |
|
45 var span = document.createElement("span"); |
|
46 span.setAttribute("class", "inserted"); |
|
47 span.appendChild(document.createTextNode("[NewSpan]")); |
|
48 return span; |
|
49 } |
|
50 |
|
51 function tweak() { |
|
52 // Inserting span, on either side of existing content |
|
53 // -------------------------------------------------- |
|
54 insertNodeAtPosnInElem(createSpanElem(), 0, "f0"); |
|
55 insertNodeAtPosnInElem(createSpanElem(), 1, "f1"); |
|
56 |
|
57 // Inserting span and whitespace, before existing content |
|
58 // ------------------------------------------------------ |
|
59 insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); |
|
60 insertNodeAtPosnInElem(createSpanElem(), 0, "f2"); |
|
61 |
|
62 insertNodeAtPosnInElem(createSpanElem(), 0, "f3"); |
|
63 insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); |
|
64 |
|
65 // Inserting span and whitespace, after existing content |
|
66 // ----------------------------------------------------- |
|
67 insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); |
|
68 insertNodeAtPosnInElem(createSpanElem(), 1, "f4"); |
|
69 |
|
70 insertNodeAtPosnInElem(createSpanElem(), 1, "f5"); |
|
71 insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); |
|
72 |
|
73 // Inserting span and text, before existing content |
|
74 // ------------------------------------------------ |
|
75 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); |
|
76 insertNodeAtPosnInElem(createSpanElem(), 0, "f6"); |
|
77 |
|
78 insertNodeAtPosnInElem(createSpanElem(), 0, "f7"); |
|
79 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); |
|
80 |
|
81 // Inserting span and text, after existing content |
|
82 // ----------------------------------------------- |
|
83 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); |
|
84 insertNodeAtPosnInElem(createSpanElem(), 1, "f8"); |
|
85 |
|
86 insertNodeAtPosnInElem(createSpanElem(), 1, "f9"); |
|
87 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); |
|
88 |
|
89 document.documentElement.removeAttribute("class"); |
|
90 } |
|
91 |
|
92 window.addEventListener("MozReftestInvalidate", tweak, false); |
|
93 </script> |
|
94 </head> |
|
95 <body> |
|
96 <div class="flexbox" id="f0">[OldText]</div> |
|
97 <div class="flexbox" id="f1">[OldText]</div> |
|
98 <div class="flexbox" id="f2">[OldText]</div> |
|
99 <div class="flexbox" id="f3">[OldText]</div> |
|
100 <div class="flexbox" id="f4">[OldText]</div> |
|
101 <div class="flexbox" id="f5">[OldText]</div> |
|
102 <div class="flexbox" id="f6">[OldText]</div> |
|
103 <div class="flexbox" id="f7">[OldText]</div> |
|
104 <div class="flexbox" id="f8">[OldText]</div> |
|
105 <div class="flexbox" id="f9">[OldText]</div> |
|
106 </body> |
|
107 </html> |