summaryrefslogtreecommitdiff
path: root/Tests/LibWeb/Layout/input
diff options
context:
space:
mode:
authorAliaksandr Kalenik <kalenik.aliaksandr@gmail.com>2023-05-14 19:16:26 +0300
committerAndreas Kling <kling@serenityos.org>2023-05-14 19:32:34 +0200
commit87a7299078fe563b3e49f15994ee697b89d380a2 (patch)
tree715b87809187b60324b024d601f18901dc8b4cc3 /Tests/LibWeb/Layout/input
parent7a5603052a3ed21f6830fbce396deb1555259c8a (diff)
downloadserenity-87a7299078fe563b3e49f15994ee697b89d380a2.zip
LibWeb: Start implementing sizing for tracks with span > 1 items in GFC
Partially implements: - Increase sizes to accommodate spanning items crossing content-sized tracks - Increase sizes to accommodate spanning items crossing flexible tracks from https://www.w3.org/TR/css-grid-2/#algo-content
Diffstat (limited to 'Tests/LibWeb/Layout/input')
-rw-r--r--Tests/LibWeb/Layout/input/grid/row-span-2.html53
1 files changed, 53 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/input/grid/row-span-2.html b/Tests/LibWeb/Layout/input/grid/row-span-2.html
new file mode 100644
index 0000000000..1ebede8ea1
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/row-span-2.html
@@ -0,0 +1,53 @@
+<style>
+.grid-container {
+ display: grid;
+ grid-template-columns: auto auto;
+ grid-template-rows: auto auto;
+}
+
+.item-span-one-one {
+ background-color: lightpink;
+ grid-row: 1 / span 1;
+ grid-column: 2;
+}
+
+.item-span-one-two {
+ background-color: lightgreen;
+ grid-row: 2 / span 1;
+ grid-column: 2;
+}
+
+.item-span-two {
+ background-color: lightskyblue;
+ grid-row: 1 / span 2;
+ grid-column: 1;
+}
+</style>
+<div class="grid-container">
+<div class="grid-item item-span-one-one">
+In a sollicitudin augue. Sed ante augue, rhoncus nec porttitor id,
+lacinia et nibh. Pellentesque diam libero, ultrices eget eleifend at,
+consequat ut orci.
+</div>
+<div class="grid-item item-span-one-two">
+Suspendisse potenti. Pellentesque at varius lacus, sed sollicitudin leo.
+Pellentesque malesuada mi eget pellentesque tempor. Donec egestas mauris
+est, ut lobortis nisi luctus at. Vivamus eleifend, lorem vulputate
+maximus porta, nunc metus porttitor nibh, nec bibendum nulla lectus ut
+felis.
+</div>
+<div class="grid-item item-span-two">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae
+condimentum erat, ac posuere arcu. Aenean tincidunt mi ligula, vel
+semper dolor aliquet at. Phasellus scelerisque dapibus diam sed rhoncus.
+Proin sed orci leo. Praesent pellentesque mi eu nunc gravida, vel
+consectetur nulla malesuada. Sed pellentesque, elit sit amet
+sollicitudin sollicitudin, lectus justo facilisis lacus, ac vehicula
+metus neque ac mi. In in augue et massa maximus venenatis auctor
+fermentum dui. Aliquam dictum finibus urna, quis lacinia massa laoreet
+a. Suspendisse elementum non lectus nec elementum. Quisque ultricies
+suscipit porttitor. Sed non urna rutrum, mattis nulla at, feugiat erat.
+Duis orci elit, vehicula sed blandit eget, auctor in arcu. Ut cursus
+magna sit amet nulla cursus, vitae gravida mauris dictum.
+</div>
+</div> \ No newline at end of file