|
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 inserts a new div into some inline content in a flex container. |
|
8 That should split the inline content into two flex items. |
|
9 --> |
|
10 <html xmlns="http://www.w3.org/1999/xhtml" |
|
11 class="reftest-wait"> |
|
12 <head> |
|
13 <link rel="stylesheet" type="text/css" href="ahem.css" /> |
|
14 <script> |
|
15 function tweak() { |
|
16 var flexbox = document.getElementsByClassName("flexbox")[0]; |
|
17 var insertionPoint = flexbox.firstChild.nextSibling.nextSibling; |
|
18 |
|
19 var newDiv = document.createElement("div"); |
|
20 newDiv.setAttribute("class", "b"); |
|
21 |
|
22 flexbox.insertBefore(newDiv, insertionPoint); |
|
23 |
|
24 document.documentElement.removeAttribute("class"); |
|
25 } |
|
26 |
|
27 window.addEventListener("MozReftestInvalidate", tweak, false); |
|
28 </script> |
|
29 <style> |
|
30 div { height: 100px; } |
|
31 div.flexbox { |
|
32 font: 10px Ahem; |
|
33 width: 200px; |
|
34 display: flex; |
|
35 } |
|
36 div.a { |
|
37 flex: 1 0 20px; |
|
38 background: lightgreen; |
|
39 } |
|
40 div.b { |
|
41 flex: 2 0 30px; |
|
42 background: yellow; |
|
43 } |
|
44 div.inflex { |
|
45 flex: 0 0 20px; |
|
46 background: gray; |
|
47 } |
|
48 </style> |
|
49 </head> |
|
50 <body> |
|
51 <div class="flexbox" |
|
52 ><div class="a"/>text<i>italic</i |
|
53 ><div class="inflex"/></div> |
|
54 </body> |
|
55 </html> |