layout/style/test/test_grid_shorthand_serialization.html@7e26c7da4463 (annotated)
layout/style/test/test_grid_shorthand_serialization.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 serialization of CSS Grid shorthand properties</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 | gridAutoColumns: "auto", |
| michael@0 | 21 | gridAutoRows: "auto", |
| michael@0 | 22 | }; |
| michael@0 | 23 | |
| michael@0 | 24 | // For various specified values of the grid-template subproperties, |
| michael@0 | 25 | // test the serialization of the shorthand. |
| michael@0 | 26 | var grid_template_test_cases = [ |
| michael@0 | 27 | { |
| michael@0 | 28 | gridTemplateRows: "100px", |
| michael@0 | 29 | shorthand: "none / 100px", |
| michael@0 | 30 | }, |
| michael@0 | 31 | { |
| michael@0 | 32 | gridTemplateColumns: "40px", |
| michael@0 | 33 | shorthand: "40px / none", |
| michael@0 | 34 | }, |
| michael@0 | 35 | { |
| michael@0 | 36 | gridTemplateColumns: "40px", |
| michael@0 | 37 | gridTemplateRows: "subgrid", |
| michael@0 | 38 | shorthand: "40px / subgrid", |
| michael@0 | 39 | }, |
| michael@0 | 40 | { |
| michael@0 | 41 | gridTemplateColumns: "(foo) 40px (bar)", |
| michael@0 | 42 | gridTemplateRows: "(baz) 100px (fizz)", |
| michael@0 | 43 | shorthand: "(foo) 40px (bar) / (baz) 100px (fizz)", |
| michael@0 | 44 | }, |
| michael@0 | 45 | { |
| michael@0 | 46 | gridTemplateAreas: "\"a\"", |
| michael@0 | 47 | gridTemplateRows: "20px", |
| michael@0 | 48 | shorthand: "\"a\" 20px", |
| michael@0 | 49 | }, |
| michael@0 | 50 | { |
| michael@0 | 51 | gridTemplateAreas: "\"a\"", |
| michael@0 | 52 | gridTemplateRows: "(foo) 20px (bar)", |
| michael@0 | 53 | shorthand: "(foo) \"a\" 20px (bar)", |
| michael@0 | 54 | }, |
| michael@0 | 55 | // Combinations of longhands that make the shorthand non-serializable: |
| michael@0 | 56 | { |
| michael@0 | 57 | gridTemplateAreas: "\"a\"", |
| michael@0 | 58 | gridTemplateRows: "20px 100px", |
| michael@0 | 59 | shorthand: "", |
| michael@0 | 60 | }, |
| michael@0 | 61 | { |
| michael@0 | 62 | gridTemplateAreas: "\"a\" \"b\"", |
| michael@0 | 63 | gridTemplateRows: "20px", |
| michael@0 | 64 | shorthand: "", |
| michael@0 | 65 | }, |
| michael@0 | 66 | { |
| michael@0 | 67 | gridTemplateAreas: "\"a\"", |
| michael@0 | 68 | gridTemplateRows: "subgrid", |
| michael@0 | 69 | shorthand: "", |
| michael@0 | 70 | }, |
| michael@0 | 71 | { |
| michael@0 | 72 | gridTemplateAreas: "\"a\"", |
| michael@0 | 73 | gridTemplateRows: "subgrid (foo)", |
| michael@0 | 74 | shorthand: "", |
| michael@0 | 75 | }, |
| michael@0 | 76 | { |
| michael@0 | 77 | gridTemplateAreas: "\"a\"", |
| michael@0 | 78 | gridTemplateRows: "20px", |
| michael@0 | 79 | gridTemplateColumns: "subgrid", |
| michael@0 | 80 | shorthand: "", |
| michael@0 | 81 | }, |
| michael@0 | 82 | ]; |
| michael@0 | 83 | |
| michael@0 | 84 | grid_test_cases = grid_template_test_cases.concat([ |
| michael@0 | 85 | { |
| michael@0 | 86 | gridAutoFlow: "row", |
| michael@0 | 87 | shorthand: "row auto / auto", |
| michael@0 | 88 | }, |
| michael@0 | 89 | { |
| michael@0 | 90 | gridAutoColumns: "40px", |
| michael@0 | 91 | shorthand: "none 40px / auto", |
| michael@0 | 92 | }, |
| michael@0 | 93 | { |
| michael@0 | 94 | gridAutoFlow: "column dense", |
| michael@0 | 95 | gridAutoColumns: "minmax(min-content, max-content)", |
| michael@0 | 96 | shorthand: "column dense minmax(min-content, max-content) / auto", |
| michael@0 | 97 | }, |
| michael@0 | 98 | { |
| michael@0 | 99 | gridAutoFlow: "row dense", |
| michael@0 | 100 | gridAutoRows: "minmax(min-content, 2fr)", |
| michael@0 | 101 | shorthand: "row dense auto / minmax(min-content, 2fr)", |
| michael@0 | 102 | }, |
| michael@0 | 103 | { |
| michael@0 | 104 | gridAutoFlow: "row", |
| michael@0 | 105 | gridAutoColumns: "40px", |
| michael@0 | 106 | gridAutoRows: "100px", |
| michael@0 | 107 | shorthand: "row 40px / 100px", |
| michael@0 | 108 | }, |
| michael@0 | 109 | ]); |
| michael@0 | 110 | |
| michael@0 | 111 | function run_tests(test_cases, shorthand, subproperties) { |
| michael@0 | 112 | test_cases.forEach(function(test_case) { |
| michael@0 | 113 | test(function() { |
| michael@0 | 114 | var element = document.createElement('div'); |
| michael@0 | 115 | document.body.appendChild(element); |
| michael@0 | 116 | subproperties.forEach(function(longhand) { |
| michael@0 | 117 | element.style[longhand] = test_case[longhand] || |
| michael@0 | 118 | initial_values[longhand]; |
| michael@0 | 119 | }); |
| michael@0 | 120 | assert_equals(element.style[shorthand], test_case.shorthand); |
| michael@0 | 121 | }, "test shorthand serialization " + JSON.stringify(test_case)); |
| michael@0 | 122 | }); |
| michael@0 | 123 | } |
| michael@0 | 124 | |
| michael@0 | 125 | run_tests(grid_template_test_cases, "gridTemplate", [ |
| michael@0 | 126 | "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]); |
| michael@0 | 127 | |
| michael@0 | 128 | run_tests(grid_test_cases, "grid", [ |
| michael@0 | 129 | "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", |
| michael@0 | 130 | "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]); |
| michael@0 | 131 | |
| michael@0 | 132 | </script> |
| michael@0 | 133 | </body> |
| michael@0 | 134 | </html> |
