tawasuyu

tawasuyu/taffy

A high performance rust-powered UI layout library

Rust 709HTML 662Markdown 12TOML 62348 Definiciones

⎇ units test_fixtures/float/xfloat_max_content.html HTML · 94 líneas · 4.8 KB Historia crudo

Implement Floats (#866) 25759dad4 · Nico Burns ·

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>