test_box_size_keywords.html (15438B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for keywords on box sizing properties</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="property_database.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 8 </head> 9 <body> 10 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1122253">Mozilla Bug 1122253</a> 11 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1496558">Mozilla Bug 1496558</a> 12 13 <style> 14 #outer { 15 position: absolute; 16 width: 200px; 17 height: 200px; 18 } 19 #horizontal, #vertical { 20 background-color: #ccc; 21 line-height: 1px; 22 } 23 #vertical { 24 writing-mode: vertical-rl; 25 position: relative; 26 top: 10px; 27 } 28 .small, .big { 29 display: inline-block; 30 block-size: 10px; 31 } 32 .small { 33 background-image: linear-gradient(to bottom right, black, fuchsia); 34 inline-size: 10px; 35 } 36 .big { 37 background-image: linear-gradient(to bottom right, black, cyan); 38 inline-size: 90px; 39 } 40 </style> 41 42 <div id=outer> 43 <div id=horizontal><span class=small></span><span class=big></span><span class=big></span><span class=big></span></div> 44 <div id=vertical><span class=small></span><span class=big></span><span class=big></span><span class=big></span></div> 45 </div> 46 47 <pre id="test"> 48 <script class="testbody" type="text/javascript"> 49 50 /** Test for Bug 1122253 and Bug 1496558 */ 51 52 // Test that the -moz-available, min-content, max-content, and 53 // fit-content keywords are usable only on width, when the writing 54 // mode is horizontal, or height, when the writing mode is vertical, 55 // and that they are always available on inline-size and never on 56 // block-size. When used on the wrong properties, they should be 57 // equivalent to unset. 58 // 59 // Also test the corresponding min-* and max-* properties. 60 61 var gTests = [ 62 { orientation: "horizontal", property: "width", specified_value: "-moz-available", computed_value: "200px", }, 63 { orientation: "horizontal", property: "width", specified_value: "min-content", computed_value: "90px", }, 64 { orientation: "horizontal", property: "width", specified_value: "max-content", computed_value: "280px", }, 65 { orientation: "horizontal", property: "width", specified_value: "fit-content", computed_value: "200px", }, 66 { orientation: "horizontal", property: "inline-size", specified_value: "-moz-available", computed_value: "200px", }, 67 { orientation: "horizontal", property: "inline-size", specified_value: "min-content", computed_value: "90px", }, 68 { orientation: "horizontal", property: "inline-size", specified_value: "max-content", computed_value: "280px", }, 69 { orientation: "horizontal", property: "inline-size", specified_value: "fit-content", computed_value: "200px", }, 70 { orientation: "horizontal", property: "min-width", specified_value: "-moz-available", computed_value: "-moz-available", }, 71 { orientation: "horizontal", property: "min-width", specified_value: "min-content", computed_value: "min-content", }, 72 { orientation: "horizontal", property: "min-width", specified_value: "max-content", computed_value: "max-content", }, 73 { orientation: "horizontal", property: "min-width", specified_value: "fit-content", computed_value: "fit-content", }, 74 { orientation: "horizontal", property: "min-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", }, 75 { orientation: "horizontal", property: "min-inline-size", specified_value: "min-content", computed_value: "min-content", }, 76 { orientation: "horizontal", property: "min-inline-size", specified_value: "max-content", computed_value: "max-content", }, 77 { orientation: "horizontal", property: "min-inline-size", specified_value: "fit-content", computed_value: "fit-content", }, 78 { orientation: "horizontal", property: "max-width", specified_value: "-moz-available", computed_value: "-moz-available", }, 79 { orientation: "horizontal", property: "max-width", specified_value: "min-content", computed_value: "min-content", }, 80 { orientation: "horizontal", property: "max-width", specified_value: "max-content", computed_value: "max-content", }, 81 { orientation: "horizontal", property: "max-width", specified_value: "fit-content", computed_value: "fit-content", }, 82 { orientation: "horizontal", property: "max-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", }, 83 { orientation: "horizontal", property: "max-inline-size", specified_value: "min-content", computed_value: "min-content", }, 84 { orientation: "horizontal", property: "max-inline-size", specified_value: "max-content", computed_value: "max-content", }, 85 { orientation: "horizontal", property: "max-inline-size", specified_value: "fit-content", computed_value: "fit-content", }, 86 { orientation: "vertical", property: "height", specified_value: "-moz-available", computed_value: "200px", }, 87 { orientation: "vertical", property: "height", specified_value: "min-content", computed_value: "90px", }, 88 { orientation: "vertical", property: "height", specified_value: "max-content", computed_value: "280px", }, 89 { orientation: "vertical", property: "height", specified_value: "fit-content", computed_value: "200px", }, 90 { orientation: "vertical", property: "inline-size", specified_value: "-moz-available", computed_value: "200px", }, 91 { orientation: "vertical", property: "inline-size", specified_value: "min-content", computed_value: "90px", }, 92 { orientation: "vertical", property: "inline-size", specified_value: "max-content", computed_value: "280px", }, 93 { orientation: "vertical", property: "inline-size", specified_value: "fit-content", computed_value: "200px", }, 94 { orientation: "vertical", property: "min-height", specified_value: "-moz-available", computed_value: "-moz-available", }, 95 { orientation: "vertical", property: "min-height", specified_value: "min-content", computed_value: "min-content", }, 96 { orientation: "vertical", property: "min-height", specified_value: "max-content", computed_value: "max-content", }, 97 { orientation: "vertical", property: "min-height", specified_value: "fit-content", computed_value: "fit-content", }, 98 { orientation: "vertical", property: "min-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", }, 99 { orientation: "vertical", property: "min-inline-size", specified_value: "min-content", computed_value: "min-content", }, 100 { orientation: "vertical", property: "min-inline-size", specified_value: "max-content", computed_value: "max-content", }, 101 { orientation: "vertical", property: "min-inline-size", specified_value: "fit-content", computed_value: "fit-content", }, 102 { orientation: "vertical", property: "max-height", specified_value: "-moz-available", computed_value: "-moz-available", }, 103 { orientation: "vertical", property: "max-height", specified_value: "min-content", computed_value: "min-content", }, 104 { orientation: "vertical", property: "max-height", specified_value: "max-content", computed_value: "max-content", }, 105 { orientation: "vertical", property: "max-height", specified_value: "fit-content", computed_value: "fit-content", }, 106 { orientation: "vertical", property: "max-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", }, 107 { orientation: "vertical", property: "max-inline-size", specified_value: "min-content", computed_value: "min-content", }, 108 { orientation: "vertical", property: "max-inline-size", specified_value: "max-content", computed_value: "max-content", }, 109 { orientation: "vertical", property: "max-inline-size", specified_value: "fit-content", computed_value: "fit-content", }, 110 { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "-moz-available", computed_value: "20px", }, 111 { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "min-content", computed_value: "20px", }, 112 { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "max-content", computed_value: "20px", }, 113 { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "fit-content", computed_value: "20px", }, 114 { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "20px", }, 115 { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "min-content", computed_value: "20px", }, 116 { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "max-content", computed_value: "20px", }, 117 { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "fit-content", computed_value: "20px", }, 118 { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "-moz-available", computed_value: "-moz-available", }, 119 { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "min-content", computed_value: "min-content", }, 120 { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "max-content", computed_value: "max-content", }, 121 { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "fit-content", computed_value: "fit-content", }, 122 { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "-moz-available", }, 123 { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "min-content", computed_value: "min-content", }, 124 { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "max-content", computed_value: "max-content", }, 125 { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "fit-content", computed_value: "fit-content", }, 126 { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "-moz-available", computed_value: "-moz-available", }, 127 { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "min-content", computed_value: "min-content", }, 128 { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "max-content", computed_value: "max-content", }, 129 { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "fit-content", computed_value: "fit-content", }, 130 { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "-moz-available", }, 131 { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "min-content", computed_value: "min-content", }, 132 { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "max-content", computed_value: "max-content", }, 133 { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "fit-content", computed_value: "fit-content", }, 134 { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "-moz-available", computed_value: "20px", }, 135 { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "min-content", computed_value: "20px", }, 136 { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "max-content", computed_value: "20px", }, 137 { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "fit-content", computed_value: "20px", }, 138 { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "20px", }, 139 { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "min-content", computed_value: "20px", }, 140 { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "max-content", computed_value: "20px", }, 141 { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "fit-content", computed_value: "20px", }, 142 { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "-moz-available", computed_value: "-moz-available", }, 143 { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "min-content", computed_value: "min-content", }, 144 { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "max-content", computed_value: "max-content", }, 145 { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "fit-content", computed_value: "fit-content", }, 146 { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "-moz-available", }, 147 { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "min-content", computed_value: "min-content", }, 148 { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "max-content", computed_value: "max-content", }, 149 { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "fit-content", computed_value: "fit-content", }, 150 { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "-moz-available", computed_value: "-moz-available", }, 151 { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "min-content", computed_value: "min-content", }, 152 { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "max-content", computed_value: "max-content", }, 153 { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "fit-content", computed_value: "fit-content", }, 154 { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "-moz-available", }, 155 { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "min-content", computed_value: "min-content", }, 156 { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "max-content", computed_value: "max-content", }, 157 { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "fit-content", computed_value: "fit-content", }, 158 ]; 159 160 gTests.forEach(function(t) { 161 var e = document.getElementById(t.orientation); 162 e.style = (t.prerequisites || "") + t.property + ": " + t.specified_value; 163 is(get_computed_value(getComputedStyle(e), t.property), t.computed_value, 164 `${t.orientation} ${t.property}:${t.specified_value}`); 165 e.style = ""; 166 }); 167 </script> 168 </pre> 169 </body> 170 </html>