⎇ devin/1784869041-flex-baseline-container
test_fixtures/float/xfloat_max_content.html
Historia
crudo
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <script src="../../scripts/gentest/test_helper.js"></script>
5 <link rel="stylesheet" type="text/css" href="../scripts/gentest/test_base_style.css">
6 <title>
7 Test description
8 </title>
9</head>
10<body>
11
12<div style="display: block; width: max-content; border: 2px solid green;">
13 HH
14 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
15 HH
16 <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
17 HH
18 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
19 HH
20 <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
21 HH
22 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
23 HH
24 <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
25 HH
26 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
27 HH
28 <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
29</div>
30 <div style="clear: both; border: 2px solid black;"></div>
31<div style="display: block; width: max-content; border: 2px solid green;">
32 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
33 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
34 <div style="display: flow-root;">Flow Root</div>
35 <div style="display: flow-root;">Flow Root</div>
36 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
37 <div style="display: flow-root;">Flow Root</div>
38</div>
39 <div style="clear: both; border: 2px solid black;"></div>
40<div style="display: block; width: max-content; border: 2px solid green;">
41 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
42 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
43 Inline content
44 <div style="display: block;">Same BFC</div>
45 <div style="display: block;">Same BFC</div>
46 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
47 <div style="display: block;">Same BFC</div>
48</div>
49 <div style="clear: both; border: 2px solid black;"></div>
50<div style="display: block; width: max-content; border: 2px solid green;">
51 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
52 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
53 <div style="display: flow-root;">Flow root</div>
54 <div style="display: flow-root;">Flow root</div>
55 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
56 <div style="display: block;">Same BFC</div>
57</div>
58 <div style="clear: both; border: 2px solid black;"></div>
59<div style="display: block; width: max-content; border: 2px solid green;">
60 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
61 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
62 <div style="display: block;">Same BFC Block</div>
63 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
64</div>
65 <div style="clear: both; border: 2px solid black;"></div>
66<div style="display: block; width: max-content; border: 2px solid green;">
67 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
68 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
69 <div style="display: flow-root;">Flow Root
70 <div style="float: right; width: 50px; height: 30px; border: 2px solid red;"></div>
71 </div>
72 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
73 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
74</div>
75 <div style="clear: both; border: 2px solid black;"></div>
76<div style="display: block; width: max-content; border: 2px solid green;">
77 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
78 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
79 <div style="display: block;">Same BFC Block. reiogh reihg ierhg iorehg ioreh giorehg ioreh giorehgio
80 <div style="float: right; width: 50px; height: 30px; border: 2px solid red;"></div>
81 </div>
82 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
83 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
84</div>
85 <div style="clear: both; border: 2px solid black;"></div>
86<div style="display: block; width: max-content; border: 2px solid green;">
87 <div style="display: block;">Same BFC Block. reiogh reihg ierhg iorehg ioreh giorehg ioreh giorehgio</div>
88</div>
89<div style="display: block; width: max-content; border: 2px solid green;">
90 <div style="display: block;">Same BFC Block. reiogh reihg ierhg iorehg ioreh giorehg ioreh giorehgio</div>
91</div>
92
93</body>
94</html>