Sam Davis Omekara
354b0a9425
Automatic update from web-platform-tests Introduce the `overlap-join` keyword for the `rule-inset` property This CL adds parsing support for the `overlap-join` keyword for the `*inset` property, as specified by the csswg resolution [1]. The purpose of this keyword is to enable gap decorations to join with the end of the decoration's width in the cross direction. This update covers parsing only, with the paint logic to be implemented in a subsequent change. Bug: 357648037 Change-Id: Id92c8c481e396164c323b7573ac4d921f6c357ee Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7683710 Commit-Queue: Sam Davis Omekara <samomekarajr@microsoft.com> Reviewed-by: Kevin Babbitt <kbabbitt@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1604505} -- wpt-commits: e9e9b8bb9c76d92a2a9bbbe71b89505da137c44b wpt-pr: 58735
38 lines
1.7 KiB
HTML
38 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Gaps: parsing rule-inset shorthands with valid values</title>
|
|
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/parsing-testcommon.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="target"></div>
|
|
<script>
|
|
const properties = ['column-rule-inset', 'row-rule-inset', 'rule-inset'];
|
|
for (const property of properties) {
|
|
test_valid_value(property, '0', '0px');
|
|
test_valid_value(property, '-20px');
|
|
test_valid_value(property, '5%');
|
|
test_valid_value(property, '10vmin');
|
|
test_valid_value(property, 'calc(8em + 4ex)');
|
|
test_valid_value(property, '10px 20px / 30px -10px');
|
|
test_valid_value(property, '-10px -20px / 25% 24%');
|
|
test_valid_value(property, '5% 10% / 15% 25%');
|
|
test_valid_value(property, '10px 20px', '10px 20px / 10px 20px');
|
|
test_valid_value(property, '10px 20px / -5px', '10px 20px / -5px -5px');
|
|
test_valid_value(property, '10px / 20px 30px', '10px 10px / 20px 30px');
|
|
test_valid_value(property, '10px / 20px', '10px 10px / 20px 20px');
|
|
test_valid_value(property, 'overlap-join');
|
|
test_valid_value(property, 'overlap-join 10px / overlap-join 10px');
|
|
test_valid_value(property, '10px overlap-join / 10px overlap-join');
|
|
test_valid_value(property, 'overlap-join / 10px', 'overlap-join overlap-join / 10px 10px');
|
|
test_valid_value(property, 'overlap-join overlap-join / overlap-join overlap-join', 'overlap-join');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|