Import the css-display-3 css tests.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-display-3 / display-contents-computed-style.html
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3 <title>CSS Display: Computed style for display:contents</title>
4 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
5 <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
6 <link rel="help" href="https://drafts.csswg.org/css-display-3/#transformations">
7 <link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values">
8 <script src="/resources/testharness.js"></script>
9 <script src="/resources/testharnessreport.js"></script>
10 <style>
11     html, .contents { display: contents }
12
13     #t2 .contents { background-color: green }
14     #t2 span { background-color: inherit }
15
16     #t3 .contents { color: green }
17
18     #t4 {
19         width: auto;
20         height: 50%;
21         margin-left: 25%;
22         padding-top: 10%;
23     }
24 </style>
25 <div id="t1" class="contents"></div>
26 <div id="t2">
27     <div class="contents">
28         <span></span>
29     </div>
30 </div>
31 <div id="t3">
32     <div class="contents">
33         <span></span>
34     </div>
35 </div>
36 <div id="t4" class="contents"></div>
37 <script>
38     test(function(){
39         assert_equals(getComputedStyle(document.querySelector("#t1")).display, "contents");
40     }, "Serialization of computed style value for display:contents");
41
42     test(function(){
43         assert_equals(getComputedStyle(document.querySelector("#t2 span")).backgroundColor, "rgb(0, 128, 0)");
44     }, "display:contents element as inherit parent - explicit inheritance");
45
46     test(function(){
47         assert_equals(getComputedStyle(document.querySelector("#t3 span")).color, "rgb(0, 128, 0)");
48     }, "display:contents element as inherit parent - implicit inheritance");
49
50     test(function(){
51         var computed = getComputedStyle(document.querySelector("#t4"));
52         assert_equals(computed.width, "auto");
53         assert_equals(computed.height, "50%");
54         assert_equals(computed.marginLeft, "25%");
55         assert_equals(computed.paddingTop, "10%");
56     }, "Resolved value should be computed value, not used value, for display:contents");
57
58     test(function(){
59         assert_equals(getComputedStyle(document.documentElement).display, "block");
60     }, "display:contents is blockified for root elements");
61 </script>