⎇ devin/1784869041-flex-baseline-fixes
test_fixtures/float/xfloat_same_bfc_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 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
14 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
15 <div style="display: flow-root;">Flow Root</div>
16 <div style="display: flow-root;">Flow Root</div>
17 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
18 <div style="display: flow-root;">Flow Root</div>
19</div>
20
21<div style="clear: both; border: 2px solid black; margin: 10px 0;"></div>
22
23<div style="display: block; width: max-content; border: 2px solid green;">
24 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
25 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
26 Inline content<br />
27 Inline content<br />
28 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
29 Inline content<br />
30</div>
31
32<div style="clear: both; border: 2px solid black; margin: 10px 0;"></div>
33
34<div style="display: block; width: max-content; border: 2px solid green;">
35 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
36 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
37 <div style="display: flow-root;">Flow root</div>
38 <div style="display: flow-root;">Flow root</div>
39 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
40 <div style="display: block;">Same BFC</div>
41</div>
42
43<div style="clear: both; border: 2px solid black; margin: 10px 0;"></div>
44
45<div style="display: block; width: max-content; border: 2px solid green;">
46 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
47 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
48 <div style="display: block;">Same BFC</div>
49 <div style="display: block;">Same BFC</div>
50 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
51 <div style="display: block;">Same BFC</div>
52</div>
53
54<div style="clear: both; border: 2px solid black; margin: 10px 0;"></div>
55
56<div style="display: block; width: max-content; border: 2px solid green;">
57 <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
58 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
59 Inline Content
60 <div style="display: block;">Same BFC</div>
61 <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
62 <div style="display: block;">Same BFC</div>
63</div>
64
65</body>
66</html>