tawasuyu

tawasuyu/taffy

A high performance rust-powered UI layout library

Rust 583HTML 275Markdown 8TOML 41586 Sutichaykuna

⎇ direction-floats test_fixtures/float/xfloat_same_bfc_max_content.html HTML · 66 siq'ikuna · 2.8 KB Ñawpa willay ch'uya

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  <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>