webkit chromium layout render继承结构

LayoutObject
	LayoutText
		LayoutBR
		LayoutCounter
		LayoutTextCombine
		LayoutTextFragment
		LayoutWordBreak

	LayoutBoxModelObject
		LayoutInline
			LayoutRubyAsInline
			LayoutQuote
		LayoutBox
			LayoutMultiColumnSpannerPlaceholder
			LayoutListMarker
			LayoutFrameSet
			LayoutTableBoxComponent
				LayoutTableCol
				LayoutTableRow
				LayoutTableSection		
			LayoutReplica

			LayoutReplaced(layout)
				LayoutPart(layout)
					LayoutEmbeddedObject
					LayoutFrame
					LayoutIFrame
				LayoutHTMLCanvas(LayoutReplaced::layout)
				LayoutImage(LayoutReplaced::layout)
					LayoutMedia
						LayoutVideo				

			LayoutBlock(layout->layoutBlock())
				LayoutTable(layout)
				LayoutScrollbarPart(layout)
				LayoutGrid(layoutBlock)
				LayoutDeprecatedFlexibleBox(layoutBlock)
				LayoutFlexibleBox(layoutBlock)
					LayoutButton
					LayoutFullScreen
					LayoutMenuList
					LayoutSlider
					LayoutSliderContainer
				LayoutBlockFlow(layoutBlock)
					LayoutView
					LayoutVTTCue
					LayoutTextTrackContainer
					LayoutTableCell
					LayoutTableCaption
					LayoutSliderThumb
					LayoutRubyText
					LayoutRubyRun
					LayoutRubyBase
					LayoutProgress
					LayoutMultiColumnSet
					LayoutListItem
					LayoutListBox
					LayoutDetailsMarker
					LayoutFieldset
					LayoutFileUploadControl
					LayoutFlowThread
					LayoutTextControl
						LayoutTextControlMultiLine
						LayoutTextControlSingleLine
							LayoutSearchField					


# api 目录
LineLayoutItem
	LineLayoutText
		LineLayoutBR
		LineLayoutSVGInlineText
		LineLayoutTextCombine
	LineLayoutBoxModel
		LineLayoutInline
			LineLayoutSVGInline
				LineLayoutSVGTextPath
		LineLayoutBox
			LineLayoutBlockFlow
				LineLayoutRubyBase
				LineLayoutRubyRun
				LineLayoutRubyText
			LineLayoutListMarker


LayoutItem
	LayoutTextItem
		LayoutTextFragmentItem
	LayoutBoxModel
		LayoutTextControlItem
		LayoutBoxItem
			LayoutPartItem
				LayoutEmbeddedItem
			LayoutLIItem
			LayoutImageItem
				LayoutMediaItem
			LayoutBlockItem    
				LayoutFullScreenItem
				LayoutMenuListItem
				LayoutProgressItem
				LayoutSliderItem
				LayoutViewItem

# line目录
DisplayItemClient
    InlineBox
        InlineFlowBox
            RootInlineBox
        InlineTextBox
        

LayoutBoxModelObject

  • 此类是所有CSS对象的基类, 所有CSS对象都遵循box模型对象。有关更多信息,请参见LayoutBox中的BOX MODEL部分。
  • 此类实际上没有框模型,但它公开了子类可以扩展的一些常用功能或概念。例如,有用于页边距,边框,填充和borderBoundingBox()的访问器。
  • 此类分开实现的原因是从其继承的2个类(LayoutBox和LayoutInline)具有不同的设计要求,但需要具有相同绘制层(PaintLayer)。
  • 有关Box模型的完整实现,请参见LayoutBox。
  • 此类的一个重要成员是PaintLayer。该类对于painting和hit-testing至关重要。基于layerTypeRequired()的返回值,有不同的方式实例化PaintLayers。有趣的是,大多数SVG对象都继承自LayoutSVGModelObject,因此不能具有PaintLayer。这是我们设计的不幸产物,因为它限制了代码共享并阻止了硬件加速SVG(当前设计需要使用PaintLayer进行合成)。
  • 为了充分理解LayoutBoxModelObject和继承的类,我们需要引入坐标系的概念。有2个主要坐标系:
    1. 物理坐标:这是用于绘画的坐标系,并且与在物理显示器(屏幕,打印页面)上看到的物理方向相对应。在CSS中,“ top”,“ right”,“ bottom”,“ left”全都在物理坐标中。该代码也符合此约定。
    2. 逻辑坐标:这是用于布局的坐标系。它由“writing-mode”(vertical-rl)和“direction”(ltr)确定。任何使用“before”,“after”,“before”或“after”的属性都在逻辑坐标中。这些也分别被称为“logical top”,“logical bottom”,“logical left”和“logical right”。

LayoutBox

  • LayoutBox实现完整的CSS框模型。 LayoutBoxModelObject仅为LayoutInline和LayoutBox引入了一些抽象。模型的逻辑位于LayoutBox中,例如用于形成CSS框的矩形和偏移量的存储(m_frameRect),以及用于不同框的getters。
  • LayoutBox也是支持滚动条的最高级类,但是逻辑被委托给PaintLayerScrollableArea。根据CSS规范,滚动条应“插入内部边框边缘和外部填充边缘之间”。滚动条的存在由“ overflow”属性确定,并且可以以布局溢出为条件(有关如何跟踪溢出的更多详细信息,请参见OverflowModel)。滚动条有2种类型:
    1. 非重叠滚动条占用内容框的空间。
    2. 覆盖滚动条不会仅覆盖边界框,可能会与填充框的内容重叠。有关滚动条的更多详细信息,请参见PaintLayerScrollableArea。

LayoutBlock

  • LayoutBlock是任何作为包含块的LayoutObject使用的类。另请参见LayoutObject::containsBlock(),该函数用于获取LayoutObject的包含块。
  • CSS是不一致的,并且允许内联元素(LayoutInline)包含块,即使它们不是块。我们的实现与内联混淆。例如LayoutObject :: containsBlock()与LayoutObject :: container()。
  • 包含块是布局的中心概念,尤其是对于out-of-flow定位的元素的布局而言。它们用于确定LayoutObject的大小和位置。
  • LayoutBlock是用于处理Blink中out-of-flow的已定位元素的类,尤其是对于布局而言(请参见layoutPositionedObjects())。这就是LayoutBlock通过 |gPositionedDescendantsMap| 跟踪它们的原因。 (请参见LayoutBlock.cpp)。
  • 请注意,这是Blink做出的设计决策,并不反映CSS:CSS允许相对定位的内联(LayoutInline)包含块,但它们没有逻辑来处理流出的定位对象。这会导致选择一个封闭的LayoutBlock(用于在布局期间插入流出的对象)和CSS包含块(用于调整大小)的复杂性。

LayoutReplaced

  • LayoutReplaced是CSS定义的Replaced elements的基类:
  • Replaced elements内容超出CSS格式模型范围的元素,例如图像,嵌入式文档或applet。
  • blink认为的Replaced elements具有固有尺寸(例如,图像或视频的自然尺寸)。固有大小由m_intrinsicSize存储。
  • 计算有时会要求固有比率,定义如下:
    •                             intrinsicWidth
        intrinsicRatio = -------------------
                                  intrinsicHeight
  • intrinsicRatio比用于保持与原始对象大小相同的比例(因此,如果宽度/高度与原始对象不匹配,则避免视觉失真)。

LayoutFlexibleBox

LayoutBlockFlow

  • LayoutBlockFlow是实现块容器的类
  • LayoutBlockFlows是唯一允许拥有浮动对象的LayoutObject
  • floats被插入|m_floatingObjects | (请参见FloatingObjects,以获取有关如何对floats进行建模的更多信息)。这是作为布局块(layoutBlockChildren)或行布局(LineBreaker类)的一部分发生的。这是因为floats可以是内联或块上下文的一部分。
  • floats的一个有趣特征是它们可以侵入下一个块。这意味着| m_floatingObjects |可能包含指向先前同级LayoutBlockFlow的float的指针。
  • LayoutBlockFlow是唯一的LayoutObject,可以拥有line box tree和perform inline layout。可以参阅LayoutBlockFlowLine.cpp。
  • LayoutBlockFlow强制执行以下不变式:所有流入子项(即,不包括浮动和流出位置)都是全部块或全部内联框。

LayoutText

  • LayoutText是表示文本节点的任何内容的根类(请参阅core/dom/Text.h)。
  • 这是树中的一个公共节点,因此为了限制内存开销,此类直接从LayoutObject继承。 CSS和SVG布局均使用此类,因此从LayoutObject继承是自然的选择。
  • 文本的实际layout由包含的内联对象(LayoutInline)或块对象(LayoutBlockFlow)处理。他们将调用Unicode的Bidirectional算法将文本分成实际的行。布局的结果是box树,它表示屏幕上的线。它存储在m_firstTextBox和m_lastTextBox中。要了解行是如何被bidi算法截断的,请阅读例如LayoutBlockFlow::layoutInlineChildren。
  • m_firstTextBox和m_lastTextBox不属于LayoutText,而是指向封闭的内联/块的指针(请参见LayoutInline和LayoutBlockFlow的m_lineBoxes)。
  • 此类为其基础文本实现首选的逻辑宽度计算。宽度存储在m_minWidth和m_maxWidth中。它们是根据m_preferredLogicalWidthsDirty延迟计算的。
  • 先前的说明也适用于绘制部分。参见例如BlockFlowPainter :: paintContents特别使用LineBoxListPainter。
  • bidi算法参考https://www.cnblogs.com/dojo-lzz/p/4289423.html

 

关于排版的基础知识,可以参考:

一篇文章了解HTML文档流(normal flow)

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值