system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-16 12:52:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Base: Add a very simple test page for getComputedStyle()

Browse source
This commit is contained in:
Andreas Kling 2021-09-12 19:25:43 +02:00
parent 0bcab60463
commit caa9e1f622
2 changed files with 50 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
Base/res/html/misc/computed-style.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<style>
#foo {
color: magenta;
}
#invisible {
display: none;
color: blue;
}
#visible {
display: block;
color: red;
}
</style>
</style>
</head>
<body>
<div id=foo>Some text</div>
<div id=bar style="color: green">Other text</div>
<div id=invisible>You cannot see me</div>
<div id=visible>You CAN see me</div>
<script>
// #foo
var foo = document.getElementById("foo");
var fooStyle = window.getComputedStyle(foo);
console.log(fooStyle.color);
// #bar
var bar = document.getElementById("bar");
var barStyle = bar.style;
console.log(barStyle.color);
// #invisible
var invisible = document.getElementById("invisible");
var invisibleStyle = getComputedStyle(invisible);
console.log(invisibleStyle.display)
console.log(invisibleStyle.color)
// #visible
var visible = document.getElementById("visible");
var visibleStyle = getComputedStyle(visible);
console.log(visibleStyle.display)
console.log(visibleStyle.color)
</script>
</body>
</html>

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

@ -74,6 +74,8 @@
<h2>CSS</h2>
<ul>
<li><h3>CSSOM</h3></li>
<li><a href="computed-style.html">Computed style</a></li>
<li><h3>Selectors</h3></li>
<li><a href="selectors.html">Selectors</a></li>
<li><a href="attrselectors.html">Attribute selectors</a></li>