mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-02 14:19:48 +00:00
LibWeb: Implement grid-template function fit-content()
This commit is contained in:
parent
de84e6f93a
commit
e5deaa1c07
Notes:
github-actions[bot]
2024-07-25 11:13:31 +00:00
Author: https://github.com/EdwinHoksberg
Commit: e5deaa1c07
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/815
Reviewed-by: https://github.com/kalenikaliaksandr ✅
10 changed files with 211 additions and 7 deletions
15
Tests/LibWeb/Layout/input/grid/fit-content-1.html
Normal file
15
Tests/LibWeb/Layout/input/grid/fit-content-1.html
Normal file
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
grid-template-columns: fit-content(150px) fit-content(150px);
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: yellowgreen;
|
||||
}
|
||||
</style><div class="container"><div class="one">1</div><div class="two">2</div></div>
|
25
Tests/LibWeb/Layout/input/grid/fit-content-2.html
Normal file
25
Tests/LibWeb/Layout/input/grid/fit-content-2.html
Normal file
|
@ -0,0 +1,25 @@
|
|||
<style>
|
||||
#container {
|
||||
display: grid;
|
||||
grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
|
||||
grid-gap: 5px;
|
||||
box-sizing: border-box;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
background-color: #8cffa0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#container > div {
|
||||
background-color: #8ca0ff;
|
||||
padding: 5px;
|
||||
}
|
||||
</style><div id="container">
|
||||
<div>Item as wide as the content.</div>
|
||||
<div>
|
||||
Item with more text in it. Because the contents of it are wider than the
|
||||
maximum width, it is clamped at 300 pixels.
|
||||
</div>
|
||||
<div>Flexible item</div>
|
||||
</div>
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue