[Masonry] Add masonry display type

1. Introducing parsing for the new `masonry` and `inline-masonry` values for `display`, mapping them to their respective `EDisplay` enums. 2. Renaming feature flag to `CSSMasonryLayout`. 3. Adding test coverage for parsing of these tentative new values. Bug: 343257585 Change-Id: I076c31c48da249a42e939e4d9a9001c6d9743396 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5750163 Reviewed-by: Ian Kilpatrick <[email protected]> Reviewed-by: Alison Maher <[email protected]> Commit-Queue: Ethan Jimenez <[email protected]> Cr-Commit-Position: refs/heads/main@{#1338207}
web-platform-tests · Aug 7, 2024 · 888cac0 · 888cac0
1 parent 7d8aa0f
commit 888cac0
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/css/css-display/parsing/tentative/display-computed.html b/css/css-display/parsing/tentative/display-computed.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Display: getComputedStyle().display</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:[email protected]">
+<link rel="help" href="https://tabatkins.github.io/specs/css-masonry/#masonry-containers">
+<meta name="assert" content="position and float can change display computed value.">
+<meta name="assert" content="display computed value is otherwise as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+'use strict';
+
+// https://tabatkins.github.io/specs/css-masonry/#masonry-containers
+test_computed_value("display", "masonry");
+test_computed_value("display", "inline-masonry");
+
+// https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
+function test_display_affected(property, value) {
+  const target = document.getElementById('target');
+  test(() => {
+    target.style[property] = value;
+    target.style.display = 'inline-masonry';
+    assert_equals(getComputedStyle(target).display, 'masonry', 'inline-masonry -> masonry');
+
+    target.style[property] = '';
+    target.style.display = '';
+  }, property + ' ' + value + ' affects computed display');
+}
+
+test_display_affected("position", "absolute");
+test_display_affected("position", "fixed");
+test_display_affected("float", "left");
+test_display_affected("float", "right");
+</script>
+</body>
+</html>
diff --git a/css/css-display/parsing/tentative/display-valid.html b/css/css-display/parsing/tentative/display-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Display: Parsing display with valid values</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:[email protected]">
+<link rel="help" href="https://tabatkins.github.io/specs/css-masonry/#masonry-containers">
+<meta name="assert" content="display supports the new values 'masonry | inline-masonry'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// https://tabatkins.github.io/specs/css-masonry/#masonry-containers
+test_valid_value("display", "masonry");
+test_valid_value("display", "inline-masonry");
+</script>
+</body>
+</html>