RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 17:07:34 +00:00
Code Issues Activity Actions

Base: Add test page for CSS clip property

Browse source
This commit is contained in:
Tom 2022-07-30 16:12:12 +02:00 • committed by Andreas Kling
parent 5c4d130af5
commit 4d1ceaaa43
2 changed files with 53 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

52
Base/res/html/misc/clip.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CSS Clip test</title>
<style>
.box1 {
background-color: red;
height: 300px;
width: 400px;
position: absolute;
}
.box2 {
background-color: blue;
height: 300px;
width: 400px;
position: absolute;
clip: rect(auto, 150px, 8em, -5px);
color: white;
}
.box3 {
background-color: purple;
height: 300px;
width: 400px;
position: absolute;
clip: rect(0em, 0px, 0px, 0px);
top: 350px;
color: white;
}
</style>
</head>
<body>
<h1>Clip with rect</h1>
<h2>Clip should look kind of like the American flag</h2>
<div class="box1">
<div class="box2">
<p>Hello this is some text</p>
<p>Hello this is some text</p>
<p>Hello this is some text</p>
<p>Hello this is some text</p>
</div>
</div>
<h2 style="margin-top: 350px;">Clip should not be visible</h2>
<div class="box3">
<p>Hello this is some text</p>
<p>Hello this is some text</p>
<p>Hello this is some text</p>
<p>Hello this is some text</p>
</div>
</body>

1
Base/res/html/misc/welcome.html
View file

@ -131,6 +131,7 @@
<li><a href="overflow.html">Overflow</a></li> <li><a href="overflow.html">Overflow</a></li>
<li><a href="image-rendering.html">image-rendering property</a></li> <li><a href="image-rendering.html">image-rendering property</a></li>
<li><a href="transform.html">Transforms</a></li> <li><a href="transform.html">Transforms</a></li>
<li><a href="clip.html">Clip</a></li>
<li><h3>Features</h3></li> <li><h3>Features</h3></li>
<li><a href="css.html">Basic functionality</a></li> <li><a href="css.html">Basic functionality</a></li>
<li><a href="colors.html">css colors</a></li> <li><a href="colors.html">css colors</a></li>