mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 19:57:44 +00:00
LibWeb: Parse grid-template property
This commit is contained in:
martinfalisse
Andreas Kling
parent
bebf4363db
commit
22202715fc
13 changed files with 351 additions and 3 deletions
54
Tests/LibWeb/Layout/expected/grid/grid-template.txt
Normal file
54
Tests/LibWeb/Layout/expected/grid/grid-template.txt
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x216 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x200 children: not-inline
|
||||
Box <div.mw-page-container-inner> at (8,8) content-size 784x0 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.vector-main-menu-container> at (8,8) content-size 196x0 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.vector-sitenotice-container> at (8,8) content-size 784x0 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.mw-content-container> at (204,8) content-size 588x0 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.mw-footer-container> at (8,8) content-size 784x0 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <section#page> at (8,8) content-size 784x200 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <header> at (8,8) content-size 784x30 children: inline
|
||||
line 0 width: 55.703125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [8,8 55.703125x17.46875]
|
||||
"Header"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <nav> at (8,38) content-size 120x170 children: inline
|
||||
line 0 width: 80.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 10, rect: [8,38 80.6875x17.46875]
|
||||
"Navigation"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <main> at (128,38) content-size 664x140 children: inline
|
||||
line 0 width: 79.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 9, rect: [128,38 79.515625x17.46875]
|
||||
"Main area"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <footer> at (128,178) content-size 664x30 children: inline
|
||||
line 0 width: 57.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [128,178 57.671875x17.46875]
|
||||
"Footer"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,208) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
78
Tests/LibWeb/Layout/input/grid/grid-template.html
Normal file
78
Tests/LibWeb/Layout/input/grid/grid-template.html
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
.mw-page-container-inner {
|
||||
display: grid;
|
||||
grid-template: min-content min-content 1fr min-content / 12.25em minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
'siteNotice siteNotice'
|
||||
'mainMenu pageContent'
|
||||
'toc pageContent'
|
||||
'footer footer'
|
||||
}
|
||||
|
||||
.vector-sitenotice-container {
|
||||
grid-area: siteNotice
|
||||
}
|
||||
|
||||
.vector-main-menu-container {
|
||||
grid-area: mainMenu;
|
||||
overflow-anchor: none
|
||||
}
|
||||
|
||||
.mw-content-container {
|
||||
grid-area: pageContent
|
||||
}
|
||||
|
||||
.mw-footer-container {
|
||||
grid-area: footer
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Shouldn't crash :) -->
|
||||
<div class="mw-page-container-inner">
|
||||
<div class="vector-main-menu-container"></div>
|
||||
<div class="vector-sitenotice-container"></div>
|
||||
<div class="mw-content-container"></div>
|
||||
<div class="mw-footer-container"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#page {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
grid-template:
|
||||
[header-left] "head head" 30px
|
||||
[header-right] [main-left] "nav main" 1fr
|
||||
[main-right] [footer-left] "nav foot" 30px [footer-right] / 120px 1fr;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: lime;
|
||||
grid-area: head;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: lightblue;
|
||||
grid-area: nav;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: yellow;
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: red;
|
||||
grid-area: foot;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="page">
|
||||
<header>Header</header>
|
||||
<nav>Navigation</nav>
|
||||
<main>Main area</main>
|
||||
<footer>Footer</footer>
|
||||
</section>
|
||||
Loading…
Add table
Add a link
Reference in a new issue