diff options
| author | Andreas Kling <kling@serenityos.org> | 2021-09-12 19:25:43 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2021-09-12 20:44:50 +0200 |
| commit | caa9e1f6220e45ad541e61b9a222fdc4124c0c4e (patch) | |
| tree | ad22fd44217674e2465e5d3cb41d5904edb53379 /Base | |
| parent | 0bcab6046366892bbcef88e26077b2097af98948 (diff) | |
| download | serenity-caa9e1f6220e45ad541e61b9a222fdc4124c0c4e.zip | |
Base: Add a very simple test page for getComputedStyle()
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/res/html/misc/computed-style.html | 48 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 2 |
2 files changed, 50 insertions, 0 deletions
diff --git a/Base/res/html/misc/computed-style.html b/Base/res/html/misc/computed-style.html new file mode 100644 index 0000000000..bdde368b83 --- /dev/null +++ b/Base/res/html/misc/computed-style.html @@ -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> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 7bfde3a4ee..836a65012a 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -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> |