eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-30 11:37:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tests: Import some basic WPT @container tests

Browse Source
This commit is contained in:
Sam Atkins
2026-03-25 16:31:06 +00:00
parent 0219eb2ef9
commit 37abfa323d
Notes: github-actions[bot] 2026-03-30 13:50:59 +00:00 
Author: https://github.com/AtkinsSJ
Commit: https://github.com/LadybirdBrowser/ladybird/commit/37abfa323db
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/8626
Reviewed-by: https://github.com/Calme1709
4 changed files with 343 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
Tests/LibWeb/Text/input/wpt-import/css/css-conditional/container-queries/at-container-parsing.html Normal file
View File

@@ -0,0 +1,138 @@
<!doctype html>
<title>@container: parsing</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<div style="container-name:name;container-type:size; width:100px; height:100px">
<main id="cq-main"></main>
</div>
<script>
setup(() => assert_implements_size_container_queries());
test_cq_condition_known('(width)');
test_cq_condition_known('(min-width: 0px)');
test_cq_condition_known('(max-width: 0px)');
test_cq_condition_known('(height)');
test_cq_condition_known('(min-height: 0px)');
test_cq_condition_known('(max-height: 0px)');
test_cq_condition_known('(aspect-ratio)');
test_cq_condition_known('(min-aspect-ratio: 1/2)');
test_cq_condition_known('(max-aspect-ratio: 1/2)');
test_cq_condition_known('(orientation: portrait)');
test_cq_condition_known('(inline-size)');
test_cq_condition_known('(min-inline-size: 0px)');
test_cq_condition_known('(max-inline-size: 0px)');
test_cq_condition_known('(block-size)');
test_cq_condition_known('(min-block-size: 0px)');
test_cq_condition_known('(max-block-size: 0px)');
test_cq_condition_known('(width: 100px)');
test_cq_condition_known('((width: 100px))');
test_cq_condition_known('(not (width: 100px))');
test_cq_condition_known('((width: 100px) and (height: 100px))');
test_cq_condition_known('(((width: 40px) or (width: 50px)) and (height: 100px))');
test_cq_condition_known('((width: 100px) and ((height: 40px) or (height: 50px)))');
test_cq_condition_known('(((width: 40px) and (height: 50px)) or (height: 100px))');
test_cq_condition_known('((width: 50px) or ((width: 40px) and (height: 50px)))');
test_cq_condition_known('((width: 100px) and (not (height: 100px)))');
test_cq_condition_known('(width < 100px)');
test_cq_condition_known('(width <= 100px)');
test_cq_condition_known('(width = 100px)');
test_cq_condition_known('(width > 100px)');
test_cq_condition_known('(width >= 100px)');
test_cq_condition_known('(100px < width)');
test_cq_condition_known('(100px <= width)');
test_cq_condition_known('(100px = width)');
test_cq_condition_known('(100px > width)');
test_cq_condition_known('(100px >= width)');
test_cq_condition_known('(100px < width < 200px)');
test_cq_condition_known('(100px < width <= 200px)');
test_cq_condition_known('(100px <= width < 200px)');
test_cq_condition_known('(100px > width > 200px)');
test_cq_condition_known('(100px > width >= 200px)');
test_cq_condition_known('(100px >= width > 200px)');
test_cq_condition_known('(width: calc(10px))');
test_cq_condition_known('(width: calc(10em))');
test_cq_condition_known('(width: calc(10px + 10em))');
test_cq_condition_known('(width < calc(10px + 10em))');
test_cq_condition_known('(width < max(10px, 10em))');
test_cq_condition_known('(calc(10px + 10em) < width)');
test_cq_condition_known('(calc(10px + 10em) < width < max(30px, 30em))');
test_cq_condition_known('(width: 100px) and (height: 100px)');
test_cq_condition_known('(width: 100px) or (height: 100px)');
test_cq_condition_known('not (width: 100px)');
test_cq_condition_unknown('foo(width)');
test_cq_condition_unknown('size(width)');
test_cq_condition_unknown('(asdf)');
test_cq_condition_unknown('(resolution > 100dpi)');
test_cq_condition_unknown('(resolution: 150dpi)');
test_cq_condition_unknown('(resolution: calc(2x))');
test_cq_condition_unknown('(color)');
test_cq_condition_unknown('(min-color: 1)');
test_cq_condition_unknown('(color-index >= 1)');
test_cq_condition_unknown('size(grid)');
test_cq_condition_unknown('(grid)');
test_cq_condition_unknown('(width == 100px)');
test_cq_condition_unknown('(100px == width)');
test_cq_condition_unknown('(100px = width = 200px)');
test_cq_condition_unknown('(100px < width > 200px)');
test_cq_condition_unknown('(100px <= width >= 200px)');
test_cq_condition_unknown('(100px <= width > 200px)');
test_cq_condition_unknown('(100px < width >= 200px)');
test_cq_condition_unknown('(100px : width : 200px)');
test_cq_condition_invalid('screen');
test_cq_condition_invalid('print');
test_cq_condition_invalid('not print');
test_cq_condition_invalid('only print');
test_cq_condition_invalid('screen and (width: 100px)');
test_cq_condition_invalid('screen or (width: 100px)');
test_cq_condition_invalid('not screen and (width: 100px)');
test_cq_condition_invalid('not screen or (width: 100px)');
test_cq_condition_invalid('foo (width: 100px)');
test_cq_rule_valid('name not (width <= 500px)');
test_cq_rule_valid('not (width <= 500px)');
test_cq_rule_valid('(width: 100px), (height: 100px)');
test_cq_rule_valid('(width),(height) , (inline-size > 20px)');
test_cq_rule_valid('(width), name (height)');
test_cq_rule_valid('--foo');
test_cq_rule_valid('container');
test_cq_rule_valid('container, container2');
test_cq_rule_invalid('');
test_cq_rule_invalid('(width),');
test_cq_rule_invalid(',(width)');
test_cq_rule_invalid('(width),,(height)');
test_container_name_valid('foo');
test_container_name_valid(' foo');
test_container_name_valid(' foo ');
test_container_name_valid('normal');
test_container_name_valid('Normal');
test_container_name_valid('auto');
test_container_name_valid('Auto');
test_container_name_invalid('foo foo');
test_container_name_invalid('1px');
test_container_name_invalid('50gil');
test_container_name_invalid('name(foo)');
test_container_name_invalid('type(inline-size)');
test_container_name_invalid('"foo"');
test_container_name_invalid('"inherit"');
test_container_name_invalid('inherit');
test_container_name_invalid('INITIAL');
test_container_name_invalid('Unset');
test_container_name_invalid('deFAULT');
test_container_name_invalid('none');
test_container_name_invalid('None');
test_container_name_invalid('and');
test_container_name_invalid('or');
test_container_name_invalid('not');
test_container_name_invalid('And');
test_container_name_invalid('oR');
test_container_name_invalid('nOt');
</script>

71
Tests/LibWeb/Text/input/wpt-import/css/css-conditional/container-queries/container-rule-cssom.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<title>CSS Conditional Test: CSSContainerRule API</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#the-csscontainerrule-interface">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style id="style_elm">
</style>
<script>
const sheet = style_elm.sheet;
function insertRule(source_text) {
try {
while (sheet.cssRules.length) {
sheet.deleteRule(0);
}
sheet.insertRule(source_text);
return sheet.cssRules[0];
} catch (e) {
return null;
}
}
test(() => {
const rule = insertRule("@container Name {}");
assert_true(!!rule, "Rule successfully parsed");
assert_equals(rule.containerName, "Name");
assert_equals(rule.containerQuery, "");
}, "containerName without query");
test(() => {
const rule = insertRule("@container (width > 300px) {}");
assert_true(!!rule, "Rule successfully parsed");
assert_equals(rule.containerName, "");
assert_equals(rule.containerQuery, "(width > 300px)");
}, "containerQuery without name");
test(() => {
const rule = insertRule("@container Name (width > 300px) {}");
assert_true(!!rule, "Rule successfully parsed");
assert_equals(rule.containerName, "Name");
assert_equals(rule.containerQuery, "(width > 300px)");
}, "containerName and containerQuery");
test(() => {
const rule = insertRule("@container Name (width > 300px) {}");
assert_true(!!rule, "Rule successfully parsed");
assert_equals(rule.conditions.length, 1);
assert_equals(rule.conditions[0].name, "Name");
assert_equals(rule.conditions[0].query, "(width > 300px)");
}, ".conditions");
test(() => {
const rule = insertRule("@container (width > 300px) {}");
assert_true(!!rule, "Rule successfully parsed");
assert_equals(rule.conditions.length, 1);
assert_equals(rule.conditions[0].name, "");
assert_equals(rule.conditions[0].query, "(width > 300px)");
}, ".conditions without name");
test(() => {
const rule = insertRule("@container (width > 300px), Name (width < 1000px) {}");
assert_true(!!rule, "Rule successfully parsed");
assert_equals(rule.conditions.length, 2);
assert_equals(rule.containerName, "");
assert_equals(rule.containerQuery, "");
assert_equals(rule.conditions[0].name, "");
assert_equals(rule.conditions[0].query, "(width > 300px)");
assert_equals(rule.conditions[1].name, "Name");
assert_equals(rule.conditions[1].query, "(width < 1000px)");
}, "multiple conditions");
</script>