gioser

tawasuyu/taffy

A high performance rust-powered UI layout library

HTML 231Rust 10TOML 3CSS 1348 Sutichaykuna

Float Tests 1

30d343dabe1b4f761fc73ed9f627c91fc936e7fd · ruwaq Nico Burns · (2 wata ñawpaq) · tayta 3a7cffaca · kay commitpi sach'ata qhaway

Semántico sayk'uy

Mana ima sutichaypas t'ikrakurqanchu: qillqalla, yachachiylla utaq willaylla t'ikrakurqan.

4 qillqakuna · +217 −0

diff --git a/test_fixtures/float/float_max_content.html b/test_fixtures/float/float_max_content.html
new file mode 100644
index 000000000..576a70643
--- /dev/null
+++ b/test_fixtures/float/float_max_content.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../scripts/gentest/test_base_style.css">
+  <title>
+    Test description
+  </title>
+</head>
+<body>
+
+<div style="display: block; width: max-content; border: 2px solid green">
+  HH
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  HH
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
+  HH
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  HH
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
+  HH
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  HH
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
+  HH
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  HH
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
+</div>
+  <div style="clear:both; border: 2px solid black"></div>
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: flow-root">Flow Root</div>
+  <div style="display: flow-root">Flow Root</div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: flow-root">Flow Root</div>
+</div>
+  <div style="clear:both; border: 2px solid black"></div>
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  Inline content
+  <div style="display: block">Same BFC</div>
+  <div style="display: block">Same BFC</div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: block">Same BFC</div>
+</div>
+  <div style="clear:both; border: 2px solid black"></div>
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: flow-root">Flow root</div>
+  <div style="display: flow-root">Flow root</div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: block">Same BFC</div>
+</div>
+  <div style="clear:both; border: 2px solid black"></div>
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: block">Same BFC Block</div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+</div>
+  <div style="clear:both; border: 2px solid black"></div>
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: flow-root">Flow Root
+    <div style="float: right; width: 50px; height: 30px; border: 2px solid red;"></div>
+  </div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+</div>
+  <div style="clear:both; border: 2px solid black"></div>
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: block">Same BFC Block. reiogh reihg ierhg iorehg ioreh giorehg ioreh giorehgio
+    <div style="float: right; width: 50px; height:30px; border: 2px solid red;"></div>
+  </div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+</div>
+  <div style="clear:both; border: 2px solid black"></div>
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="display: block">Same BFC Block. reiogh reihg ierhg iorehg ioreh giorehg ioreh giorehgio</div>
+</div>
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="display: block">Same BFC Block. reiogh reihg ierhg iorehg ioreh giorehg ioreh giorehgio</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/test_fixtures/float/float_min_content.html b/test_fixtures/float/float_min_content.html
new file mode 100644
index 000000000..1ec0e66d3
--- /dev/null
+++ b/test_fixtures/float/float_min_content.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../scripts/gentest/test_base_style.css">
+  <title>
+    Test description
+  </title>
+</head>
+<body>
+
+<div style="display: block; width: min-content">
+  HH
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  HH
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
+  HH
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  HH
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
+  HH
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  HH
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
+  HH
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  HH
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid blue;"></div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/test_fixtures/float/float_old.html b/test_fixtures/float/float_old.html
new file mode 100644
index 000000000..3d14f0fd1
--- /dev/null
+++ b/test_fixtures/float/float_old.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../scripts/gentest/test_base_style.css">
+  <title>
+    Test description
+  </title>
+</head>
+<body>
+
+<div style="display: block; width: 250px; height: 300px;">
+  hellek hfio erhgio heriugher iogh eiro
+  <div style="float: left; width: 50px; height: 50px; margin: 10px;"></div>
+  <div style="float: right; width: 50px; height: 50px; margin: 10px;"></div>
+  <div style="float: right; width: 50px; height: 50px; margin: 10px;"></div>
+  rgre guguyg
+  <div style="float: left; width: 50px; height: 200px; margin: 10px;"></div>
+  <div style="float: right; width: 50px; height: 50px; margin: 10px;"></div>
+  <div style="float: right; width: 50px; height: 50px; margin: 10px;"></div>
+  <div style="float: right; width: 50px; height: 50px; margin: 10px;"></div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/test_fixtures/float/float_same_bfc_max_content.html b/test_fixtures/float/float_same_bfc_max_content.html
new file mode 100644
index 000000000..ea7041ed0
--- /dev/null
+++ b/test_fixtures/float/float_same_bfc_max_content.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../scripts/gentest/test_base_style.css">
+  <title>
+    Test description
+  </title>
+</head>
+<body>
+
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: flow-root">Flow Root</div>
+  <div style="display: flow-root">Flow Root</div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: flow-root">Flow Root</div>
+</div>
+
+<div style="clear:both; border: 2px solid black;margin: 10px 0;"></div>
+
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  Inline content<br />
+  Inline content<br />
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+  Inline content<br />
+</div>
+
+<div style="clear:both; border: 2px solid black;margin: 10px 0;"></div>
+
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: flow-root">Flow root</div>
+  <div style="display: flow-root">Flow root</div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: block">Same BFC</div>
+</div>
+
+<div style="clear:both; border: 2px solid black;margin: 10px 0;"></div>
+
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: block">Same BFC</div>
+  <div style="display: block">Same BFC</div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: block">Same BFC</div>
+</div>
+
+<div style="clear:both; border: 2px solid black;margin: 10px 0;"></div>
+
+<div style="display: block; width: max-content; border: 2px solid green">
+  <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+  Inline Content
+  <div style="display: block">Same BFC</div>
+  <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div>
+  <div style="display: block">Same BFC</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file