display-contents-computed-style.html (2216B)
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>