mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-01-23 17:52:26 -05:00
Base: Add a test page for CSS opacity property
This commit is contained in:
parent
f567414f65
commit
6097578c59
Notes:
sideshowbarker
2024-07-18 08:23:43 +09:00
Author: https://github.com/Cleverking2003 Commit: https://github.com/SerenityOS/serenity/commit/6097578c599 Pull-request: https://github.com/SerenityOS/serenity/pull/8956 Reviewed-by: https://github.com/AtkinsSJ Reviewed-by: https://github.com/alimpfard
2 changed files with 71 additions and 0 deletions
70
Base/res/html/misc/opacity.html
Normal file
70
Base/res/html/misc/opacity.html
Normal file
|
@ -0,0 +1,70 @@
|
|||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.op-100 {
|
||||
background: green;
|
||||
opacity: 1.0;
|
||||
}
|
||||
.op-70 {
|
||||
background: green;
|
||||
opacity: 70%;
|
||||
}
|
||||
.op-50 {
|
||||
background: green;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.op-30 {
|
||||
background: green;
|
||||
opacity: 30%;
|
||||
}
|
||||
.op-0 {
|
||||
background: green;
|
||||
opacity: 0;
|
||||
}
|
||||
.red {
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class=op-100>
|
||||
100% opacity
|
||||
</div>
|
||||
<div class=op-70>
|
||||
70% opacity
|
||||
</div>
|
||||
<div class=op-50>
|
||||
50% opacity
|
||||
</div>
|
||||
<div class=op-30>
|
||||
30% opacity
|
||||
</div>
|
||||
<div class=op-0>
|
||||
0% opacity
|
||||
</div>
|
||||
<div class="red">
|
||||
Blending with other colors
|
||||
<div class=op-100>
|
||||
100% opacity
|
||||
</div>
|
||||
<div class=op-70>
|
||||
70% opacity
|
||||
</div>
|
||||
<div class=op-50>
|
||||
50% opacity
|
||||
</div>
|
||||
<div class=op-30>
|
||||
30% opacity
|
||||
</div>
|
||||
<div class=op-0>
|
||||
0% opacity
|
||||
</div>
|
||||
</div>
|
||||
<div class=op-70>
|
||||
70% opacity
|
||||
<div class=op-50>
|
||||
50% opacity inside 70% opacity
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -47,6 +47,7 @@
|
|||
<p>Some small test pages:</p>
|
||||
<ul>
|
||||
<li><a href="calc.html">calc Property</a></li>
|
||||
<li><a href="opacity.html">CSS opacity property</a></li>
|
||||
<li><a href="justify-content.html">Flexbox justify-content</a></li>
|
||||
<li><a href="lists.html">Lists</a></li>
|
||||
<li><a href="text-decoration.html">Text-decoration</a></li>
|
||||
|
|
Loading…
Add table
Reference in a new issue