mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 04:37:44 +00:00
Browser: Add various test pages to welcome
This adds test pages for border-radius, CSS custom properties and flexboxes to the default page in the Browser. I used those files to develop said features and they can be of use when debugging in the future or just to showcase those features.
This commit is contained in:
parent
f290048662
commit
19b22fbb4a
4 changed files with 495 additions and 26 deletions
68
Base/res/html/misc/custom-properties.html
Normal file
68
Base/res/html/misc/custom-properties.html
Normal file
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Custom Properties</title>
|
||||
<style>
|
||||
:root {
|
||||
--my-color: purple;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: var(--my-color);
|
||||
}
|
||||
|
||||
.test-parent {
|
||||
--my-color: pink;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>CSS Custom Properties</h1>
|
||||
<pre>
|
||||
:root {
|
||||
--my-color: purple;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: var(--my-color);
|
||||
}
|
||||
|
||||
.test-parent {
|
||||
--my-color: pink;
|
||||
}
|
||||
|
||||
</pre>
|
||||
<div class="box test">
|
||||
<pre>
|
||||
.test
|
||||
</pre>
|
||||
This should be purple
|
||||
</div>
|
||||
|
||||
<div class="test-parent">
|
||||
<pre>
|
||||
.test-parent
|
||||
</pre>
|
||||
<div class="box test">
|
||||
<pre>
|
||||
.test
|
||||
</pre>
|
||||
This should be pink
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue