openkraken / kraken

A web standards-compliant, high-performance rendering engine based on Flutter.
https://openkraken.com
Apache License 2.0
4.93k stars 304 forks source link

容器的 width 由百分比的 width 的 child 撑开时计算不正确 #1396

Open temper357 opened 2 years ago

temper357 commented 2 years ago

重现代码 | Code example:

  // @TODO: The width of parent with no width style is no determined by its child but its grand child?
  xit("size 002", async () => {
    let p_1;
    let flexbox_1;
    let rect;
    let rect_1;
    let rect_2;
    let rect_3;
    let rect_4;
    let rect_5;
    let rect_6;
    let rect_7;
    p_1 = createElement(
      "p",
      {
        style: {
          "box-sizing": "border-box",
        },
      },
      [
        createText(`auto flex-basis. However, as this is a width, we follow regular width
      rules and resolve the percentage:`),
      ]
    );
    flexbox_1 = createElement(
      "div",
      {
        class: "flexbox",
        style: {
          display: "flex",
          border: "3px solid black",
          "box-sizing": "border-box",
          width: "300px",
        },
      },
      [
        createElement(
          "div",
          {
            "data-expected-width": "50",
            style: {
              "box-sizing": "border-box",
            },
          },
          [
            createElement(
              "div",
              {
                "data-expected-width": "25",
                style: {
                  overflow: "hidden",
                  "box-sizing": "border-box",
                  width: "50%",
                },
              },
              [
                (rect_2 = createElement("div", {
                  class: "rect",
                  style: {
                    width: "50px",
                    height: "50px",
                    "background-color": "green",
                    "box-sizing": "border-box",
                  },
                })),
              ]
            ),
          ]
        ),
        (rect_3 = createElement("div", {
          class: "rect flex-none",
          style: {
            "-webkit-flex": "none",
            flex: "none",
            width: "50px",
            height: "50px",
            "background-color": "green",
            "box-sizing": "border-box",
          },
        })),
      ]
    );
    BODY.appendChild(p_1);
    BODY.appendChild(flexbox_1);

    await snapshot();
  });

预期结果 | Expected results: image

实际结果 | Actual results: image