display-computed.html (9732B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Display: getComputedStyle().display</title> 6 <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#display-prop"> 7 <link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> 9 <link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo"> 10 <meta name="assert" content="position and float can change display computed value."> 11 <meta name="assert" content="display computed value is otherwise as specified."> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script src="/css/support/computed-testcommon.js"></script> 15 </head> 16 <body> 17 <div id="target"></div> 18 <script> 19 'use strict'; 20 21 // https://drafts.csswg.org/css-grid-1/#grid-containers 22 test_computed_value("display", "grid"); 23 test_computed_value("display", "inline-grid"); 24 25 // https://drafts.csswg.org/css2/visuren.html#display-prop 26 test_computed_value("display", "inline"); 27 test_computed_value("display", "block"); 28 test_computed_value("display", "list-item"); 29 test_computed_value("display", "inline-block"); 30 test_computed_value("display", "table"); 31 test_computed_value("display", "inline-table"); 32 test_computed_value("display", "table-row-group"); 33 test_computed_value("display", "table-header-group"); 34 test_computed_value("display", "table-footer-group"); 35 test_computed_value("display", "table-row"); 36 test_computed_value("display", "table-column-group"); 37 test_computed_value("display", "table-column"); 38 test_computed_value("display", "table-cell"); 39 test_computed_value("display", "table-caption"); 40 test_computed_value("display", "none"); 41 42 // https://drafts.csswg.org/css-flexbox-1/#flex-containers 43 test_computed_value("display", "flex"); 44 test_computed_value("display", "inline-flex"); 45 46 test_computed_value("display", "contents"); 47 48 test_computed_value("display", "run-in"); 49 test_computed_value("display", "flow", "block"); 50 test_computed_value("display", "flow-root"); 51 test_computed_value("display", "ruby"); 52 test_computed_value("display", "ruby-base"); 53 test_computed_value("display", "ruby-text"); 54 55 test_computed_value("display", "flow list-item", "list-item"); 56 test_computed_value("display", "list-item flow", "list-item"); 57 test_computed_value("display", "flow-root list-item", "flow-root list-item"); 58 test_computed_value("display", "list-item flow-root", "flow-root list-item"); 59 60 test_computed_value("display", "block flow", "block"); 61 test_computed_value("display", "flow block", "block"); 62 test_computed_value("display", "flow-root block", "flow-root"); 63 test_computed_value("display", "block flow-root", "flow-root"); 64 test_computed_value("display", "flex block", "flex"); 65 test_computed_value("display", "block flex", "flex"); 66 test_computed_value("display", "grid block", "grid"); 67 test_computed_value("display", "block grid", "grid"); 68 test_computed_value("display", "table block", "table"); 69 test_computed_value("display", "block table", "table"); 70 test_computed_value("display", "block ruby", "block ruby"); 71 test_computed_value("display", "ruby block", "block ruby"); 72 test_computed_value("display", "block list-item", "list-item"); 73 test_computed_value("display", "list-item block", "list-item"); 74 test_computed_value("display", "flow block list-item", "list-item"); 75 test_computed_value("display", "block flow list-item", "list-item"); 76 test_computed_value("display", "flow list-item block", "list-item"); 77 test_computed_value("display", "block list-item flow", "list-item"); 78 test_computed_value("display", "list-item block flow", "list-item"); 79 test_computed_value("display", "list-item flow block", "list-item"); 80 test_computed_value("display", "flow-root block list-item", "flow-root list-item"); 81 test_computed_value("display", "block flow-root list-item", "flow-root list-item"); 82 test_computed_value("display", "flow-root list-item block", "flow-root list-item"); 83 test_computed_value("display", "block list-item flow-root", "flow-root list-item"); 84 test_computed_value("display", "list-item block flow-root", "flow-root list-item"); 85 test_computed_value("display", "list-item flow-root block", "flow-root list-item"); 86 87 test_computed_value("display", "inline flow", "inline"); 88 test_computed_value("display", "flow inline", "inline"); 89 test_computed_value("display", "flow-root inline", "inline-block"); 90 test_computed_value("display", "inline flow-root", "inline-block"); 91 test_computed_value("display", "flex inline", "inline-flex"); 92 test_computed_value("display", "inline flex", "inline-flex"); 93 test_computed_value("display", "grid inline", "inline-grid"); 94 test_computed_value("display", "inline grid", "inline-grid"); 95 test_computed_value("display", "table inline", "inline-table"); 96 test_computed_value("display", "inline table", "inline-table"); 97 test_computed_value("display", "inline ruby", "ruby"); 98 test_computed_value("display", "ruby inline", "ruby"); 99 test_computed_value("display", "inline list-item", "inline list-item"); 100 test_computed_value("display", "list-item inline", "inline list-item"); 101 test_computed_value("display", "flow inline list-item", "inline list-item"); 102 test_computed_value("display", "inline flow list-item", "inline list-item"); 103 test_computed_value("display", "flow list-item inline", "inline list-item"); 104 test_computed_value("display", "inline list-item flow", "inline list-item"); 105 test_computed_value("display", "list-item inline flow", "inline list-item"); 106 test_computed_value("display", "list-item flow inline", "inline list-item"); 107 test_computed_value("display", "flow-root inline list-item", "inline flow-root list-item"); 108 test_computed_value("display", "inline flow-root list-item", "inline flow-root list-item"); 109 test_computed_value("display", "flow-root list-item inline", "inline flow-root list-item"); 110 test_computed_value("display", "inline list-item flow-root", "inline flow-root list-item"); 111 test_computed_value("display", "list-item inline flow-root", "inline flow-root list-item"); 112 test_computed_value("display", "list-item flow-root inline", "inline flow-root list-item"); 113 114 test_computed_value("display", "run-in flow", "run-in"); 115 test_computed_value("display", "flow run-in", "run-in"); 116 test_computed_value("display", "flow-root run-in", "run-in flow-root"); 117 test_computed_value("display", "run-in flow-root", "run-in flow-root"); 118 test_computed_value("display", "flex run-in", "run-in flex"); 119 test_computed_value("display", "run-in flex", "run-in flex"); 120 test_computed_value("display", "grid run-in", "run-in grid"); 121 test_computed_value("display", "run-in grid", "run-in grid"); 122 test_computed_value("display", "table run-in", "run-in table"); 123 test_computed_value("display", "run-in table", "run-in table"); 124 test_computed_value("display", "run-in ruby", "run-in ruby"); 125 test_computed_value("display", "ruby run-in", "run-in ruby"); 126 test_computed_value("display", "run-in list-item", "run-in list-item"); 127 test_computed_value("display", "list-item run-in", "run-in list-item"); 128 test_computed_value("display", "flow run-in list-item", "run-in list-item"); 129 test_computed_value("display", "run-in flow list-item", "run-in list-item"); 130 test_computed_value("display", "flow list-item run-in", "run-in list-item"); 131 test_computed_value("display", "run-in list-item flow", "run-in list-item"); 132 test_computed_value("display", "list-item run-in flow", "run-in list-item"); 133 test_computed_value("display", "list-item flow run-in", "run-in list-item"); 134 test_computed_value("display", "flow-root run-in list-item", "run-in flow-root list-item"); 135 test_computed_value("display", "run-in flow-root list-item", "run-in flow-root list-item"); 136 test_computed_value("display", "flow-root list-item run-in", "run-in flow-root list-item"); 137 test_computed_value("display", "run-in list-item flow-root", "run-in flow-root list-item"); 138 test_computed_value("display", "list-item run-in flow-root", "run-in flow-root list-item"); 139 test_computed_value("display", "list-item flow-root run-in", "run-in flow-root list-item"); 140 141 // https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo 142 function test_display_affected(property, value) { 143 const target = document.getElementById('target'); 144 test(() => { 145 target.style[property] = value; 146 target.style.display = 'inline-table'; 147 assert_equals(getComputedStyle(target).display, 'table', 'inline-table -> block'); 148 149 const displayValues = [ 150 'inline', 151 'table-row-group', 152 'table-column', 153 'table-column-group', 154 'table-header-group', 155 'table-footer-group', 156 'table-row', 157 'table-cell', 158 'table-caption', 159 'ruby-base', 160 'ruby-text', 161 'inline-block' 162 ]; 163 164 for (let displayValue of displayValues) { 165 target.style.display = displayValue; 166 assert_equals(getComputedStyle(target).display, 'block', displayValue + ' -> block'); 167 } 168 169 target.style.display = 'inline-flex'; 170 assert_equals(getComputedStyle(target).display, 'flex', 'inline-flex -> flex'); 171 172 target.style.display = 'inline-grid'; 173 assert_equals(getComputedStyle(target).display, 'grid', 'inline-grid -> grid'); 174 175 // Other values are not affected. 176 target.style.display = 'list-item'; 177 assert_equals(getComputedStyle(target).display, 'list-item', 'list-item -> list-item'); 178 179 target.style.display = 'contents'; 180 assert_equals(getComputedStyle(target).display, 'contents', 'contents -> contents'); 181 182 target.style[property] = ''; 183 target.style.display = ''; 184 }, property + ' ' + value + ' affects computed display'); 185 } 186 187 test_display_affected("position", "absolute"); 188 test_display_affected("position", "fixed"); 189 test_display_affected("float", "left"); 190 test_display_affected("float", "right"); 191 </script> 192 </body> 193 </html>