1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.8"/>
<title>Dillo: Handling stacking contexts</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://www.dillo.org/dw/html/jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 56px;">
<td style="padding-left: 0.5em;">
<div id="projectname">Dillo
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.8 -->
<div id="navrow1" class="tabs">
<ul class="tablist">
<li><a href="index.html"><span>Main Page</span></a></li>
<li class="current"><a href="pages.html"><span>Related Pages</span></a></li>
<li><a href="namespaces.html"><span>Namespaces</span></a></li>
<li><a href="annotated.html"><span>Classes</span></a></li>
<li><a href="files.html"><span>Files</span></a></li>
</ul>
</div>
</div><!-- top -->
<div class="header">
<div class="headertitle">
<div class="title">Handling stacking contexts </div> </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><h1>Stacking Context and <a class="el" href="classdw_1_1core_1_1StackingContextMgr.html" title="See Handling stacking contexts. ">dw::core::StackingContextMgr</a> </h1>
<p>For the definition of stacking contexts, see CSS 2.1 specification,</p>
<ul>
<li><a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">section 9.9.1: Specifying the stack level: the 'z-index' property</a> and</li>
<li><a href="http://www.w3.org/TR/CSS2/zindex.html">appendix E</a>.</li>
</ul>
<p>A widget establishes a stacking context when it is positioned and its style value of <em>z-index</em> is different from <em>auto</em> (see <a class="el" href="classdw_1_1core_1_1StackingContextMgr.html#aa000c80d14e002fe5a45bd8e994d6670">dw::core::StackingContextMgr::isEstablishingStackingContext</a>). In this case, it is assigned an instance of <a class="el" href="classdw_1_1core_1_1StackingContextMgr.html" title="See Handling stacking contexts. ">dw::core::StackingContextMgr</a>, which has also access to the widgets establishing the child contexts.</p>
<h1>Stacking Order </h1>
<p>The stacking order influences</p>
<ol type="1">
<li>the order in which child widgets are drawn (<a class="el" href="classdw_1_1core_1_1Widget.html#a2e7d05212aabad32824fd577fb7e3dd7">dw::core::Widget::draw</a>), and</li>
<li>the order in which mouse events are dispatched to child widgets (<a class="el" href="classdw_1_1core_1_1Widget.html#aa4eac09454c63d9dc7a8d6a322e7998a">dw::core::Widget::getWidgetAtPoint</a>).</li>
</ol>
<p>The first is done from bottom to top, the latter from top to bottom.</p>
<p>I'm here referring to the simplified description in <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">section 9.9.1</a>. The table shows a recommended order for the implementations of <a class="el" href="classdw_1_1core_1_1Widget.html#a2e7d05212aabad32824fd577fb7e3dd7">dw::core::Widget::draw</a> and <a class="el" href="classdw_1_1core_1_1Widget.html#aa4eac09454c63d9dc7a8d6a322e7998a">dw::core::Widget::getWidgetAtPoint</a> (for the latter, read from bottom to top):</p>
<table class="doxtable">
<tr>
<th>CSS specification </th><th>Drawing </th><th>Mouse events </th></tr>
<tr>
<td><em>1. the background and borders of the element forming the stacking context.</em> </td><td><a class="el" href="classdw_1_1core_1_1Widget.html#aef48f52db329c961daed586d291461d5" title="Draw borders and background of a widget part, which allocation is given by (x, y, width...">dw::core::Widget::drawBox</a> </td><td>Nothing necessary. </td></tr>
<tr>
<td><em>2. the child stacking contexts with negative stack levels (most negative first).</em> </td><td><a class="el" href="classdw_1_1core_1_1StackingContextMgr.html#a8a31dad74e5886a3c0a200fc327463a3">dw::core::StackingContextMgr::drawBottom</a> (when defined) </td><td><a class="el" href="classdw_1_1core_1_1StackingContextMgr.html#ae002cba1d7e7d67c8d4a5cc802dfd6cc">dw::core::StackingContextMgr::getBottomWidgetAtPoint</a> (when defined) </td></tr>
<tr>
<td><p class="starttd"><em>3. the in-flow, non-inline-level, non-positioned descendants.</em></p>
<p class="endtd"></p>
</td><td rowspan="4"><p class="starttd">When (i) widget specific content is drawn, then (ii) <a class="el" href="classdw_1_1oof_1_1OOFAwareWidget.html#af00de9105bb5ba2a0f88c3c8daba20a0">dw::oof::OOFAwareWidget::drawOOF</a> is called, this will have this effect:</p>
<ol type="1">
<li>all in-flow elements are drawn,</li>
<li>floats are drawn and</li>
<li>positioned elements with <em>z-index: auto</em> are drawn (latter two done by <a class="el" href="classdw_1_1oof_1_1OOFAwareWidget.html#af00de9105bb5ba2a0f88c3c8daba20a0">dw::oof::OOFAwareWidget::drawOOF</a>, in this order).</li>
</ol>
<p>This order differs from the specified order, but since floats and in-flow elements do not overlap, this difference has no effect.</p>
<p>Drawing in-line elements, floats and positioned elements with <em>z-index: auto</em> and should avoid duplicate calls: Widgets drawn by <a class="el" href="classdw_1_1core_1_1StackingContextMgr.html#a8a31dad74e5886a3c0a200fc327463a3">dw::core::StackingContextMgr::drawBottom</a> and by <a class="el" href="classdw_1_1core_1_1StackingContextMgr.html#a3d4efbb7fe900fe5a0f734d534929e7c">dw::core::StackingContextMgr::drawTop</a> should be excluded here. This can be tested with <a class="el" href="classdw_1_1core_1_1StackingContextMgr.html#a64309f6cf7debcb812b3bf909c098b6e">dw::core::StackingContextMgr::handledByStackingContextMgr</a>.</p>
<p class="endtd"></p>
</td><td rowspan="4"><p class="starttd">Likewise, the implementation should (i) test <a class="el" href="classdw_1_1oof_1_1OOFAwareWidget.html#a26b40025daf7ae24d748b967d74a6f14">dw::oof::OOFAwareWidget::getWidgetOOFAtPoint</a>, and (ii) search through the chilren. Also, duplicate calls should be avoided using <a class="el" href="classdw_1_1core_1_1StackingContextMgr.html#a64309f6cf7debcb812b3bf909c098b6e">dw::core::StackingContextMgr::handledByStackingContextMgr</a>.</p>
<p>There are already the implementations <a class="el" href="classdw_1_1core_1_1Widget.html#aa4eac09454c63d9dc7a8d6a322e7998a">dw::core::Widget::getWidgetAtPoint</a> (ignoring <a class="el" href="classdw_1_1oof_1_1OutOfFlowMgr.html" title="Represents additional data for OOF containers. ">dw::oof::OutOfFlowMgr</a>) and <a class="el" href="classdw_1_1oof_1_1OOFAwareWidget.html#a6483f089749d7b31b3fe238d8087e3ac">dw::oof::OOFAwareWidget::getWidgetAtPoint</a> (including <a class="el" href="classdw_1_1oof_1_1OutOfFlowMgr.html" title="Represents additional data for OOF containers. ">dw::oof::OutOfFlowMgr</a>).</p>
<p class="endtd"></p>
</td></tr>
<tr>
<td><em>4. the non-positioned floats.</em> </td></tr>
<tr>
<td><em>5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.</em> </td></tr>
<tr>
<td>(What about positioned elements with <em>z-index: auto</em>? Seems to be missing in <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">section 9.9.1</a>, but mentioned in <a href="http://www.w3.org/TR/CSS2/zindex.html">appendix E</a>, item 8. </td></tr>
<tr>
<td><em>6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.</em> </td><td rowspan="2"><a class="el" href="classdw_1_1core_1_1StackingContextMgr.html#a3d4efbb7fe900fe5a0f734d534929e7c">dw::core::StackingContextMgr::drawTop</a> (when defined) </td><td rowspan="2"><a class="el" href="classdw_1_1core_1_1StackingContextMgr.html#ac7e560cd0c894f1b587bbebd253a8f3a">dw::core::StackingContextMgr::getTopWidgetAtPoint</a> (when defined) </td></tr>
<tr>
<td><em>7. the child stacking contexts with positive stack levels (least positive first).</em> </td></tr>
</table>
<p>Note: This is not quite in conformance with the specification: this description refers to any widget, not only widgets establishing a stacking context. Does this make a difference? </p>
</div></div><!-- contents -->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Sat May 28 2016 11:47:43 for Dillo by  <a href="http://www.doxygen.org/index.html">
<img class="footer" src="doxygen.png" alt="doxygen"/>
</a> 1.8.8
</small></address>
</body>
</html>
|
