fix: fix rendering order when change css display:none to block. (#639)

Fix a rendering bug when updating an element's style from display: none
to display: block in the middle of the DOM tree, especially when the
previous DOM nodes also have display: none.

integration_tests/specs/css/css-display/display.ts

@@ -197,4 +197,53 @@ describe('display', () => {
 
     positioned.click();
   });
+
+  it('should works when reattach display none to dom tree in middle tree', async () => {
+    let one, two, three;
+    let container = createElement('div', {}, [
+      one = createElement('div', {
+        style: {
+          display: 'block'
+        }
+      }, [
+        createText('One')
+      ]),
+      createElement('div', {
+        style: {
+          display: 'none'
+        }
+      }),
+      createElement('div', {
+        style: {
+          display: 'none'
+        }
+      }),
+      createElement('div', {
+        style: {
+          display: 'none'
+        }
+      }),
+      two = createElement('div', {
+        style: {
+          display: 'none'
+        },
+      }, [
+        createText('Two')
+      ]),
+      three = createElement('div', {
+        style: {
+          style: 'block'
+        }
+      }, [
+        createText('Three')
+      ])
+    ]);
+    BODY.append(container);
+
+    await snapshot();
+
+    two.style.display = 'block';
+
+    await snapshot();
+  });
 });

webf/lib/src/dom/element.dart

@@ -1441,11 +1441,21 @@ abstract class Element extends ContainerNode with ElementBase, ElementEventMixin
         RenderBoxModel _renderBoxModel = renderBoxModel!;
         // Find the renderBox of its containing block.
         RenderBox? containingBlockRenderBox = getContainingBlockRenderBox();
+        Node? previousSiblingNode = previousSibling;
         // Find the previous siblings to insert before renderBoxModel is detached.
-        RenderBox? preSibling = previousSibling?.renderer;
+        RenderBox? previousSiblingRenderBox = previousSiblingNode?.renderer;
+
+        // Search for elements whose style is not display: none.
+        while (previousSiblingRenderBox == null &&
+            previousSiblingNode is Element &&
+            previousSiblingNode.renderStyle.display == CSSDisplay.none) {
+          previousSiblingNode = previousSiblingNode.previousSibling;
+          previousSiblingRenderBox = previousSiblingNode?.renderer;
+        }
+
         // Original parent renderBox.
         RenderBox parentRenderBox = parentNode!.renderer!;
-        _renderBoxModel.attachToContainingBlock(containingBlockRenderBox, parent: parentRenderBox, after: preSibling);
+        _renderBoxModel.attachToContainingBlock(containingBlockRenderBox, parent: parentRenderBox, after: previousSiblingRenderBox);
       }
     }