OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <meta charset="utf-8"> | 2 <meta charset="utf-8"> |
3 <title>CSS Display: Computed style for display:contents</title> | 3 <title>CSS Display: Computed style for display:contents</title> |
4 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> | 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-co
ntents"> | 5 <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-co
ntents"> |
| 6 <link rel="help" href="https://drafts.csswg.org/css-display-3/#transformations"> |
6 <link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values"> | 7 <link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values"> |
7 <script src="/resources/testharness.js"></script> | 8 <script src="/resources/testharness.js"></script> |
8 <script src="/resources/testharnessreport.js"></script> | 9 <script src="/resources/testharnessreport.js"></script> |
9 <style> | 10 <style> |
10 .contents { display: contents } | 11 html, .contents { display: contents } |
11 | 12 |
12 #t2 .contents { background-color: green } | 13 #t2 .contents { background-color: green } |
13 #t2 span { background-color: inherit } | 14 #t2 span { background-color: inherit } |
14 | 15 |
15 #t3 .contents { color: green } | 16 #t3 .contents { color: green } |
16 | 17 |
17 #t4 { display: flex; align-items: center } | 18 #t4 { display: flex; align-items: center } |
18 #t4 .contents { align-items: baseline } | 19 #t4 .contents { align-items: baseline } |
19 #t4 span { align-self: auto } | 20 #t4 span { align-self: auto } |
20 | 21 |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
59 assert_equals(getComputedStyle(document.querySelector("#t4 span")).align
Self, "baseline"); | 60 assert_equals(getComputedStyle(document.querySelector("#t4 span")).align
Self, "baseline"); |
60 }, "align-self:auto resolution for flex item inside display:contents"); | 61 }, "align-self:auto resolution for flex item inside display:contents"); |
61 | 62 |
62 test(function(){ | 63 test(function(){ |
63 var computed = getComputedStyle(document.querySelector("#t5")); | 64 var computed = getComputedStyle(document.querySelector("#t5")); |
64 assert_equals(computed.width, "auto"); | 65 assert_equals(computed.width, "auto"); |
65 assert_equals(computed.height, "50%"); | 66 assert_equals(computed.height, "50%"); |
66 assert_equals(computed.marginLeft, "25%"); | 67 assert_equals(computed.marginLeft, "25%"); |
67 assert_equals(computed.paddingTop, "10%"); | 68 assert_equals(computed.paddingTop, "10%"); |
68 }, "Resolved value should be computed value, not used value, for display:con
tents"); | 69 }, "Resolved value should be computed value, not used value, for display:con
tents"); |
| 70 |
| 71 test(function(){ |
| 72 assert_equals(getComputedStyle(document.documentElement).display, "block
"); |
| 73 }, "display:contents is blockified for root elements"); |
69 </script> | 74 </script> |
OLD | NEW |