gap-parsing-002.html (2557B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Align Gap Values: longhand and shorthand gap parsing for style attribute</title> 5 <link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> 6 <link rel="author" title="Karl Dubost" href="mailto:karlcow@apple.com"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/parsing-testcommon.js"></script> 10 </head> 11 <body> 12 <script> 13 test_valid_value("gap", "normal"); 14 test_valid_value("gap", "10px"); 15 test_valid_value("gap", "normal normal", "normal"); 16 test_valid_value("gap", "10px 10px", "10px"); 17 test_valid_value("column-gap", "normal"); 18 test_valid_value("column-gap", "10px"); 19 test_valid_value("row-gap", "normal"); 20 test_valid_value("row-gap", "10px"); 21 22 const div = document.createElement("div"); 23 const style = div.style; 24 25 test(function() { 26 style.cssText = "row-gap: normal; column-gap: normal;"; 27 assert_equals(style.cssText, "gap: normal;"); 28 }, "'row-gap: normal; column-gap: normal;' is serialized to 'gap: normal;'"); 29 30 test(function() { 31 style.cssText = "row-gap: normal; column-gap: normal;"; 32 assert_equals(style.getPropertyValue('gap'), "normal"); 33 }, "getPropertyValue for 'row-gap: normal; column-gap: normal;' returns 'normal'"); 34 35 test(function() { 36 style.cssText = "row-gap: 10px; column-gap: 10px;"; 37 assert_equals(style.cssText, "gap: 10px;"); 38 }, "'row-gap: 10px; column-gap: 10px;' is serialized to 'gap: 10px;'"); 39 40 test(function() { 41 style.cssText = "row-gap: 10px; column-gap: 10px;"; 42 assert_equals(style.getPropertyValue('gap'), "10px"); 43 }, "getPropertyValue for 'row-gap: 10px; column-gap: 10px;' returns '10px'"); 44 45 test(function() { 46 style.cssText = "row-gap: 10px; column-gap: normal;"; 47 assert_equals(style.cssText, "gap: 10px normal;"); 48 }, "'row-gap: 10px; column-gap: normal;' is serialized to 'gap: 10px normal;'"); 49 50 test(function() { 51 style.cssText = "row-gap: 10px; column-gap: normal;"; 52 assert_equals(style.getPropertyValue('gap'), "10px normal"); 53 }, "getPropertyValue for 'row-gap: 10px; column-gap: normal;' returns '10px normal'"); 54 55 test(function() { 56 style.cssText = "column-gap: normal; row-gap: 10px;"; 57 assert_equals(style.cssText, "gap: 10px normal;"); 58 }, "'column-gap: normal; row-gap: 10px;' is serialized to 'gap: 10px normal;'"); 59 60 test(function() { 61 style.cssText = "column-gap: normal; row-gap: 10px;"; 62 assert_equals(style.getPropertyValue('gap'), "10px normal"); 63 }, "getPropertyValue for 'column-gap: normal; row-gap: 10px;' returns '10px normal'"); 64 65 </script> 66 </body> 67 </html>