The Tor Browser / annotate

layout/style/test/test_grid_container_shorthands.html@7e26c7da4463 (annotated)

layout/style/test/test_grid_container_shorthands.html

Wed, 31 Dec 2014 06:55:50 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:55:50 +0100
changeset 2
7e26c7da4463
permissions
-rw-r--r--

Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2

michael@0 1 <!DOCTYPE html>
michael@0 2 <html>
michael@0 3 <head>
michael@0 4 <meta charset=utf-8>
michael@0 5 <title>Test parsing of grid container shorthands (grid-template, grid)</title>
michael@0 6 <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
michael@0 7 <script src="/resources/testharness.js"></script>
michael@0 8 <script src="/resources/testharnessreport.js"></script>
michael@0 9 <link rel='stylesheet' href='/resources/testharness.css'>
michael@0 10 </head>
michael@0 11 <body>
michael@0 12
michael@0 13 <script>
michael@0 14
michael@0 15 var initial_values = {
michael@0 16 gridTemplateAreas: "none",
michael@0 17 gridTemplateColumns: "none",
michael@0 18 gridTemplateRows: "none",
michael@0 19 gridAutoFlow: "none",
michael@0 20 // Computed value for 'auto'
michael@0 21 gridAutoColumns: "minmax(min-content, max-content)",
michael@0 22 gridAutoRows: "minmax(min-content, max-content)",
michael@0 23 };
michael@0 24
michael@0 25 // For various specified values of the grid-template shorthand,
michael@0 26 // test the computed values of the corresponding longhands.
michael@0 27 var grid_template_test_cases = [
michael@0 28 {
michael@0 29 specified: "none",
michael@0 30 },
michael@0 31 {
michael@0 32 specified: "40px / 100px",
michael@0 33 gridTemplateColumns: "40px",
michael@0 34 gridTemplateRows: "100px",
michael@0 35 },
michael@0 36 {
michael@0 37 specified: "(foo) 40px (bar) / (baz) 100px (fizz)",
michael@0 38 gridTemplateColumns: "(foo) 40px (bar)",
michael@0 39 gridTemplateRows: "(baz) 100px (fizz)",
michael@0 40 },
michael@0 41 {
michael@0 42 specified: " none/100px",
michael@0 43 gridTemplateColumns: "none",
michael@0 44 gridTemplateRows: "100px",
michael@0 45 },
michael@0 46 {
michael@0 47 specified: "40px/none",
michael@0 48 gridTemplateColumns: "40px",
michael@0 49 gridTemplateRows: "none",
michael@0 50 },
michael@0 51 {
michael@0 52 specified: "40px/repeat(1, 20px)",
michael@0 53 gridTemplateColumns: "40px",
michael@0 54 gridTemplateRows: "20px",
michael@0 55 },
michael@0 56 {
michael@0 57 specified: "40px/(a)repeat(1, 20px)",
michael@0 58 gridTemplateColumns: "40px",
michael@0 59 gridTemplateRows: "(a) 20px",
michael@0 60 },
michael@0 61 {
michael@0 62 specified: "40px/repeat(1, (a) 20px)",
michael@0 63 gridTemplateColumns: "40px",
michael@0 64 gridTemplateRows: "(a) 20px",
michael@0 65 },
michael@0 66 {
michael@0 67 specified: "40px/(a)repeat(2, (b)20px)",
michael@0 68 gridTemplateColumns: "40px",
michael@0 69 gridTemplateRows: "(a b) 20px (b) 20px",
michael@0 70 },
michael@0 71 {
michael@0 72 specified: "40px/(a)repeat(2, 20px)",
michael@0 73 gridTemplateColumns: "40px",
michael@0 74 gridTemplateRows: "(a) 20px 20px",
michael@0 75 },
michael@0 76 {
michael@0 77 specified: "40px/repeat(2, (a) 20px)",
michael@0 78 gridTemplateColumns: "40px",
michael@0 79 gridTemplateRows: "(a) 20px (a) 20px",
michael@0 80 },
michael@0 81 {
michael@0 82 specified: "40px/(a)repeat(2, (b)20px)",
michael@0 83 gridTemplateColumns: "40px",
michael@0 84 gridTemplateRows: "(a b) 20px (b) 20px",
michael@0 85 },
michael@0 86 {
michael@0 87 specified: "40px/repeat(2, 20px(a))",
michael@0 88 gridTemplateColumns: "40px",
michael@0 89 gridTemplateRows: "20px (a) 20px (a)",
michael@0 90 },
michael@0 91 {
michael@0 92 specified: "40px/repeat(2, 20px(a)) (b)",
michael@0 93 gridTemplateColumns: "40px",
michael@0 94 gridTemplateRows: "20px (a) 20px (a b)",
michael@0 95 },
michael@0 96 {
michael@0 97 specified: "40px/repeat(2, (a) 20px(b)) (c)",
michael@0 98 gridTemplateColumns: "40px",
michael@0 99 gridTemplateRows: "(a) 20px (b a) 20px (b c)",
michael@0 100 },
michael@0 101 {
michael@0 102 specified: "40px/(a) repeat(3, (b c) 20px (d) 100px (e f)) (g)",
michael@0 103 gridTemplateColumns: "40px",
michael@0 104 gridTemplateRows: "(a b c) 20px (d) 100px (e f b c) 20px (d) 100px (e f b c) 20px (d) 100px (e f g)",
michael@0 105 },
michael@0 106 {
michael@0 107 specified: "'fizz'",
michael@0 108 gridTemplateAreas: "\"fizz\"",
michael@0 109 gridTemplateRows: "minmax(min-content, max-content)",
michael@0 110 },
michael@0 111 {
michael@0 112 specified: "(bar) 'fizz'",
michael@0 113 gridTemplateAreas: "\"fizz\"",
michael@0 114 gridTemplateRows: "(bar) minmax(min-content, max-content)",
michael@0 115 },
michael@0 116 {
michael@0 117 specified: "(foo) 40px / 'fizz'",
michael@0 118 gridTemplateAreas: "\"fizz\"",
michael@0 119 gridTemplateColumns: "(foo) 40px",
michael@0 120 gridTemplateRows: "minmax(min-content, max-content)",
michael@0 121 },
michael@0 122 {
michael@0 123 specified: "(foo) 40px / (bar) 'fizz'",
michael@0 124 gridTemplateAreas: "\"fizz\"",
michael@0 125 gridTemplateColumns: "(foo) 40px",
michael@0 126 gridTemplateRows: "(bar) minmax(min-content, max-content)",
michael@0 127 },
michael@0 128 {
michael@0 129 specified: "(foo) 40px / 'fizz' 100px",
michael@0 130 gridTemplateAreas: "\"fizz\"",
michael@0 131 gridTemplateColumns: "(foo) 40px",
michael@0 132 gridTemplateRows: "100px",
michael@0 133 },
michael@0 134 {
michael@0 135 specified: "(foo) 40px / (bar) 'fizz' 100px (buzz) \n (a) '.' 200px (b)",
michael@0 136 gridTemplateAreas: "\"fizz\" \".\"",
michael@0 137 gridTemplateColumns: "(foo) 40px",
michael@0 138 gridTemplateRows: "(bar) 100px (buzz a) 200px (b)",
michael@0 139 },
michael@0 140 {
michael@0 141 specified: "subgrid",
michael@0 142 gridTemplateColumns: "subgrid",
michael@0 143 gridTemplateRows: "subgrid",
michael@0 144 },
michael@0 145 {
michael@0 146 specified: "subgrid / subgrid",
michael@0 147 gridTemplateColumns: "subgrid",
michael@0 148 gridTemplateRows: "subgrid",
michael@0 149 },
michael@0 150 {
michael@0 151 specified: "subgrid / subgrid (foo)",
michael@0 152 gridTemplateColumns: "subgrid",
michael@0 153 gridTemplateRows: "subgrid (foo)",
michael@0 154 },
michael@0 155 {
michael@0 156 specified: "subgrid / subgrid (foo) repeat(3, () (a b) (c))",
michael@0 157 gridTemplateColumns: "subgrid",
michael@0 158 gridTemplateRows: "subgrid (foo) () (a b) (c) () (a b) (c) () (a b) (c)",
michael@0 159 },
michael@0 160 {
michael@0 161 // https://bugzilla.mozilla.org/show_bug.cgi?id=978478#c1
michael@0 162 // The number of repetitions is clamped to
michael@0 163 // #define GRID_TEMPLATE_MAX_REPETITIONS 10000
michael@0 164 specified: "subgrid / subgrid (foo) repeat(999999999, (a))",
michael@0 165 gridTemplateColumns: "subgrid",
michael@0 166 // Array(n + 1).join(s) is a hack for the non-standard s.repeat(n)
michael@0 167 gridTemplateRows: "subgrid (foo)" + Array(10000 + 1).join(" (a)"),
michael@0 168 },
michael@0 169 {
michael@0 170 specified: "subgrid () (foo)/ subgrid (bar",
michael@0 171 gridTemplateColumns: "subgrid () (foo)",
michael@0 172 gridTemplateRows: "subgrid (bar)",
michael@0 173 },
michael@0 174 ];
michael@0 175
michael@0 176 grid_test_cases = grid_template_test_cases.concat([
michael@0 177 {
michael@0 178 specified: "row",
michael@0 179 gridAutoFlow: "row",
michael@0 180 },
michael@0 181 {
michael@0 182 specified: "none 40px",
michael@0 183 gridAutoFlow: "none",
michael@0 184 gridAutoColumns: "40px",
michael@0 185 },
michael@0 186 {
michael@0 187 specified: "column dense auto",
michael@0 188 gridAutoFlow: "column dense",
michael@0 189 gridAutoColumns: "minmax(min-content, max-content)",
michael@0 190 },
michael@0 191 {
michael@0 192 specified: "dense row minmax(min-content, 2fr)",
michael@0 193 gridAutoFlow: "row dense",
michael@0 194 gridAutoColumns: "minmax(min-content, 2fr)",
michael@0 195 },
michael@0 196 {
michael@0 197 specified: "row 40px / 100px",
michael@0 198 gridAutoFlow: "row",
michael@0 199 gridAutoColumns: "40px",
michael@0 200 gridAutoRows: "100px",
michael@0 201 },
michael@0 202 ]);
michael@0 203
michael@0 204 function run_tests(test_cases, shorthand, subproperties) {
michael@0 205 test_cases.forEach(function(test_case) {
michael@0 206 test(function() {
michael@0 207 var element = document.createElement('div');
michael@0 208 document.body.appendChild(element);
michael@0 209 element.style[shorthand] = test_case.specified;
michael@0 210 var computed = window.getComputedStyle(element);
michael@0 211 subproperties.forEach(function(longhand) {
michael@0 212 assert_equals(
michael@0 213 computed[longhand],
michael@0 214 test_case[longhand] || initial_values[longhand],
michael@0 215 longhand
michael@0 216 );
michael@0 217 });
michael@0 218 }, "test parsing of 'grid-template: " + test_case.specified + "'");
michael@0 219 });
michael@0 220 }
michael@0 221
michael@0 222 run_tests(grid_template_test_cases, "gridTemplate", [
michael@0 223 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);
michael@0 224
michael@0 225 run_tests(grid_test_cases, "grid", [
michael@0 226 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
michael@0 227 "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);
michael@0 228
michael@0 229 </script>
michael@0 230 </body>
michael@0 231 </html>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial