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

空 display inline-block div 的高度应由其字体高度撑开 #1395

Open temper357 opened 2 years ago

temper357 commented 2 years ago

重现代码 | Code example:

  xit('empty-line-expected', async () => {
    let b;
    let b_1;
    let b_2;
    let p;
    p = createElement(
      'p',
      {
        style: {
          'box-sizing': 'border-box',
        },
      },
      [
        createText(`abc
`),
        (b = createElement(
          'span',
          {
            class: 'b',
            style: {
              display: 'inline-block',
              border: 'rgba(255,0,0,0.5) solid 1px',
              'box-sizing': 'border-box',
            },
          },
          [
            createElement('span', {
              contenteditable: 'true',
              style: {
                display: 'inline-block',
                background: '#ddf',
                'min-width': '20px',
                margin: '2px',
                'box-sizing': 'border-box',
              },
            }),
          ]
        )),
        (b_1 = createElement(
          'span',
          {
            class: 'b',
            style: {
              display: 'inline-block',
              border: 'rgba(255,0,0,0.5) solid 1px',
              'box-sizing': 'border-box',
            },
          },
          [
            createElement(
              'span',
              {
                contenteditable: 'true',
                style: {
                  display: 'inline-block',
                  background: '#ddf',
                  'min-width': '20px',
                  margin: '2px',
                  'box-sizing': 'border-box',
                },
              },
              [createText(`a`)]
            ),
          ]
        )),
        (b_2 = createElement(
          'span',
          {
            class: 'b',
            style: {
              display: 'inline-block',
              border: 'rgba(255,0,0,0.5) solid 1px',
              'box-sizing': 'border-box',
            },
          },
          [
            createElement(
              'span',
              {
                contenteditable: 'true',
                style: {
                  display: 'inline-block',
                  background: '#ddf',
                  'min-width': '20px',
                  margin: '2px',
                  'box-sizing': 'border-box',
                },
              },
              [createText(`a`)]
            ),
            createElement('span', {
              contenteditable: 'true',
              style: {
                display: 'inline-block',
                background: '#ddf',
                'min-width': '20px',
                margin: '2px',
                'box-sizing': 'border-box',
              },
            }),
            createElement(
              'span',
              {
                style: {
                  'box-sizing': 'border-box',
                },
              },
              [createText(`non-editable`)]
            ),
          ]
        )),
        createText(`
def`),
      ]
    );
    BODY.appendChild(p);

    await snapshot();
  });

预期结果 | Expected results: image

实际结果 | Actual results: image