Fix blockification and deblockification of flex/grid items when wrapped inside display: contents elements.

- Added new inheritable style builder flag `CASCADE_BEYOND_DISPLAY_CONTENTS` with it's corresponding adjuster function
- Modified tests to also include the case where the `display: contents` wrapper stays the same but the container switches `display` type after the first style resolution

- Moved adjustment code to `set_bits`
- Renamed flag to `DISPLAY_CONTENTS_IN_ITEM_CONTAINER`

Differential Revision: https://phabricator.services.mozilla.com/D274679

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1960699
gecko-commit: 9c41ae9c99de9c737bcc39531f6094ed1bb6482d
gecko-reviewers: emilio, firefox-style-system-reviewers

Author: sickl8

css/css-display/display-contents-blockify-dynamic.html

@@ -15,6 +15,22 @@
     <span></span>
   </div>
 </div>
+<div id="grid-to-block" style="display: grid">
+  <div style="display: contents">
+    <div style="display: contents">
+      <button>button1</button>
+      <button id="deblockified">button2</button>
+    </div>
+  </div>
+</div>
+<div id="block-to-grid" style="display: block">
+  <div style="display: contents">
+    <div style="display: contents">
+      <button>button1</button>
+      <button id="blockified">button2</button>
+    </div>
+  </div>
+</div>
 <script>
 function display(el) {
   return getComputedStyle(el).display;
@@ -31,4 +47,26 @@
   assert_equals(display(child), "block", "Grid child should get blockified");
   assert_equals(display(grandChild), "inline", "Grid grand-child should get un-blockified when its parent's display stops being `contents`");
 }, "Dynamic changes to `display` causing blockification of children are handled correctly");
+
+test(() => {
+  let gridToBlock = document.getElementById("grid-to-block");
+  let itemGrandChild = document.getElementById("deblockified");
+
+  assert_equals(display(gridToBlock), "grid", "Container should be a grid");
+  assert_equals(display(itemGrandChild), "block", "Item should have been blockified");
+  gridToBlock.style.display = "block";
+  assert_equals(display(gridToBlock), "block", "Container should become a block");
+  assert_equals(display(itemGrandChild), "inline-block", "Item should get de-blockified");
+}, "Dynamic changes to `display` from `grid` to `block` should cause children to get de-blockified despite being children of `display: contents` elements");
+
+test(() => {
+  let blockToGrid = document.getElementById("block-to-grid");
+  let itemGrandChild = document.getElementById("blockified");
+
+  assert_equals(display(blockToGrid), "block", "Container should be a block");
+  assert_equals(display(itemGrandChild), "inline-block", "Item should not have been blockified");
+  blockToGrid.style.display = "grid";
+  assert_equals(display(blockToGrid), "grid", "Container should become a grid");
+  assert_equals(display(itemGrandChild), "block", "Item should get blockified");
+}, "Dynamic changes to `display` from `block` to `grid` should cause children to get blockified despite being children of `display: contents` elements")
 </script>