| 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 |