::column pseudo element parsing and computed style tests

lilles · chromium-wpt-export-bot · commit 1d55057f6bd6 · 2024-12-04T03:19:31.000-08:00
Allowing ::column on ::before elements is not specifically mentioned in the spec, but a ::before element can be a multicol scroll container with generated content. There is also an assumption here that all properties fully cascade even if just a few actually have an effect. Bug: 365680822, 382090952 Change-Id: I73d725d4bbf071016d53fc5183f2b9cea177f9ce Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6068466 Reviewed-by: Daniil Sakhapov <sakhapov@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1391571}
diff --git a/css/css-multicol/parsing/column-pseudo-computed.html b/css/css-multicol/parsing/column-pseudo-computed.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>CSS Multi-column Layout Test: Computed ::column style</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#column-pseudo">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 20px;
+    scroll-margin-bottom: 4px;
+  }
+  #target::column {
+    font-size: 40px;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    scroll-margin: 2px;
+    scroll-margin-top: 2em;
+    scroll-margin-bottom: inherit;
+  }
+</style>
+<div id="target"></div>
+<script>
+  const column_style = getComputedStyle(target, "::column");
+
+  test(() => {
+    assert_equals(column_style.fontSize, "40px");
+  }, "::column font-size applied");
+
+  test(() => {
+    assert_equals(column_style.scrollSnapAlign, "start");
+  }, "::column scroll-snap-align");
+
+  test(() => {
+    assert_equals(column_style.scrollSnapStop, "always");
+  }, "::column scroll-snap-stop");
+
+  test(() => {
+    assert_equals(column_style.scrollSnapMarginLeft, "2px");
+    assert_equals(column_style.scrollSnapMarginRight, "2px");
+    assert_equals(column_style.scrollSnapMarginTop, "80px");
+    assert_equals(column_style.scrollSnapMarginBottom, "4px");
+  }, "::column scroll-snap-margin");
+
+</script>
diff --git a/css/css-multicol/parsing/column-pseudo-invalid.html b/css/css-multicol/parsing/column-pseudo-invalid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>CSS Multi-column Layout Test: ::column pseudo element invalid parsing</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#column-pseudo">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+  test_invalid_selector("::column:hover");
+  test_invalid_selector("::column::before");
+  test_invalid_selector("::column::first-letter");
+  test_invalid_selector("::column::first-line");
+  test_invalid_selector("::first-letter::column");
+  test_invalid_selector("::column::slotted(*)");
+</script>
diff --git a/css/css-multicol/parsing/column-pseudo-valid.html b/css/css-multicol/parsing/column-pseudo-valid.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>CSS Multi-column Layout Test: ::column pseudo element valid parsing</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#column-pseudo">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+  test_valid_selector("::column");
+  test_valid_selector("::column::scroll-marker");
+  test_valid_selector("::before::column");
+  test_valid_selector("::before::column::scroll-marker");
+</script>
