8000 [css-exclusions] fix issue 16474 (improve exclusion order example) · xfq/csswg-drafts@7b481e5 · GitHub
Skip to content

Commit 7b481e5

Browse files
astearnsastearns
committed
[css-exclusions] fix issue 16474 (improve exclusion order example)
1 parent 06991ed commit 7b481e5

5 files changed

Lines changed: 99 additions & 43 deletions

File tree

‎css-exclusions/Overview.html‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -867,47 +867,52 @@ <h3 id=exclusions-order><span class=secno>3.4. </span>Exclusions order</h3>
867867
class=property>z-index</code>’ property and thus follow the painting
868868
order.
869869

870-
<div class=issue-marker data-bug_id=16474 data-bug_status=NEW> <a
871-
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16474">Issue-16474</a>
872-
873-
<div class=issue-details>
874-
<p class=short-desc>Improve Example 3 about exclusion order
875-
</div>
876-
</div>
877-
878870
<div class=example>
879871
<p>Ordering of exclusions.
880872

881873
<pre><code class=html>
882874
&lt;style type="text/css"&gt;
883875
.exclusion {
884-
wrap-flow: both;
885-
position: absolute;
886-
width: 50%;
887-
height: auto;
888-
}
876+
wrap-flow: both;
877+
position: absolute;
878+
width: 200px;
879+
}
880+
.topleft {
881+
top: 10px;
882+
left: 10px;
883+
background-color: lightblue;
884+
}
885+
.middle {
886+
top: 90px;
887+
left: 90px;
888+
background-color: lightgreen;
889+
}
890+
.bottomright {
891+
top: 170px;
892+
left: 170px;
893+
background-color: pink;
894+
}
889895
&lt;/style&gt;
890896

891-
&lt;div class=”exclusion” style=”top: 0px; left: 0px;”&gt;
892-
Lorem ipsum dolor sit amet...
897+
&lt;div class="exclusion topleft"&gt;
898+
The top left div...
893899
&lt;/div&gt;
894-
&lt;div id="orderedExclusion" class=”exclusion” style=”top: 25%; left: 25%;”&gt;
895-
Lorem ipsum dolor sit amet...
900+
&lt;div class="exclusion middle"&gt;
901+
The middle div...
896902
&lt;/div&gt;
897-
&lt;div class=”exclusion” style=”top: 50%; left: 50%;”&gt;
898-
Lorem ipsum dolor sit amet...
903+
&lt;div class="exclusion bottomright"&gt;
904+
The bottom right div...
899905
&lt;/div&gt;
900906
</code></pre>
901907

902908
<table class=example-table>
903909
<tbody>
904910
<tr>
905-
<td style="width:50%"><code class=html>#orderedExclusion{ z-index:
906-
auto; }</code>
907-
908-
<td style="width:50%"><code class=html>#orderedExclusion{ z-index: 1;
911+
<td style="width:50%"><code class=html>.middle { z-index: auto;
909912
}</code>
910913

914+
<td style="width:50%"><code class=html>.middle { z-index: 1; }</code>
915+
911916
<tr>
912917
<td><img alt="Example rendering of default exclusion ordering."
913918
class=singleImgExample src="images/exclusion_ordering.png">

‎css-exclusions/Overview.src.html‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -609,40 +609,47 @@ <h3 id="exclusions-order">Exclusions order</h3>
609609
'z-index' property and thus follow the painting order.
610610
</p>
611611

612-
<div class="issue-marker" data-bug_id="16474" data-bug_status="NEW">
613-
<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16474">Issue-16474</a>
614-
<div class="issue-details">
615-
<p class="short-desc">Improve Example 3 about exclusion order</p>
616-
</div>
617-
</div>
618-
619612
<div class="example">
620613
<p>Ordering of exclusions.</p>
621614
<pre><code class="html">
622615
&lt;style type="text/css"&gt;
623616
.exclusion {
624-
wrap-flow: both;
625-
position: absolute;
626-
width: 50%;
627-
height: auto;
628-
}
617+
wrap-flow: both;
618+
position: absolute;
619+
width: 200px;
620+
}
621+
.topleft {
622+
top: 10px;
623+
left: 10px;
624+
background-color: lightblue;
625+
}
626+
.middle {
627+
top: 90px;
628+
left: 90px;
629+
background-color: lightgreen;
630+
}
631+
.bottomright {
632+
top: 170px;
633+
left: 170px;
634+
background-color: pink;
635+
}
629636
&lt;/style&gt;
630637

631-
&lt;div class=”exclusion” style=”top: 0px; left: 0px;”&gt;
632-
Lorem ipsum dolor sit amet...
638+
&lt;div class="exclusion topleft"&gt;
639+
The top left div...
633640
&lt;/div&gt;
634-
&lt;div id="orderedExclusion" class=”exclusion” style=”top: 25%; left: 25%;”&gt;
635-
Lorem ipsum dolor sit amet...
641+
&lt;div class="exclusion middle"&gt;
642+
The middle div...
636643
&lt;/div&gt;
637-
&lt;div class=”exclusion” style=”top: 50%; left: 50%;”&gt;
638-
Lorem ipsum dolor sit amet...
644+
&lt;div class="exclusion 7B3C bottomright"&gt;
645+
The bottom right div...
639646
&lt;/div&gt;
640647
</code></pre>
641648

642649
<table class="example-table">
643650
<tr>
644-
<td style="width:50%"><code class="html">#orderedExclusion{ z-index: auto; }</code></td>
645-
<td style="width:50%"><code class="html">#orderedExclusion{ z-index: 1; }</code></td>
651+
<td style="width:50%"><code class="html">.middle { z-index: auto; }</code></td>
652+
<td style="width:50%"><code class="html">.middle { z-index: 1; }</code></td>
646653
</tr>
647654
<tr>
648655
<td><img class="singleImgExample" src="images/exclusion_ordering.png" alt="Example rendering of default exclusion ordering." /></td>

‎css-exclusions/examples/ordered-exclusion.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title></title>
6+
<style>
7+
.exclusion {
8+
-ms-wrap-flow: both;
9+
position: absolute;
10+
width: 200px;
11+
height: auto;
12+
}
13+
.topleft {
14+
top: 10px;
15+
left: 10px;
16+
background-color: lightblue;
17+
}
18+
.middle {
19+
top: 90px;
20+
left: 90px;
21+
background-color: lightgreen;
22+
}
23+
.bottomright {
24+
top: 170px;
25+
left: 170px;
26+
background-color: pink;
27+
}
28+
.middle {
29+
--z-index: 1;
30+
}
31+
</style>
32+
</head>
33+
<body lang="en">
34+
<div class="exclusion topleft">
35+
The top left div is first in painting order because it's the first in document order, so it will be affected by both of the following exclusions in both cases. To repeat, the top left div is first in painting order because it's the first in document order, so it will be affected by both of the following exclusions in both cases.
36+
</div>
37+
<div class="exclusion middle">
38+
The middle div would normally be in the middle in painting order, so it would only be affected by the last exclusion. But if we change it's z-index to paint last, then its exclusion applies first.
39+
</div>
40+
<div class="exclusion bottomright">
41+
The bottom right div would normally not be affected by either of the previous divs, but when the middle div is changed to paint after the bottom right div, then the bottom right div becomes affected by the middle exclusion.
42+
</div>
43+
</body>
44+
</html>

‎css-exclusions/images/exclusion_ordering.png‎

100755100644
149 KB
Loading

‎css-exclusions/images/exclusion_ordering_z_order.png‎

100755100644
146 KB
Loading

0 commit comments

Comments
 (0)