Files
sousa-gecko/testing/web-platform/tests/css/css-inline/parsing/vertical-align-valid.html
T
Sajid Anwar fd791116ad Bug 1830771 - Convert vertical-align into a shorthand property. r=layout-reviewers,firefox-style-system-reviewers,emilio
Replaces the `vertical-align` longhand with the shorthand version and the corresponding `alignment-baseline` and `baseline-shift` longhands (the `baseline-source` property was already implemented). Some notes about this change:

- The CSS Inline Layout Module Level 3 specification introduced new
  values to `alignment-baseline` and `baseline-shift` that were not
  available in the original `vertical-align` longhand. This change
  only implements the original keywords; the new values will be used
  in a future patch.

- The SVG layout still ignores the `vertical-align` (and now the
  corresponding longhands) in favor of the `dominant-baseline`. This
  will also be addressed in a future patch.

Differential Revision: https://phabricator.services.mozilla.com/D277725
2026-01-16 08:50:29 +00:00

59 lines
2.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Inline Layout: parsing vertical-align with valid values</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align">
<link rel="help" href="https://drafts.csswg.org/css-inline/#propdef-vertical-align">
<meta name="assert" content="vertical-align supports the CSS Inline Layout Module Level 3 shorthand syntax.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// Test shorthand values equivalent to the initial `baseline` value
test_valid_value("vertical-align", "baseline", "baseline");
test_valid_value("vertical-align", "0", "baseline");
test_valid_value("vertical-align", "0px", "baseline");
test_valid_value("vertical-align", "baseline 0", "baseline");
test_valid_value("vertical-align", "0px baseline", "baseline");
// Test individual non-initial values for `baseline-source`
test_valid_value("vertical-align", "first");
test_valid_value("vertical-align", "last");
// Test individual non-initial values for `alignment-baseline`
test_valid_value("vertical-align", "text-bottom");
test_valid_value("vertical-align", "alphabetic");
test_valid_value("vertical-align", "ideographic");
test_valid_value("vertical-align", "middle");
test_valid_value("vertical-align", "central");
test_valid_value("vertical-align", "mathematical");
test_valid_value("vertical-align", "text-top");
// Test individual non-initial values for `baseline-shift`
test_valid_value("vertical-align", "-10px");
test_valid_value("vertical-align", "0.5em");
test_valid_value("vertical-align", "20%");
test_valid_value("vertical-align", "calc(20% - 10px)");
test_valid_value("vertical-align", "sub");
test_valid_value("vertical-align", "super");
test_valid_value("vertical-align", "top");
test_valid_value("vertical-align", "center");
test_valid_value("vertical-align", "bottom");
// Test omissions of initial values for subproperties
test_valid_value("vertical-align", "first baseline", "first");
test_valid_value("vertical-align", "middle 0", "middle");
test_valid_value("vertical-align", "baseline super", "super");
test_valid_value("vertical-align", "last baseline sub", "last sub");
// Test canonical ordering for subproperties
test_valid_value("vertical-align", "super middle first", "first middle super");
test_valid_value("vertical-align", "1em last", "last 1em");
test_valid_value("vertical-align", "text-top first 10%", "first text-top 10%");
</script>
</body>
</html>