display inline element 的盒模型实现有缺陷

[temper357]

display inline 的 element 如 span 在盒模型尺寸计算上与普通的 display block element 如 div 有如下一些异同点，导致在 inline element 中内嵌 block element 的场景下与 web 的显示效果有较大差异，需要根据 W3C IFC (Inline Formartting Context)标准重新设计：

1. 垂直方向的 border/padding 不生效
2. children 未包含在 border box 内部
3. background-color 不生效

重现代码 | Code example:

xit('018', async () => {
    let divStyle = {
      border: '3px solid silver',
      marginBottom: '20px',
      padding: '100px',
      width: '450px',
    };
    let testStyle = {
      border: '5px solid silver',
      padding: '50px',
      position: 'relative',
    };
    let boxStyle = {
      color: 'silver',
    };
    let positionStyle = {
      height: '30px',
      width: '30px',
      position: 'absolute',
    };
    let trControlStyle = {
      borderTop: '30px solid red',
      marginLeft: '20px',
      marginRight: '-50px',
      padding: '20px 15px',
    };
    let blControlStyle = {
      borderBottom: '30px solid red',
      marginLeft: '-50px',
      marginRight: '20px',
      padding: '20px 15px',
    };
    let topRightStyle = {
      backgroundColor: 'green',
      right: 0,
      top: 0,
    };
    let bottomLeftStyle = {
      backgroundColor: 'green',
      bottom: 0,
      left: 0,
    };
    let container = createElementWithStyle('div', divStyle);
    let test = createElementWithStyle('span', testStyle);
    let firstBox = createElementWithStyle('span', boxStyle);
    let trControl = createElementWithStyle('span', trControlStyle);
    let BL = createElementWithStyle('span', {
      ...positionStyle,
      ...bottomLeftStyle,
    });
    let TR = createElementWithStyle('span', {
      ...positionStyle,
      ...topRightStyle,
    });
    let lastBox = createElementWithStyle('span', boxStyle);
    let blControl = createElementWithStyle('span', blControlStyle);

    append(firstBox, trControl);
    append(lastBox, blControl);
    append(test, firstBox);
    append(BL, createText('BL'));
    append(test, BL);
    append(TR, createText('TR'));
    append(test, TR);
    append(test, lastBox);
    append(container, test);
    append(BODY, container);
    await snapshot();
  });

预期结果 ｜ Expected results:

实际结果 ｜ Actual results: