67 lines
2.5 KiB
HTML
67 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Align Gap Values: longhand and shorthand gap parsing for style attribute</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
|
|
<link rel="author" title="Karl Dubost" href="mailto:karlcow@apple.com">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/parsing-testcommon.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
test_valid_value("gap", "normal");
|
|
test_valid_value("gap", "10px");
|
|
test_valid_value("gap", "normal normal", "normal");
|
|
test_valid_value("gap", "10px 10px", "10px");
|
|
test_valid_value("column-gap", "normal");
|
|
test_valid_value("column-gap", "10px");
|
|
test_valid_value("row-gap", "normal");
|
|
test_valid_value("row-gap", "10px");
|
|
|
|
const div = document.createElement("div");
|
|
const style = div.style;
|
|
|
|
test(function() {
|
|
style.cssText = "row-gap: normal; column-gap: normal;";
|
|
assert_equals(style.cssText, "gap: normal;");
|
|
}, "'row-gap: normal; column-gap: normal;' is serialized to 'gap: normal;'");
|
|
|
|
test(function() {
|
|
style.cssText = "row-gap: normal; column-gap: normal;";
|
|
assert_equals(style.getPropertyValue('gap'), "normal");
|
|
}, "getPropertyValue for 'row-gap: normal; column-gap: normal;' returns 'normal'");
|
|
|
|
test(function() {
|
|
style.cssText = "row-gap: 10px; column-gap: 10px;";
|
|
assert_equals(style.cssText, "gap: 10px;");
|
|
}, "'row-gap: 10px; column-gap: 10px;' is serialized to 'gap: 10px;'");
|
|
|
|
test(function() {
|
|
style.cssText = "row-gap: 10px; column-gap: 10px;";
|
|
assert_equals(style.getPropertyValue('gap'), "10px");
|
|
}, "getPropertyValue for 'row-gap: 10px; column-gap: 10px;' returns '10px'");
|
|
|
|
test(function() {
|
|
style.cssText = "row-gap: 10px; column-gap: normal;";
|
|
assert_equals(style.cssText, "gap: 10px normal;");
|
|
}, "'row-gap: 10px; column-gap: normal;' is serialized to 'gap: 10px normal;'");
|
|
|
|
test(function() {
|
|
style.cssText = "row-gap: 10px; column-gap: normal;";
|
|
assert_equals(style.getPropertyValue('gap'), "10px normal");
|
|
}, "getPropertyValue for 'row-gap: 10px; column-gap: normal;' returns '10px normal'");
|
|
|
|
test(function() {
|
|
style.cssText = "column-gap: normal; row-gap: 10px;";
|
|
assert_equals(style.cssText, "gap: 10px normal;");
|
|
}, "'column-gap: normal; row-gap: 10px;' is serialized to 'gap: 10px normal;'");
|
|
|
|
test(function() {
|
|
style.cssText = "column-gap: normal; row-gap: 10px;";
|
|
assert_equals(style.getPropertyValue('gap'), "10px normal");
|
|
}, "getPropertyValue for 'column-gap: normal; row-gap: 10px;' returns '10px normal'");
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|