The Tor Browser / file comparison
comparison: layout/style/test/test_grid_shorthand_serialization.html
layout/style/test/test_grid_shorthand_serialization.html
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
equal
deleted
inserted
replaced
| -1:000000000000 | 0:d0854ca78f8c |
|---|---|
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <meta charset=utf-8> | |
| 5 <title>Test serialization of CSS Grid shorthand properties</title> | |
| 6 <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org"> | |
| 7 <script src="/resources/testharness.js"></script> | |
| 8 <script src="/resources/testharnessreport.js"></script> | |
| 9 <link rel='stylesheet' href='/resources/testharness.css'> | |
| 10 </head> | |
| 11 <body> | |
| 12 | |
| 13 <script> | |
| 14 | |
| 15 var initial_values = { | |
| 16 gridTemplateAreas: "none", | |
| 17 gridTemplateColumns: "none", | |
| 18 gridTemplateRows: "none", | |
| 19 gridAutoFlow: "none", | |
| 20 gridAutoColumns: "auto", | |
| 21 gridAutoRows: "auto", | |
| 22 }; | |
| 23 | |
| 24 // For various specified values of the grid-template subproperties, | |
| 25 // test the serialization of the shorthand. | |
| 26 var grid_template_test_cases = [ | |
| 27 { | |
| 28 gridTemplateRows: "100px", | |
| 29 shorthand: "none / 100px", | |
| 30 }, | |
| 31 { | |
| 32 gridTemplateColumns: "40px", | |
| 33 shorthand: "40px / none", | |
| 34 }, | |
| 35 { | |
| 36 gridTemplateColumns: "40px", | |
| 37 gridTemplateRows: "subgrid", | |
| 38 shorthand: "40px / subgrid", | |
| 39 }, | |
| 40 { | |
| 41 gridTemplateColumns: "(foo) 40px (bar)", | |
| 42 gridTemplateRows: "(baz) 100px (fizz)", | |
| 43 shorthand: "(foo) 40px (bar) / (baz) 100px (fizz)", | |
| 44 }, | |
| 45 { | |
| 46 gridTemplateAreas: "\"a\"", | |
| 47 gridTemplateRows: "20px", | |
| 48 shorthand: "\"a\" 20px", | |
| 49 }, | |
| 50 { | |
| 51 gridTemplateAreas: "\"a\"", | |
| 52 gridTemplateRows: "(foo) 20px (bar)", | |
| 53 shorthand: "(foo) \"a\" 20px (bar)", | |
| 54 }, | |
| 55 // Combinations of longhands that make the shorthand non-serializable: | |
| 56 { | |
| 57 gridTemplateAreas: "\"a\"", | |
| 58 gridTemplateRows: "20px 100px", | |
| 59 shorthand: "", | |
| 60 }, | |
| 61 { | |
| 62 gridTemplateAreas: "\"a\" \"b\"", | |
| 63 gridTemplateRows: "20px", | |
| 64 shorthand: "", | |
| 65 }, | |
| 66 { | |
| 67 gridTemplateAreas: "\"a\"", | |
| 68 gridTemplateRows: "subgrid", | |
| 69 shorthand: "", | |
| 70 }, | |
| 71 { | |
| 72 gridTemplateAreas: "\"a\"", | |
| 73 gridTemplateRows: "subgrid (foo)", | |
| 74 shorthand: "", | |
| 75 }, | |
| 76 { | |
| 77 gridTemplateAreas: "\"a\"", | |
| 78 gridTemplateRows: "20px", | |
| 79 gridTemplateColumns: "subgrid", | |
| 80 shorthand: "", | |
| 81 }, | |
| 82 ]; | |
| 83 | |
| 84 grid_test_cases = grid_template_test_cases.concat([ | |
| 85 { | |
| 86 gridAutoFlow: "row", | |
| 87 shorthand: "row auto / auto", | |
| 88 }, | |
| 89 { | |
| 90 gridAutoColumns: "40px", | |
| 91 shorthand: "none 40px / auto", | |
| 92 }, | |
| 93 { | |
| 94 gridAutoFlow: "column dense", | |
| 95 gridAutoColumns: "minmax(min-content, max-content)", | |
| 96 shorthand: "column dense minmax(min-content, max-content) / auto", | |
| 97 }, | |
| 98 { | |
| 99 gridAutoFlow: "row dense", | |
| 100 gridAutoRows: "minmax(min-content, 2fr)", | |
| 101 shorthand: "row dense auto / minmax(min-content, 2fr)", | |
| 102 }, | |
| 103 { | |
| 104 gridAutoFlow: "row", | |
| 105 gridAutoColumns: "40px", | |
| 106 gridAutoRows: "100px", | |
| 107 shorthand: "row 40px / 100px", | |
| 108 }, | |
| 109 ]); | |
| 110 | |
| 111 function run_tests(test_cases, shorthand, subproperties) { | |
| 112 test_cases.forEach(function(test_case) { | |
| 113 test(function() { | |
| 114 var element = document.createElement('div'); | |
| 115 document.body.appendChild(element); | |
| 116 subproperties.forEach(function(longhand) { | |
| 117 element.style[longhand] = test_case[longhand] || | |
| 118 initial_values[longhand]; | |
| 119 }); | |
| 120 assert_equals(element.style[shorthand], test_case.shorthand); | |
| 121 }, "test shorthand serialization " + JSON.stringify(test_case)); | |
| 122 }); | |
| 123 } | |
| 124 | |
| 125 run_tests(grid_template_test_cases, "gridTemplate", [ | |
| 126 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]); | |
| 127 | |
| 128 run_tests(grid_test_cases, "grid", [ | |
| 129 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", | |
| 130 "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]); | |
| 131 | |
| 132 </script> | |
| 133 </body> | |
| 134 </html> |
