fix: 修复因宽度初始值不正确导致子元素宽度计算错误的问题

woai3c · Jul 3, 2023 · 47db0f3 · 47db0f3
1 parent dd371b0
commit 47db0f3
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,18 @@
 # tiny-rendering-engine
+
 从零开始实现一个玩具版浏览器渲染引擎
+
 ## 功能
+
 * [x] HTML 解析器
 * [x] CSS 解析器
 * [x] 构建样式树
-* [ ] CSS 盒子模型
-* [ ] 布局树
+* [x] CSS 盒子模型
+* [x] 布局树
 * [ ] 绘制
 
 ## 参考资料
+
 * [Let's build a browser engine!](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html)
 * [渲染页面：浏览器的工作原理](https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work)
 * [关键渲染路径](https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path)
diff --git a/examples/layout.html b/examples/layout.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>style</title>
+    <title>layout</title>
 </head>
 <body>
     <script src="../dist/render-engine.js"></script>
@@ -29,6 +29,10 @@
         `)
 
         const cssRules = parseCSS(`
+            * {
+                display: block;
+            }
+            
             div {
                 font-size: 14px;
                 position: relative;

diff --git a/src/layout/Dimensions.ts b/src/layout/Dimensions.ts
@@ -1,4 +1,4 @@
-import type Rect from './Rect'
+import Rect from './Rect'
 import type { EdgeSizes } from './type'
 
 export default class Dimensions {
@@ -15,12 +15,7 @@ export default class Dimensions {
             left: 0,
         }
 
-        this.content = {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-        } as Rect
+        this.content = new Rect()
 
         this.padding = { ...initValue }
         this.border = { ...initValue }

diff --git a/src/layout/LayoutBox.ts b/src/layout/LayoutBox.ts
@@ -30,7 +30,8 @@ export default class LayoutBox {
         const styleValues = this.styleNode?.values || {}
         const parentWidth = parentBlock.content.width
 
-        let width = styleValues.width
+        // 初始值为 auto
+        let width = styleValues.width ?? 'auto'
         let marginLeft = styleValues['margin-left'] || styleValues.margin || 0
         let marginRight = styleValues['margin-right'] || styleValues.margin || 0
 
@@ -92,16 +93,16 @@ export default class LayoutBox {
         }
 
         const dimensions = this.dimensions
-        dimensions.content.width = width
+        dimensions.content.width = parseInt(width)
 
-        dimensions.margin.left = marginLeft
-        dimensions.margin.right = marginRight
+        dimensions.margin.left = parseInt(marginLeft)
+        dimensions.margin.right = parseInt(marginRight)
 
-        dimensions.border.left = borderLeft
-        dimensions.border.right = borderRight
+        dimensions.border.left = parseInt(borderLeft)
+        dimensions.border.right = parseInt(borderRight)
 
-        dimensions.padding.left = paddingLeft
-        dimensions.padding.right = paddingRight
+        dimensions.padding.left = parseInt(paddingLeft)
+        dimensions.padding.right = parseInt(paddingRight)
     }
 
     calculateBlockPosition(parentBlock: Dimensions) {
@@ -131,11 +132,10 @@ export default class LayoutBox {
     }
 
     calculateBlockHeight() {
-        console.log('calculateBlockHeight')
         // 如果元素设置了 height，则使用 height，否则使用 layoutBlockChildren() 计算出来的高度
         const height = this.styleNode?.values.height
         if (height) {
-            this.dimensions.content.height = Number(height)
+            this.dimensions.content.height = parseInt(height)
         }
     }
 }
@@ -146,13 +146,13 @@ function sum(...args: (string | number)[]) {
             return prev
         }
 
-        return prev + Number(cur)
+        return prev + parseInt(String(cur))
     }, 0) as number
 }
 
 function transformValueSafe(val: number | string) {
     if (val === 'auto') return 0
-    return Number(val)
+    return parseInt(String(val))
 }
 
 function getBoxType(styleNode?: StyleNode) {