summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-display/display-contents-computed-style.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-display/display-contents-computed-style.html')
-rw-r--r--testing/web-platform/tests/css/css-display/display-contents-computed-style.html61
1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-display/display-contents-computed-style.html b/testing/web-platform/tests/css/css-display/display-contents-computed-style.html
new file mode 100644
index 0000000000..2bc63701f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-display/display-contents-computed-style.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Display: Computed style for display:contents</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#transformations">
+<link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+ html, .contents { display: contents }
+
+ #t2 .contents { background-color: green }
+ #t2 span { background-color: inherit }
+
+ #t3 .contents { color: green }
+
+ #t4 {
+ width: auto;
+ height: 50%;
+ margin-left: 25%;
+ padding-top: 10%;
+ }
+</style>
+<div id="t1" class="contents"></div>
+<div id="t2">
+ <div class="contents">
+ <span></span>
+ </div>
+</div>
+<div id="t3">
+ <div class="contents">
+ <span></span>
+ </div>
+</div>
+<div id="t4" class="contents"></div>
+<script>
+ test(function(){
+ assert_equals(getComputedStyle(document.querySelector("#t1")).display, "contents");
+ }, "Serialization of computed style value for display:contents");
+
+ test(function(){
+ assert_equals(getComputedStyle(document.querySelector("#t2 span")).backgroundColor, "rgb(0, 128, 0)");
+ }, "display:contents element as inherit parent - explicit inheritance");
+
+ test(function(){
+ assert_equals(getComputedStyle(document.querySelector("#t3 span")).color, "rgb(0, 128, 0)");
+ }, "display:contents element as inherit parent - implicit inheritance");
+
+ test(function(){
+ var computed = getComputedStyle(document.querySelector("#t4"));
+ assert_equals(computed.width, "auto");
+ assert_equals(computed.height, "50%");
+ assert_equals(computed.marginLeft, "25%");
+ assert_equals(computed.paddingTop, "10%");
+ }, "Resolved value should be computed value, not used value, for display:contents");
+
+ test(function(){
+ assert_equals(getComputedStyle(document.documentElement).display, "block");
+ }, "display:contents is blockified for root elements");
+</script>