Skip to content

Commit 7718513

Browse files
astearnsastearns
committed
change example 1 to make max/min more clear
1 parent 290f6d6 commit 7718513

10 files changed

Lines changed: 91 additions & 47 deletions

‎css3-exclusions/Exclusions.src.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -357,12 +357,13 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
357357

358358
<div class="example">
359359
<p>
360-
The 'wrap-flow' property values applied to a grid item.
360+
The 'wrap-flow' property values applied to exclusions as grid items.
361361
</p>
362362
<code class="html"><pre>
363363

364364
&lt;div id="grid"&gt;
365-
&lt;div id="exclusion"&gt;Donec metus …&lt;/div&gt;
365+
&lt;div id="top-right" class="exclusion"&gt;&lt;/div&gt;
366+
&lt;div id="bottom-left" class="exclusion"&gt;&lt;/div&gt;
366367
&lt;div id="content"&gt;Lorem ipsum…&lt;/div&gt;
367368
&lt;/div&gt;
368369

@@ -371,21 +372,28 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
371372
width: 30em;
372373
height: 30em;
373374
display: grid;
374-
grid-columns: 50% 25% 25%;
375-
grid-rows: 40% 20% 40%;
376-
}
375+
grid-columns: 25% 25% 25% 25%;
376+
grid-rows: 25% 25% 25% 25%;
377377

378-
#exclusion {
378+
#top-right {
379+
grid-column: 3;
379380
grid-row: 2;
381+
}
382+
383+
#bottom-left {
380384
grid-column: 2;
385+
grid-row: 3;
386+
}
387+
388+
.exclusion {
381389
wrap-flow: &lt;see below&gt;
382390
}
383391

384392
#content {
385393
grid-row: 1;
386-
grid-row-span: 3;
394+
grid-row-span: 4;
387395
grid-column: 1;
388-
grid-column-span: 3;
396+
grid-column-span: 4;
389397
}
390398
&lt;/style&gt;
391399
</pre></code>

‎css3-exclusions/Overview.html‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,14 @@
4040

4141
<h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
4242

43-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 August 2012</h2>
43+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 August 2012</h2>
4444

4545
<dl>
4646
<dt>This version:
4747

4848
<dd><a
4949
href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
50-
<!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120803/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120803/</a></dd>-->
50+
<!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120806/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120806/</a></dd>-->
5151

5252
<dt>Latest version:
5353

@@ -658,13 +658,14 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The ‘<a
658658

659659
<div class=example>
660660
<p> The ‘<a href="#wrap-flow"><code
661-
class=property>wrap-flow</code></a>’ property values applied to a grid
662-
item.</p>
661+
class=property>wrap-flow</code></a>’ property values applied to
662+
exclusions as grid items.</p>
663663
<code class=html></code>
664664
<pre>
665665

666666
&lt;div id="grid"&gt;
667-
&lt;div id="exclusion"&gt;Donec metus …&lt;/div&gt;
667+
&lt;div id="top-right" class="exclusion"&gt;&lt;/div&gt;
668+
&lt;div id="bottom-left" class="exclusion"&gt;&lt;/div&gt;
668669
&lt;div id="content"&gt;Lorem ipsum…&lt;/div&gt;
669670
&lt;/div&gt;
670671

@@ -673,21 +674,28 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The ‘<a
673674
width: 30em;
674675
height: 30em;
675676
display: grid;
676-
grid-columns: 50% 25% 25%;
677-
grid-rows: 40% 20% 40%;
678-
}
677+
grid-columns: 25% 25% 25% 25%;
678+
grid-rows: 25% 25% 25% 25%;
679679

680-
#exclusion {
680+
#top-right {
681+
grid-column: 3;
681682
grid-row: 2;
683+
}
684+
685+
#bottom-left {
682686
grid-column: 2;
687+
grid-row: 3;
688+
}
689+
690+
.exclusion {
683691
wrap-flow: &lt;see below&gt;
684692
}
685693

686694
#content {
687695
grid-row: 1;
688-
grid-row-span: 3;
696+
grid-row-span: 4;
689697
grid-column: 1;
690-
grid-column-span: 3;
698+
grid-column-span: 4;
691699
}
692700
&lt;/style&gt;
693701
</pre>

‎css3-exclusions/examples/example-1.html‎

Lines changed: 56 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
}
2626

2727
.container{
28-
font-size:13px;
2928
text-align:justify;
3029
-webkit-hyphens:auto;
3130

@@ -34,47 +33,70 @@
3433

3534
width: 30em;
3635
height: 30em;
37-
overflow: visible;
36+
overflow: hidden;
3837
}
3938

4039
.container p {
41-
font-size: 18px;
40+
font-size: 1.2em;
4241
color: #808080;
4342
}
4443

4544
.exclusion{
4645
position:absolute;
47-
top: 12em; /* 40% of 30em */
48-
left: 15em; /* 50% of 30em */
49-
height: 6em; /* 20% of 30em */
50-
width: 7.5em; /* 25% of 30 em */
5146
background: rgba(70, 164, 233, 0.5);
5247
/* flow text around this element */
53-
-webkit-wrap-shape-mode: around;
48+
--webkit-wrap-shape-mode: around;
49+
50+
--webkit-render-wrap-shape: auto;
5451
}
5552

5653
#exclusion1{
57-
margin-left: 0px;
58-
margin-top: 0px;
54+
top: 7.5em;
55+
left: 15em;
56+
height: 7.5em;
57+
width: 7.5em;
5958
}
60-
61-
.rect{
59+
60+
#exclusion2{
61+
top: 15em;
62+
left: 7.5em;
63+
height: 7.5em;
64+
width: 7.5em;
65+
}
66+
67+
.rect1{
6268
/* regular box */
63-
/* -webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 6em 0px, 6em 0px, 0px); */
69+
/* -webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px); */
6470

6571
/* emulate wrap-flow: end */
66-
-webkit-wrap-shape: polygon(-15em, 0px 7.5em, 0px 7.5em, 6em -15em, 6em -15em, 0px);
72+
-webkit-wrap-shape: polygon(-15em, 0px 7.5em, 0px 7.5em, 7.5em -15em, 7.5em -15em, 0px);
6773

6874
/* emulate wrap-flow: start */
69-
-webkit-wrap-shape: polygon(0em, 0px 15em, 0px 15em, 6em 0em, 6em 0em, 0px);
75+
--webkit-wrap-shape: polygon(0em, 0px 15em, 0px 15em, 7.5em 0em, 7.5em 0em, 0px);
7076

7177
/* emulate wrap-flow: both */
72-
-webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 6em 0px, 6em 0px, 0px);
78+
--webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px);
7379

7480
/* emulate wrap-flow: clear */
75-
x-webkit-wrap-shape: polygon(-15em, 0px 15em, 0px 15em, 6em -15em, 6em -15em, 0px);
81+
--webkit-wrap-shape: polygon(-15em, 0px 15em, 0px 15em, 7.5em -15em, 7.5em -15em, 0px);
7682
}
83+
84+
.rect2{
85+
/* regular box */
86+
/* -webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px); */
87+
88+
/* emulate wrap-flow: end */
89+
-webkit-wrap-shape: polygon(-15em, 0px 7.5em, 0px 7.5em, 7.5em -15em, 7.5em -15em, 0px);
90+
91+
/* emulate wrap-flow: start */
92+
-webkit-wrap-shape: polygon(0em, 0px 22.5em, 0px 22.5em, 7.5em 0em, 7.5em 0em, 0px);
93+
94+
/* emulate wrap-flow: both */
95+
--webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px);
7796

97+
/* emulate wrap-flow: clear */
98+
--webkit-wrap-shape: polygon(-7.5em, 0px 22.5em, 0px 22.5em, 7.5em -7.5em, 7.5em -7.5em, 0px);
99+
}
78100
#workspace{
79101
position:relative;
80102
width:80%;
@@ -89,6 +111,7 @@
89111
border: 1px solid gray;
90112
top: 0px;
91113
opacity: 0.5;
114+
width: 7.5em;
92115
}
93116

94117
.row {
@@ -97,55 +120,60 @@
97120
border: 1px solid gray;
98121
left: 0px;
99122
opacity: 0.5;
123+
height: 7.5em;
100124
}
101125

102126
#col-1 {
103127
left: 0px;
104-
width: 15em;
105128
}
106129

107130
#col-2 {
108-
left: 15em;
109-
width: 7.5em;
131+
left: 7.5em;
110132
}
111133

112134
#col-3 {
113-
left: 22.5em;
114-
width: 7.5em;
135+
left: 15em;
115136
}
116137

138+
#col-4 {
139+
left: 22.5em;
140+
}
117141

118142
#row-1 {
119143
top: 0px;
120-
height: 12em;
121144
}
122145

123146
#row-2 {
124-
top: 12em;
125-
height: 6em;
147+
top: 7.5em;
126148
}
127149

128150
#row-3 {
129-
top: 18em;
130-
height: 12em;
151+
top: 15em;
152+
}
153+
154+
#row-4 {
155+
top: 22.5em;
131156
}
132157
</style>
133158
</head>
134159
<body>
135160

136161
<div id="workspace">
137-
<div id="exclusion1" class="exclusion rect"></div>
162+
<div id="exclusion1" class="exclusion rect1"></div>
163+
<div id="exclusion2" class="exclusion rect2"></div>
138164
<div style="position:absolute;">
139165
<div class="container">
140166
<p>Lo&shy;rem ip&shy;sum do&shy;lor sit amet, con&shy;sec&shy;te&shy;tur ad&shy;ipisc&shy;ing elit. Vi&shy;va&shy;mus ac nul&shy;la ac nunc ves&shy;ti&shy;b&shy;u&shy;lum sod&shy;ales sed eget pu&shy;rus. In&shy;te&shy;ger tris&shy;tique neque at urna eleif&shy;end por&shy;ta. Mau&shy;ris a sa&shy;pi&shy;en augue, ve&shy;hic&shy;u&shy;la rutrum augue. Sus&shy;pend&shy;isse pre&shy;tium pulvi&shy;nar tris&shy;tique. Nul&shy;la el&shy;e&shy;men&shy;tum blan&shy;dit mas&shy;sa, pel&shy;len&shy;tesque el&shy;e&shy;men&shy;tum orci tem&shy;pus sed. Cur&shy;a&shy;bi&shy;tur eget est neque, nec pel&shy;len&shy;tesque enim. Sed blan&shy;dit do&shy;lor et neque tin&shy;ci&shy;dunt rutrum. Lo&shy;rem ip&shy;sum do&shy;lor sit amet, con&shy;sec&shy;te&shy;tur ad&shy;ipisc&shy;ing elit. Nul&shy;lam tin&shy;ci&shy;dunt do&shy;lor vel neque eleif&shy;end frin&shy;g&shy;il&shy;la. Prae&shy;sent et orci nec jus&shy;to vulpu&shy;tate ul&shy;tri&shy;c&shy;ies ac in leo. In nec ip&shy;sum enim. Donec sus&shy;cip&shy;it plac&shy;er&shy;at ad&shy;ipisc&shy;ing. Nul&shy;la a nunc mi. Sed ve&shy;hic&shy;u&shy;la sus&shy;cip&shy;it mag&shy;na sed con&shy;val&shy;lis. Donec ul&shy;trices con&shy;se&shy;quat tor&shy;tor, at fer&shy;men&shy;tum augue mal&shy;esua&shy;da in. Ut cur&shy;sus, odio non port&shy;ti&shy;tor var&shy;i&shy;us, dui neque luc&shy;tus la&shy;cus, in rhon&shy;cus dui odio eges&shy;tas libe&shy;ro. Mae&shy;ce&shy;nas po&shy;s&shy;u&shy;ere con&shy;sec&shy;te&shy;tur lec&shy;tus, vi&shy;tae con&shy;sec&shy;te&shy;tur lig&shy;u&shy;la con&shy;sec&shy;te&shy;tur eu.</p>
141167

142168
<div id="col-1" class="col"></div>
143169
<div id="col-2" class="col"></div>
144170
<div id="col-3" class="col"></div>
171+
<div id="col-4" class="col"></div>
145172

146173
<div id="row-1" class="row"></div>
147174
<div id="row-2" class="row"></div>
148175
<div id="row-3" class="row"></div>
176+
<div id="row-4" class="row"></div>
149177

150178
</div>
151179
</div>

‎css3-exclusions/images/exclusion_wrap_side_auto.png‎

100755100644
17.8 KB
Loading

‎css3-exclusions/images/exclusion_wrap_side_both.png‎

100755100644
11.1 KB
Loading

‎css3-exclusions/images/exclusion_wrap_side_clear.png‎

100755100644
-6.41 KB
Loading

‎css3-exclusions/images/exclusion_wrap_side_left.png‎

100755100644
7.53 KB
Loading

‎css3-exclusions/images/exclusion_wrap_side_maximum.png‎

100755100644
9.97 KB
Loading

‎css3-exclusions/images/exclusion_wrap_side_minimum.png‎

100755100644
5.03 KB
Loading

‎css3-exclusions/images/exclusion_wrap_side_right.png‎

100755100644
8.48 KB
Loading

0 commit comments

Comments
 (0)