grid-lanes-shorthand-valid.html (3294B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes: parsing grid-lanes with valid values</title> 6 <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/parsing-testcommon.js"></script> 11 <script src="/css/support/shorthand-testcommon.js"></script> 12 </head> 13 <style> 14 #div { 15 grid-lanes: "test" max-content row !important; 16 } 17 </style> 18 <body> 19 <div id=div></div> 20 <div id=testDiv></div> 21 <script> 22 test(() => { 23 assert_equals(getComputedStyle(div).gridLanes, '"test" max-content row'); 24 }, 'grid-lanes followed by !important'); 25 26 function test_valid_grid_lanes_value(property, value, serializedValue) { 27 if (arguments.length < 3) 28 serializedValue = value; 29 var stringifiedValue = JSON.stringify(value); 30 test(()=>{ 31 var testDiv = document.getElementById('testDiv'); 32 testDiv.style[property] = ""; 33 testDiv.style[property] = value; 34 var readValue = getComputedStyle(testDiv).getPropertyValue(property); 35 assert_not_equals(readValue, "", "property should be set"); 36 assert_equals(readValue, serializedValue, "serialization should be canonical"); 37 }, `grid-lanes: ${value} should be valid.`); 38 } 39 40 test_valid_value("grid-lanes", '"a" calc(10px) column-reverse'); 41 test_valid_value("grid-lanes", 'minmax(calc(30% + 40vw), 10px)', 'minmax(calc(30% + 40vw), 10px) normal'); 42 test_valid_grid_lanes_value("grid-lanes", 'minmax(10px, 20px) row', 'minmax(10px, 20px) row'); 43 test_valid_grid_lanes_value("grid-lanes", '1px 2px', '1px 2px normal'); 44 test_valid_grid_lanes_value("grid-lanes", '"a" 10px', '"a" 10px normal'); 45 test_valid_grid_lanes_value("grid-lanes", '"a b" 10px 20px row'); 46 test_valid_grid_lanes_value("grid-lanes", '"a b c" 10% 20% 30% row-reverse', '"a b c" 10% 20% 30% row-reverse'); 47 test_valid_grid_lanes_value("grid-lanes", 'repeat(5, auto) row'); 48 test_shorthand_value('grid-lanes', 'none', { 49 'grid-template-columns': 'none', 50 'grid-template-areas': 'none', 51 'grid-lanes-direction': 'normal' 52 }); 53 test_shorthand_value('grid-lanes', '10px', { 54 'grid-template-columns': '10px', 55 'grid-template-areas': 'none', 56 'grid-lanes-direction': 'normal' 57 }); 58 test_shorthand_value('grid-lanes', '"b a" 20% 40% column', { 59 'grid-template-columns': '20% 40%', 60 'grid-template-areas': '"b a"', 61 'grid-lanes-direction': 'column' 62 }); 63 test_shorthand_value('grid-lanes', '"b b a" 1fr 2fr 3fr row', { 64 'grid-template-rows': '1fr 2fr 3fr', 65 'grid-template-areas': '"b" "b" "a"', 66 'grid-lanes-direction': 'row' 67 }); 68 test_shorthand_value('grid-lanes', 'repeat(2, auto) row-reverse', { 69 'grid-template-rows': 'repeat(2, auto)', 70 'grid-template-areas': 'none', 71 'grid-lanes-direction': 'row-reverse' 72 }); 73 test_shorthand_value('grid-lanes', '"b a" 20% 40% normal', { 74 'grid-template-columns': '20% 40%', 75 'grid-template-areas': '"b a"', 76 'grid-lanes-direction': 'normal' 77 }); 78 </script> 79 </body> 80 </html>