justify-items-valid.html

mozilla-central/testing/web-platform/tests/css/css-align/parsing/justify-items-valid.html

Enable keyboard shortcuts

Source code

File a bug in Core :: Layout: Block and Inline

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /css/css-align/parsing/justify-items-valid.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Box Alignment Level 3: parsing justify-items with valid values</title>

<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">

<meta name="assert" content="justify-items supports the full grammar 'normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]'.">

<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("justify-items", "normal");

test_valid_value("justify-items", "stretch");

// <baseline-position> = [ first | last ]? baseline

test_valid_value("justify-items", "baseline");

test_valid_value("justify-items", "first baseline", "baseline");

test_valid_value("justify-items", "last baseline");

// <overflow-position>? [ <self-position> | left | right ]

// <overflow-position> = unsafe | safe

// <self-position> = center | start | end | self-start | self-end | flex-start | flex-end

test_valid_value("justify-items", "center");

test_valid_value("justify-items", "start");

test_valid_value("justify-items", "end");

test_valid_value("justify-items", "self-start");

test_valid_value("justify-items", "self-end");

test_valid_value("justify-items", "flex-start");

test_valid_value("justify-items", "flex-end");

test_valid_value("justify-items", "unsafe center");

test_valid_value("justify-items", "safe self-end");

test_valid_value("justify-items", "right");

test_valid_value("justify-items", "safe left");

// legacy | legacy && [ left | right | center ]

test_valid_value("justify-items", "legacy");

test_valid_value("justify-items", "left legacy", "legacy left");

test_valid_value("justify-items", "right legacy", "legacy right");

test_valid_value("justify-items", "center legacy", "legacy center");

</script>

</body>

</html>