changeset
Update affiliation
Thu, 04 Feb 2016 09:45:32 +1100
- author
- Florian Rivoal <[email protected]>
- date
- Thu, 04 Feb 2016 09:45:32 +1100
- changeset 17019
- bab8c985fbe9
- parent 17018
- d2e836cde5c9
- child 17021
- f064967f99fb
Update affiliation
1.1 --- a/css-2015/Overview.bs Wed Feb 03 19:18:59 2016 +1100 1.2 +++ b/css-2015/Overview.bs Thu Feb 04 09:45:32 2016 +1100 1.3 @@ -10,7 +10,7 @@ 1.4 TR: https://www.w3.org/TR/CSS/ 1.5 Editor: Tab Atkins Jr., Google, http://xanthir.com/ 1.6 Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact 1.7 -Editor: Florian Rivoal, Invited Expert, [email protected], http://florian.rivoal.net 1.8 +Editor: Florian Rivoal, Vivliostyle, [email protected], http://vivliostyle.com 1.9 Abstract: This document collects together into one definition all the specs that 1.10 together form the current state of Cascading Style Sheets (CSS) as of 2015. 1.11 The primary audience is CSS implementers, not CSS authors, as this definition
2.1 --- a/css-device-adapt/Overview.bs Wed Feb 03 19:18:59 2016 +1100 2.2 +++ b/css-device-adapt/Overview.bs Thu Feb 04 09:45:32 2016 +1100 2.3 @@ -9,7 +9,7 @@ 2.4 ED: https://drafts.csswg.org/css-device-adapt/ 2.5 Previous Version: https://www.w3.org/TR/2011/WD-css-device-adapt-20110915/ 2.6 Editor: Rune Lillesveen, Opera Software, [email protected] 2.7 -Editor: Florian Rivoal, Vivliostyle, [email protected], http://www.vivliostyle.com 2.8 +Editor: Florian Rivoal, Vivliostyle, [email protected], http://vivliostyle.com 2.9 Editor: Matt Rakow, Microsoft 2.10 Former Editor: Ryan Betts, Adobe Systems, [email protected] 2.11 Former Editor: Øyvind Stenhaug, Opera Software, [email protected]
3.1 --- a/css-egg/Overview.bs Wed Feb 03 19:18:59 2016 +1100 3.2 +++ b/css-egg/Overview.bs Thu Feb 04 09:45:32 2016 +1100 3.3 @@ -9,7 +9,7 @@ 3.4 Date: 2015-04-01 3.5 TR: https://www.w3.org/TR/css-egg/ 3.6 ED: https://drafts.csswg.org/css-egg/ 3.7 -Editor: Florian Rivoal, Invited Expert, http://florian.rivoal.net, [email protected] 3.8 +Editor: Florian Rivoal, Vivliostyle, [email protected], http://vivliostyle.com 3.9 Abstract: This module extends the vocabulary of CSS with terms frequently used in certain domains, making it easier for authors to write understandable and maintainable style sheets. 3.10 Link Defaults: css-values-3 (type) <time> 3.11 </pre>
4.1 --- a/css-multicol-2/Overview.bs Wed Feb 03 19:18:59 2016 +1100 4.2 +++ b/css-multicol-2/Overview.bs Thu Feb 04 09:45:32 2016 +1100 4.3 @@ -6,7 +6,7 @@ 4.4 Status: ED 4.5 Work Status: Exploring 4.6 ED: https://drafts.csswg.org/css-multicol-2/ 4.7 -Editor: Florian Rivoal, Invited Expert, [email protected], http://florian.rivoal.net/ 4.8 +Editor: Florian Rivoal, On behalf of Bloomberg, [email protected], http://florian.rivoal.net/ 4.9 Abstract: This specification describes multi-column layouts in CSS, a style sheet language for the web. Using functionality described in the specification, content can be flowed into multiple columns with a gap and a rule between them. 4.10 Abstract: 4.11 Abstract: This is a delta specification over CSS Multi-column Level 1.
5.1 --- a/css-overflow-3/Overview.bs Wed Feb 03 19:18:59 2016 +1100 5.2 +++ b/css-overflow-3/Overview.bs Thu Feb 04 09:45:32 2016 +1100 5.3 @@ -9,7 +9,7 @@ 5.4 TR: https://www.w3.org/TR/css-overflow-3/ 5.5 Previous version: https://www.w3.org/TR/2013/WD-css-overflow-3-20130418/ 5.6 Editor: L. David Baron, Mozilla, http://dbaron.org/ 5.7 -Editor: Florian Rivoal, Invited Expert, [email protected], http://florian.rivoal.net 5.8 +Editor: Florian Rivoal, On behalf of Bloomberg, [email protected], http://florian.rivoal.net/ 5.9 Abstract: This module contains the features of CSS relating to scrollable overflow handling in visual media. 5.10 !Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.bs">from 27 January 2015 to the present</a> 5.11 !Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.src.html">from 28 March 2013 to 27 January 2015</a>
6.1 --- a/css-overflow/Overview.bs Wed Feb 03 19:18:59 2016 +1100 6.2 +++ b/css-overflow/Overview.bs Thu Feb 04 09:45:32 2016 +1100 6.3 @@ -5,15 +5,16 @@ 6.4 ED: https://drafts.csswg.org/css-overflow-4/ 6.5 Shortname: css-overflow 6.6 Group: csswg 6.7 -Level: 3 6.8 +Level: 4 6.9 TR: https://www.w3.org/TR/css-overflow-4/ 6.10 Previous version: https://www.w3.org/TR/css-overflow-3/ 6.11 Editor: L. David Baron, Mozilla, http://dbaron.org/ 6.12 -Editor: Florian Rivoal, Invited Expert, [email protected], http://florian.rivoal.net 6.13 +Editor: Florian Rivoal, On behalf of Bloomberg, [email protected], http://florian.rivoal.net/ 6.14 Abstract: This module contains the features of CSS relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). In interactive media, it describes features that allow the overflow from a fixed size container to be handled by pagination (displaying one page at a time). It also describes features, applying to all visual media, that allow the contents of an element to be spread across multiple fragments, allowing the contents to flow across multiple regions or to have different styles for different fragments. 6.15 !Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.bs">from 27 January 2015 to the present</a> 6.16 !Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.src.html">from 28 March 2013 to 27 January 2015</a> 6.17 !Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css3-overflow/Overview.src.html">from 31 July 2012 to 27 March 2013</a> 6.18 +Ignored Terms: display-inside, display-outside 6.19 </pre> 6.20 <!-- FIXME: Regressions from bikeshed conversion: --> 6.21 <!-- - Value lines in propdef tables no longer link to #values. -->
7.1 --- a/css-overflow/Overview.html Wed Feb 03 19:18:59 2016 +1100 7.2 +++ b/css-overflow/Overview.html Thu Feb 04 09:45:32 2016 +1100 7.3 @@ -1,71 +1,19 @@ 7.4 -<!doctype html> 7.5 -<html lang="en"> 7.6 +<!doctype html><html lang="en"> 7.7 <head> 7.8 - 7.9 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 7.10 - 7.11 - 7.12 <title>CSS Overflow Module Level 4</title> 7.13 - 7.14 - 7.15 + <meta content="width=device-width, initial-scale=1" name="viewport"> 7.16 <meta content="exploring" name="csswg-work-status"> 7.17 - 7.18 - 7.19 <meta content="ED" name="w3c-status"> 7.20 - 7.21 - 7.22 <link href="../default.css" rel="stylesheet" type="text/css"> 7.23 - 7.24 - 7.25 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> 7.26 - 7.27 - 7.28 - <style> 7.29 +<style> 7.30 body { 7.31 - background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white; 7.32 - background-attachment: fixed; 7.33 - color: black; 7.34 - font-family: sans-serif; 7.35 - margin: 0 auto; 7.36 - max-width: 50em; 7.37 - padding: 2em 1em 2em 70px; 7.38 - } 7.39 - :link { color: #00C; background: transparent } 7.40 - :visited { color: #609; background: transparent } 7.41 - a[href]:active { color: #C00; background: transparent } 7.42 - a[href]:hover { background: #ffa } 7.43 - 7.44 - a[href] img { border-style: none } 7.45 - 7.46 - h1, h2, h3, h4, h5, h6 { text-align: left } 7.47 - h1, h2, h3 { color: #005A9C; } 7.48 - h1 { font: 170% sans-serif } 7.49 - h2 { font: 140% sans-serif } 7.50 - h3 { font: 120% sans-serif } 7.51 - h4 { font: bold 100% sans-serif } 7.52 - h5 { font: italic 100% sans-serif } 7.53 - h6 { font: small-caps 100% sans-serif } 7.54 - 7.55 - .hide { display: none } 7.56 - 7.57 - div.head { margin-bottom: 1em } 7.58 - div.head h1 { margin-top: 2em; clear: both } 7.59 - div.head table { margin-left: 2em; margin-top: 2em } 7.60 - 7.61 - p.copyright { font-size: small } 7.62 - p.copyright small { font-size: small } 7.63 - 7.64 - pre { margin-left: 2em } 7.65 - dt { font-weight: bold } 7.66 - 7.67 - ul.toc, ol.toc { 7.68 - list-style: none; 7.69 - } 7.70 + background-image: url("https://www.w3.org/StyleSheets/TR/logo-ED"); 7.71 + }; 7.72 </style> 7.73 - 7.74 - 7.75 <meta content="Bikeshed 1.0.0" name="generator"> 7.76 - <style> 7.77 +<style> 7.78 table.source-demo-pair { 7.79 width: 100%; 7.80 } 7.81 @@ -163,14 +111,11 @@ 7.82 float: left; 7.83 } 7.84 </style> 7.85 - 7.86 - 7.87 - 7.88 - <style>.highlight .hll { background-color: #ffffcc } 7.89 +<style>.highlight .hll { background-color: #ffffcc } 7.90 .highlight { background: #ffffff; } 7.91 .highlight .c { color: #708090 } /* Comment */ 7.92 .highlight .k { color: #990055 } /* Keyword */ 7.93 -.highlight .l { color: #669900 } /* Literal */ 7.94 +.highlight .l { color: #000000 } /* Literal */ 7.95 .highlight .n { color: #0077aa } /* Name */ 7.96 .highlight .o { color: #999999 } /* Operator */ 7.97 .highlight .p { color: #999999 } /* Punctuation */ 7.98 @@ -184,9 +129,9 @@ 7.99 .highlight .kp { color: #990055 } /* Keyword.Pseudo */ 7.100 .highlight .kr { color: #990055 } /* Keyword.Reserved */ 7.101 .highlight .kt { color: #990055 } /* Keyword.Type */ 7.102 -.highlight .ld { color: #669900 } /* Literal.Date */ 7.103 -.highlight .m { color: #990055 } /* Literal.Number */ 7.104 -.highlight .s { color: #669900 } /* Literal.String */ 7.105 +.highlight .ld { color: #000000 } /* Literal.Date */ 7.106 +.highlight .m { color: #000000 } /* Literal.Number */ 7.107 +.highlight .s { color: #a67f59 } /* Literal.String */ 7.108 .highlight .na { color: #0077aa } /* Name.Attribute */ 7.109 .highlight .nc { color: #0077aa } /* Name.Class */ 7.110 .highlight .no { color: #0077aa } /* Name.Constant */ 7.111 @@ -197,521 +142,308 @@ 7.112 .highlight .nl { color: #0077aa } /* Name.Label */ 7.113 .highlight .nn { color: #0077aa } /* Name.Namespace */ 7.114 .highlight .py { color: #0077aa } /* Name.Property */ 7.115 -.highlight .nt { color: #0077aa } /* Name.Tag */ 7.116 +.highlight .nt { color: #669900 } /* Name.Tag */ 7.117 .highlight .nv { color: #0077aa } /* Name.Variable */ 7.118 .highlight .ow { color: #999999 } /* Operator.Word */ 7.119 -.highlight .mb { color: #990055 } /* Literal.Number.Bin */ 7.120 -.highlight .mf { color: #990055 } /* Literal.Number.Float */ 7.121 -.highlight .mh { color: #990055 } /* Literal.Number.Hex */ 7.122 -.highlight .mi { color: #990055 } /* Literal.Number.Integer */ 7.123 -.highlight .mo { color: #990055 } /* Literal.Number.Oct */ 7.124 -.highlight .sb { color: #669900 } /* Literal.String.Backtick */ 7.125 -.highlight .sc { color: #669900 } /* Literal.String.Char */ 7.126 -.highlight .sd { color: #669900 } /* Literal.String.Doc */ 7.127 -.highlight .s2 { color: #669900 } /* Literal.String.Double */ 7.128 -.highlight .se { color: #669900 } /* Literal.String.Escape */ 7.129 -.highlight .sh { color: #669900 } /* Literal.String.Heredoc */ 7.130 -.highlight .si { color: #669900 } /* Literal.String.Interpol */ 7.131 -.highlight .sx { color: #669900 } /* Literal.String.Other */ 7.132 -.highlight .sr { color: #669900 } /* Literal.String.Regex */ 7.133 -.highlight .s1 { color: #669900 } /* Literal.String.Single */ 7.134 -.highlight .ss { color: #669900 } /* Literal.String.Symbol */ 7.135 +.highlight .mb { color: #000000 } /* Literal.Number.Bin */ 7.136 +.highlight .mf { color: #000000 } /* Literal.Number.Float */ 7.137 +.highlight .mh { color: #000000 } /* Literal.Number.Hex */ 7.138 +.highlight .mi { color: #000000 } /* Literal.Number.Integer */ 7.139 +.highlight .mo { color: #000000 } /* Literal.Number.Oct */ 7.140 +.highlight .sb { color: #a67f59 } /* Literal.String.Backtick */ 7.141 +.highlight .sc { color: #a67f59 } /* Literal.String.Char */ 7.142 +.highlight .sd { color: #a67f59 } /* Literal.String.Doc */ 7.143 +.highlight .s2 { color: #a67f59 } /* Literal.String.Double */ 7.144 +.highlight .se { color: #a67f59 } /* Literal.String.Escape */ 7.145 +.highlight .sh { color: #a67f59 } /* Literal.String.Heredoc */ 7.146 +.highlight .si { color: #a67f59 } /* Literal.String.Interpol */ 7.147 +.highlight .sx { color: #a67f59 } /* Literal.String.Other */ 7.148 +.highlight .sr { color: #a67f59 } /* Literal.String.Regex */ 7.149 +.highlight .s1 { color: #a67f59 } /* Literal.String.Single */ 7.150 +.highlight .ss { color: #a67f59 } /* Literal.String.Symbol */ 7.151 .highlight .vc { color: #0077aa } /* Name.Variable.Class */ 7.152 .highlight .vg { color: #0077aa } /* Name.Variable.Global */ 7.153 .highlight .vi { color: #0077aa } /* Name.Variable.Instance */ 7.154 -.highlight .il { color: #990055 } /* Literal.Number.Integer.Long */ 7.155 +.highlight .il { color: #000000 } /* Literal.Number.Integer.Long */ 7.156 .highlight { background: hsl(24, 20%, 95%); } 7.157 - pre.highlight { padding: 1em; margin: .5em 0; overflow: auto; } 7.158 - :not(pre).highlight { padding: .1em; border-radius: .3em; } 7.159 + code.highlight { padding: .1em; border-radius: .3em; } 7.160 + pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } 7.161 </style> 7.162 </head> 7.163 - 7.164 - 7.165 <body class="h-entry"> 7.166 - 7.167 <div class="head"> 7.168 - 7.169 - <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> 7.170 - <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> 7.171 -</a> 7.172 -</p> 7.173 - 7.174 + <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> </a> </p> 7.175 <h1 class="p-name no-ref" id="title">CSS Overflow Module Level 4</h1> 7.176 - 7.177 - <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, 7.178 - <time class="dt-updated" datetime="2015-07-01">1 July 2015</time></span></h2> 7.179 - 7.180 + <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2016-02-04">4 February 2016</time></span></h2> 7.181 <div data-fill-with="spec-metadata"> 7.182 <dl> 7.183 <dt>This version: 7.184 - <dd><a class="u-url" href="https://draftd.csswg.org/css-overflow-4/">https://drafts.csswg.org/css-overflow-4/</a> 7.185 + <dd><a class="u-url" href="https://drafts.csswg.org/css-overflow-4/">https://drafts.csswg.org/css-overflow-4/</a> 7.186 <dt>Latest version: 7.187 - <dd><a href="https://www.w3.org/TR/css-overflow-4/">http://www.w3.org/TR/css-overflow-4/</a> 7.188 + <dd><a href="https://www.w3.org/TR/css-overflow-4/">https://www.w3.org/TR/css-overflow-4/</a> 7.189 <dt>Previous Versions: 7.190 <dd><a href="https://www.w3.org/TR/css-overflow-3/" rel="previous">https://www.w3.org/TR/css-overflow-3/</a> 7.191 <dt>Feedback: 7.192 - <dd><span><a href="mailto:[email protected]?subject=%5Bcss-overflow%5D%20YOUR%20TOPIC%20HERE">[email protected]</a> with subject line “<kbd>[css-overflow] <var>… message topic …</var></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span> 7.193 + <dd><span><a href="mailto:[email protected]?subject=%5Bcss-overflow%5D%20YOUR%20TOPIC%20HERE">[email protected]</a> with subject line “<kbd>[css-overflow] <i data-lt="">… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span> 7.194 <dt>Issue Tracking: 7.195 - <dd><a href="https://github.com/w3c/csswg-drafts/issues/">GitHub</a> 7.196 <dd><a href="#issues-index">Inline In Spec</a> 7.197 <dt class="editor">Editors: 7.198 <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://dbaron.org/">L. David Baron</a> (<span class="p-org org">Mozilla</span>) 7.199 - <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://florian.rivoal.net">Florian Rivoal</a> (<span class="p-org org">Invited Expert</span>) <a class="u-email email" href="mailto:[email protected]">[email protected]</a> 7.200 + <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://florian.rivoal.net/">Florian Rivoal</a> (<span class="p-org org">On behalf of Bloomberg</span>) <a class="u-email email" href="mailto:[email protected]">[email protected]</a> 7.201 <dt>Change Log: 7.202 <dd><span><a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.bs">from 27 January 2015 to the present</a></span> 7.203 <dd><span><a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.src.html">from 28 March 2013 to 27 January 2015</a></span> 7.204 <dd><span><a href="https://hg.csswg.org/drafts/log/tip/css3-overflow/Overview.src.html">from 31 July 2012 to 27 March 2013</a></span> 7.205 </dl> 7.206 </div> 7.207 - 7.208 <div data-fill-with="warning"></div> 7.209 - 7.210 - <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2015 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. 7.211 -</p> 7.212 - 7.213 + <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2016 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p> 7.214 <hr title="Separator for header"> 7.215 -</div> 7.216 - 7.217 - 7.218 + </div> 7.219 <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> 7.220 - 7.221 <div class="p-summary" data-fill-with="abstract"> 7.222 <p>This module contains the features of CSS relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). In interactive media, it describes features that allow the overflow from a fixed size container to be handled by pagination (displaying one page at a time). It also describes features, applying to all visual media, that allow the contents of an element to be spread across multiple fragments, allowing the contents to flow across multiple regions or to have different styles for different fragments.</p> 7.223 - 7.224 -<a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents 7.225 + <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents 7.226 (such as HTML and XML) 7.227 -on screen, on paper, in speech, etc.</div> 7.228 - 7.229 - 7.230 +on screen, on paper, in speech, etc. 7.231 + </div> 7.232 <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2> 7.233 - 7.234 <div data-fill-with="status"> 7.235 - <p> 7.236 - This is a public copy of the editors’ draft. 7.237 + <p> This is a public copy of the editors’ draft. 7.238 It is provided for discussion only and may change at any moment. 7.239 Its publication here does not imply endorsement of its contents by W3C. 7.240 - Don’t cite this document other than as work in progress. 7.241 - 7.242 -</p> 7.243 - <p> 7.244 - The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list 7.245 - <a href="mailto:[email protected]?Subject=%5Bcss-overflow%5D%20PUT%20SUBJECT%20HERE">[email protected]</a> 7.246 - (see <a href="http://www.w3.org/Mail/Request">instructions</a>) 7.247 + Don’t cite this document other than as work in progress. </p> 7.248 + <p> The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:[email protected]?Subject=%5Bcss-overflow%5D%20PUT%20SUBJECT%20HERE">[email protected]</a> (see <a href="http://www.w3.org/Mail/Request">instructions</a>) 7.249 is preferred for discussion of this specification. 7.250 When sending e-mail, 7.251 please put the text “css-overflow” in the subject, 7.252 preferably like this: 7.253 - “[css-overflow] <em>…summary of comment…</em>” 7.254 - 7.255 -</p> 7.256 - <p> 7.257 - This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> 7.258 - (part of the <a href="http://www.w3.org/Style/">Style Activity</a>). 7.259 - 7.260 -</p> 7.261 - <p> 7.262 - This document was produced by a group operating under 7.263 + “[css-overflow] <em>…summary of comment…</em>” </p> 7.264 + <p> This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of the <a href="http://www.w3.org/Style/">Style Activity</a>). </p> 7.265 + <p> This document was produced by a group operating under 7.266 the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. 7.267 - W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> 7.268 - made in connection with the deliverables of the group; 7.269 + W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; 7.270 that page also includes instructions for disclosing a patent. 7.271 - An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> 7.272 - must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. 7.273 - 7.274 -</p> 7.275 - <p> 7.276 - This document is governed by the <a href="http://www.w3.org/2014/Process-20140801/" id="w3c_process_revision">1 August 2014 W3C Process Document</a>. 7.277 - 7.278 -</p> 7.279 - <p> 7.280 - 7.281 -</p></div> 7.282 - 7.283 + An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p> 7.284 + <p> This document is governed by the <a href="http://www.w3.org/2015/Process-20150901/" id="w3c_process_revision">1 September 2015 W3C Process Document</a>. </p> 7.285 + <p></p> 7.286 + </div> 7.287 <div data-fill-with="at-risk"></div> 7.288 - 7.289 - 7.290 - <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="content">Table of Contents</span></h2> 7.291 - 7.292 - <div data-fill-with="table-of-contents" role="navigation"> 7.293 - <ul class="toc" role="directory"> 7.294 - <li><a href="#intro"><span class="secno">1</span> <span class="content"> 7.295 -Introduction</span></a> 7.296 - <li><a href="#overflow-concepts"><span class="secno">2</span> <span class="content">Types of overflow</span></a> 7.297 - <ul class="toc"> 7.298 + <nav data-fill-with="table-of-contents" id="toc"> 7.299 + <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> 7.300 + <ol class="toc" role="directory"> 7.301 + <li><a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a> 7.302 + <li> 7.303 + <a href="#overflow-concepts"><span class="secno">2</span> <span class="content">Types of overflow</span></a> 7.304 + <ol class="toc"> 7.305 <li><a href="#ink-overflow"><span class="secno">2.1</span> <span class="content">Ink overflow</span></a> 7.306 <li><a href="#scrollable-overflow"><span class="secno">2.2</span> <span class="content">Scrollable overflow</span></a> 7.307 <li><a href="#border-box-overflow"><span class="secno">2.3</span> <span class="content">Border box overflow</span></a> 7.308 - </ul> 7.309 + </ol> 7.310 <li><a href="#overflow-properties"><span class="secno">3</span> <span class="content">Overflow properties</span></a> 7.311 <li><a href="#fragmentation"><span class="secno">4</span> <span class="content">Fragmentation of overflow</span></a> 7.312 <li><a href="#paginated-overflow"><span class="secno">5</span> <span class="content">Paginated overflow</span></a> 7.313 - <li><a href="#fragment-overflow"><span class="secno">6</span> <span class="content">Fragment overflow</span></a> 7.314 - <ul class="toc"> 7.315 - <li><a href="#fragment-styling"><span class="secno">6.1</span> <span class="content">Fragment styling</span></a> 7.316 - <ul class="toc"> 7.317 + <li> 7.318 + <a href="#fragment-overflow"><span class="secno">6</span> <span class="content">Fragment overflow</span></a> 7.319 + <ol class="toc"> 7.320 + <li> 7.321 + <a href="#fragment-styling"><span class="secno">6.1</span> <span class="content">Fragment styling</span></a> 7.322 + <ol class="toc"> 7.323 <li><a href="#fragment-pseudo-element"><span class="secno">6.1.1</span> <span class="content">The ::nth-fragment() pseudo-element</span></a> 7.324 <li><a href="#style-of-fragments"><span class="secno">6.1.2</span> <span class="content">Styling of fragments</span></a> 7.325 <li><a href="#style-in-fragments"><span class="secno">6.1.3</span> <span class="content">Styling inside fragments</span></a> 7.326 - </ul> 7.327 + </ol> 7.328 <li><a href="#max-lines"><span class="secno">6.2</span> <span class="content">The <span class="property">max-lines</span> property</span></a> 7.329 - </ul> 7.330 + </ol> 7.331 <li><a href="#static-media"><span class="secno">7</span> <span class="content">Overflow in static media</span></a> 7.332 - <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> 7.333 -Acknowledgments</span></a> 7.334 - <li><a href="#conformance"><span class="secno"></span> <span class="content"> 7.335 -Conformance</span></a> 7.336 - <ul class="toc"> 7.337 - <li><a href="#conventions"><span class="secno"></span> <span class="content"> 7.338 -Document conventions</span></a> 7.339 - <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> 7.340 -Conformance classes</span></a> 7.341 - <li><a href="#partial"><span class="secno"></span> <span class="content"> 7.342 -Partial implementations</span></a> 7.343 - <li><a href="#experimental"><span class="secno"></span> <span class="content"> 7.344 -Experimental implementations</span></a> 7.345 - <li><a href="#testing"><span class="secno"></span> <span class="content"> 7.346 -Non-experimental implementations</span></a> 7.347 - </ul> 7.348 - <li><a href="#index"><span class="secno"></span> <span class="content">Index</span></a> 7.349 - <ul class="toc"> 7.350 + <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments</span></a> 7.351 + <li> 7.352 + <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> 7.353 + <ol class="toc"> 7.354 + <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> 7.355 + <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> 7.356 + <li> 7.357 + <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a> 7.358 + <ol class="toc"> 7.359 + <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a> 7.360 + <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> 7.361 + <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a> 7.362 + </ol> 7.363 + </ol> 7.364 + <li> 7.365 + <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> 7.366 + <ol class="toc"> 7.367 <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> 7.368 <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> 7.369 - </ul> 7.370 - <li><a href="#references"><span class="secno"></span> <span class="content">References</span></a> 7.371 - <ul class="toc"> 7.372 + </ol> 7.373 + <li> 7.374 + <a href="#references"><span class="secno"></span> <span class="content">References</span></a> 7.375 + <ol class="toc"> 7.376 <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> 7.377 <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a> 7.378 - </ul> 7.379 + </ol> 7.380 <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> 7.381 <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> 7.382 - </ul></div> 7.383 - 7.384 + </ol> 7.385 + </nav> 7.386 <main> 7.387 - 7.388 - 7.389 - 7.390 - 7.391 - 7.392 - 7.393 - 7.394 - 7.395 - 7.396 - 7.397 - 7.398 - <p> 7.399 - </p> 7.400 - 7.401 - 7.402 - <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> 7.403 -Introduction</span><a class="self-link" href="#intro"></a></h2> 7.404 - 7.405 - 7.406 - <p> 7.407 - In CSS Level 1 <a data-link-type="biblio" href="#biblio-css1">[CSS1]</a>, placing more content than would fit 7.408 + <p></p> 7.409 + <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2> 7.410 + <p> In CSS Level 1 <a data-link-type="biblio" href="#biblio-css1">[CSS1]</a>, placing more content than would fit 7.411 inside an element with a specified size 7.412 was generally an authoring error. 7.413 Doing so caused the content to extend 7.414 outside the bounds of the element, 7.415 which would likely cause 7.416 - that content to overlap with other elements. 7.417 - </p> 7.418 - 7.419 - 7.420 - <p> 7.421 - CSS Level 2 <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> introduced the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property, 7.422 + that content to overlap with other elements. </p> 7.423 + <p> CSS Level 2 <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> introduced the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property, 7.424 which allows authors to have overflow be handled by scrolling, 7.425 which means it is no longer an authoring error. 7.426 It also allows authors to specify 7.427 that overflow is handled by clipping, 7.428 which makes sense when the author’s intent 7.429 - is that the content not be shown. 7.430 - </p> 7.431 - 7.432 - 7.433 - <p> 7.434 - However, scrolling is not the only way 7.435 + is that the content not be shown. </p> 7.436 + <p> However, scrolling is not the only way 7.437 to present large amounts of content, 7.438 and may even not be the optimal way. 7.439 After all, the codex replaced the scroll 7.440 as the common format for large written works 7.441 - because of its advantages. 7.442 - </p> 7.443 - 7.444 - 7.445 - <p> 7.446 - This specification introduces 7.447 + because of its advantages. </p> 7.448 + <p> This specification introduces 7.449 a mechanism for Web pages to specify 7.450 that an element of a page should handle overflow 7.451 - through pagination rather than through scrolling. 7.452 - </p> 7.453 - 7.454 - 7.455 - <p> 7.456 - This specification also extends the concept of overflow 7.457 + through pagination rather than through scrolling. </p> 7.458 + <p> This specification also extends the concept of overflow 7.459 in another direction. 7.460 Instead of requiring that authors specify a single area 7.461 into which the content of an element must flow, 7.462 this specification allows authors to specify multiple fragments, 7.463 each with their own dimensions and styles, 7.464 so that the content of the element can flow from one to the next, 7.465 - using as many as needed to place the content without overflowing. 7.466 - </p> 7.467 - 7.468 - 7.469 - <p> 7.470 - In both of these cases, implementations must 7.471 + using as many as needed to place the content without overflowing. </p> 7.472 + <p> In both of these cases, implementations must 7.473 break the content in the block-progression dimension. 7.474 Implementations must do this is described 7.475 - in the CSS Fragmentation Module <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a>. 7.476 - </p> 7.477 - 7.478 - 7.479 + in the CSS Fragmentation Module <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a>. </p> 7.480 <h2 class="heading settled" data-level="2" id="overflow-concepts"><span class="secno">2. </span><span class="content">Types of overflow</span><a class="self-link" href="#overflow-concepts"></a></h2> 7.481 - 7.482 - 7.483 - <p> 7.484 - CSS uses the term <dfn data-dfn-type="dfn" data-noexport="" id="overflow">overflow<a class="self-link" href="#overflow"></a></dfn> to describe 7.485 + <p> CSS uses the term <dfn data-dfn-type="dfn" data-noexport="" id="overflow">overflow<a class="self-link" href="#overflow"></a></dfn> to describe 7.486 the contents of a box 7.487 that extend outside that one of that box’s edges 7.488 - (i.e., its <i>content edge</i>, <i>padding edge</i>, 7.489 - <i>border edge</i>, or <i>margin edge</i>). 7.490 + (i.e., its <i>content edge</i>, <i>padding edge</i>, <i>border edge</i>, or <i>margin edge</i>). 7.491 The overflow might be described as the elements or features 7.492 that cause this overflow, 7.493 the non-rectangular region occupied by these features, 7.494 or, more commonly, 7.495 as the minimal rectangle that bounds that region. 7.496 A box’s overflow is computed based on the boxes and styles 7.497 - of the box and of all its descendants whose containing block chain 7.498 - <span class="issue" id="issue-18c1c008"><a class="self-link" href="#issue-18c1c008"></a>undefined term?</span> 7.499 - includes the box. 7.500 - </p> 7.501 - 7.502 - 7.503 - <p> 7.504 - In most cases, any of these types of overflow 7.505 + of the box and of all its descendants whose containing block chain <span class="issue" id="issue-18c1c008"><a class="self-link" href="#issue-18c1c008"></a>undefined term?</span> includes the box. </p> 7.506 + <p> In most cases, any of these types of overflow 7.507 can be computed for any box 7.508 from the bounds and properties of that box, 7.509 and from the overflow (of that type) 7.510 of each of its children. 7.511 However, this is not always the case; for example, 7.512 - when <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> is used on 7.513 - some of the children, their descendants with 7.514 - <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> must also be examined. 7.515 - </p> 7.516 - 7.517 - 7.518 + when <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> is used on 7.519 + some of the children, their descendants with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> must also be examined. </p> 7.520 <h3 class="heading settled" data-level="2.1" id="ink-overflow"><span class="secno">2.1. </span><span class="content">Ink overflow</span><a class="self-link" href="#ink-overflow"></a></h3> 7.521 - 7.522 - 7.523 - <p> 7.524 - The <dfn data-dfn-type="dfn" data-noexport="" id="ink-overflow0">ink overflow<a class="self-link" href="#ink-overflow0"></a></dfn> of a box 7.525 + <p> The <dfn data-dfn-type="dfn" data-noexport="" id="ink-overflow0">ink overflow<a class="self-link" href="#ink-overflow0"></a></dfn> of a box 7.526 is the part of that box and its contents that 7.527 creates a visual effect outside of 7.528 - the box’s border box. 7.529 - </p> 7.530 - 7.531 - 7.532 - <p> 7.533 - Since some effects in CSS (for example, the blurs in 7.534 - <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-shadow">text-shadow</a> <a data-link-type="biblio" href="#biblio-css3text">[CSS3TEXT]</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow">box-shadow</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>) 7.535 + the box’s border box. </p> 7.536 + <p> Since some effects in CSS (for example, the blurs in <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow">text-shadow</a> <a data-link-type="biblio" href="#biblio-css3text">[CSS3TEXT]</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow">box-shadow</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>) 7.537 do not define what visual extent they cover, the extent 7.538 - of the <a data-link-type="dfn" href="#ink-overflow0">ink overflow</a> is undefined. 7.539 - </p> 7.540 - 7.541 - 7.542 - <p class="issue" id="issue-1baddb1e"><a class="self-link" href="#issue-1baddb1e"></a> 7.543 - Should we try to define it at all and just leave pieces undefined? 7.544 - </p> 7.545 - 7.546 - 7.547 - <p> 7.548 - The <dfn data-dfn-type="dfn" data-noexport="" id="ink-overflow-region">ink overflow region<a class="self-link" href="#ink-overflow-region"></a></dfn> is the non-rectangular region 7.549 - occupied by the <a data-link-type="dfn" href="#ink-overflow0">ink overflow</a>, and the 7.550 - <dfn data-dfn-type="dfn" data-noexport="" id="ink-overflow-rectangle">ink overflow rectangle<a class="self-link" href="#ink-overflow-rectangle"></a></dfn> is 7.551 + of the <a data-link-type="dfn" href="#ink-overflow0">ink overflow</a> is undefined. </p> 7.552 + <p class="issue" id="issue-1baddb1e"><a class="self-link" href="#issue-1baddb1e"></a> Should we try to define it at all and just leave pieces undefined? </p> 7.553 + <p> The <dfn data-dfn-type="dfn" data-noexport="" id="ink-overflow-region">ink overflow region<a class="self-link" href="#ink-overflow-region"></a></dfn> is the non-rectangular region 7.554 + occupied by the <a data-link-type="dfn" href="#ink-overflow0">ink overflow</a>, and the <dfn data-dfn-type="dfn" data-noexport="" id="ink-overflow-rectangle">ink overflow rectangle<a class="self-link" href="#ink-overflow-rectangle"></a></dfn> is 7.555 the minimal rectangle whose axis is aligned to the box’s axes 7.556 and contains the <a data-link-type="dfn" href="#ink-overflow-region">ink overflow region</a>. 7.557 Note that the <a data-link-type="dfn" href="#ink-overflow-rectangle">ink overflow rectangle</a> is a rectangle 7.558 in the box’s coordinate system, but might be non-rectangular 7.559 - in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. 7.560 - </p> 7.561 - 7.562 - 7.563 + in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. </p> 7.564 <h3 class="heading settled" data-level="2.2" id="scrollable-overflow"><span class="secno">2.2. </span><span class="content">Scrollable overflow</span><a class="self-link" href="#scrollable-overflow"></a></h3> 7.565 - 7.566 - 7.567 - <p> 7.568 - The <dfn data-dfn-type="dfn" data-noexport="" id="scrollable-overflow0">scrollable overflow<a class="self-link" href="#scrollable-overflow0"></a></dfn> of a box is the 7.569 + <p> The <dfn data-dfn-type="dfn" data-noexport="" id="scrollable-overflow0">scrollable overflow<a class="self-link" href="#scrollable-overflow0"></a></dfn> of a box is the 7.570 set of things extending outside of that box’s padding edge 7.571 - for which a scrolling mechanism needs to be provided. 7.572 - </p> 7.573 - 7.574 - 7.575 - <p class="issue" id="issue-6b232bb5"><a class="self-link" href="#issue-6b232bb5"></a> 7.576 - The following definition should be rewritten to use 7.577 - the concept of <a href="http://dev.w3.org/csswg/css-transforms/#3d-rendering-context">3D rendering context</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> 7.578 - and related terms, 7.579 + for which a scrolling mechanism needs to be provided. </p> 7.580 + <p class="issue" id="issue-766655c2"><a class="self-link" href="#issue-766655c2"></a> The following definition should be rewritten to use 7.581 + the concept of <a href="https://drafts.csswg.org/css-transforms/#3d-rendering-context">3D rendering context</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> and related terms, 7.582 particularly once those concepts stabilize following changes 7.583 - proposed in the CSS WG meeting on the morning of 2014-01-28. 7.584 - </p> 7.585 - 7.586 - 7.587 - <p> 7.588 - Given the following definitions 7.589 - <span class="issue" id="issue-101a26b2"><a class="self-link" href="#issue-101a26b2"></a>which belong in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></span>: 7.590 - </p> 7.591 - 7.592 - 7.593 + proposed in the CSS WG meeting on the morning of 2014-01-28. </p> 7.594 + <p> Given the following definitions <span class="issue" id="issue-101a26b2"><a class="self-link" href="#issue-101a26b2"></a>which belong in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></span>: </p> 7.595 <dl> 7.596 - 7.597 - <dt><dfn data-dfn-type="dfn" data-noexport="" id="3d_preserving-child">3d-preserving child<a class="self-link" href="#3d_preserving-child"></a></dfn> 7.598 - 7.599 - 7.600 - <dd> 7.601 - A child box B of a containing block C is a 3d-preserving 7.602 - child if it has <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> 7.603 - and the user-agent is not required to flatten it 7.604 - based on the <a href="http://www.w3.org/TR/css3-transforms/#transform-style-property">requirements</a> in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. 7.605 - 7.606 - 7.607 - <dt><dfn data-dfn-type="dfn" data-noexport="" id="non_3d_preserving-child">non-3d-preserving child<a class="self-link" href="#non_3d_preserving-child"></a></dfn> 7.608 - 7.609 - 7.610 - <dd> 7.611 - A child C of a box P is a non-3d-preserving-child if 7.612 - it is not a <a data-link-type="dfn" href="#3d_preserving-child">3d-preserving child</a>. 7.613 - 7.614 - 7.615 - 7.616 - <dt><dfn data-dfn-type="dfn" data-noexport="" id="3d_preserving-descendant">3d-preserving descendant<a class="self-link" href="#3d_preserving-descendant"></a></dfn> 7.617 - 7.618 - 7.619 - <dd> 7.620 - Box D is a 3d-preserving descendant of box A if A is 7.621 + <dt><dfn data-dfn-type="dfn" data-noexport="" id="3d-preserving-child">3d-preserving child<a class="self-link" href="#3d-preserving-child"></a></dfn> 7.622 + <dd> A child box B of a containing block C is a 3d-preserving 7.623 + child if it has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> and the user-agent is not required to flatten it 7.624 + based on the <a href="https://www.w3.org/TR/css3-transforms/#transform-style-property">requirements</a> in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. 7.625 + <dt><dfn data-dfn-type="dfn" data-noexport="" id="non-3d-preserving-child">non-3d-preserving child<a class="self-link" href="#non-3d-preserving-child"></a></dfn> 7.626 + <dd> A child C of a box P is a non-3d-preserving-child if 7.627 + it is not a <a data-link-type="dfn" href="#3d-preserving-child">3d-preserving child</a>. 7.628 + <dt><dfn data-dfn-type="dfn" data-noexport="" id="3d-preserving-descendant">3d-preserving descendant<a class="self-link" href="#3d-preserving-descendant"></a></dfn> 7.629 + <dd> Box D is a 3d-preserving descendant of box A if A is 7.630 an ancestor of D, and D and all of the boxes (if any) 7.631 in the containing block chain from D to A 7.632 - are <a data-link-type="dfn" href="#3d_preserving-child">3d-preserving child</a> boxes. 7.633 - 7.634 - 7.635 - 7.636 + are <a data-link-type="dfn" href="#3d-preserving-child">3d-preserving child</a> boxes. 7.637 </dl> 7.638 - 7.639 - 7.640 <p>The scrollable overflow of a box is the union of the following things, 7.641 all adjusted for transforms <span class="issue" id="issue-1b139c15"><a class="self-link" href="#issue-1b139c15"></a>undefined concept!</span> into the box’s coordinate space:</p> 7.642 - 7.643 - 7.644 <ul> 7.645 - 7.646 <li> 7.647 - for the box and all of its <a data-link-type="dfn" href="#3d_preserving-descendant">3d-preserving descendant</a> boxes: 7.648 - 7.649 + for the box and all of its <a data-link-type="dfn" href="#3d-preserving-descendant">3d-preserving descendant</a> boxes: 7.650 <ul> 7.651 - 7.652 - <li>the box’s own padding edge (for the box itself) or border edge (for <a data-link-type="dfn" href="#3d_preserving-descendant">3d-preserving descendant</a> boxes) 7.653 - 7.654 - 7.655 + <li>the box’s own padding edge (for the box itself) or border edge (for <a data-link-type="dfn" href="#3d-preserving-descendant">3d-preserving descendant</a> boxes) 7.656 <li>the bounds <span class="issue" id="issue-2d1dc4f9"><a class="self-link" href="#issue-2d1dc4f9"></a>undefined term!</span> of any text directly in the box 7.657 - 7.658 - 7.659 - <li><span class="issue" id="issue-75780f3f"><a class="self-link" href="#issue-75780f3f"></a>MORE HERE!</span> 7.660 - 7.661 + <li><span class="issue" id="issue-75780f3f"><a class="self-link" href="#issue-75780f3f"></a>MORE HERE!</span> 7.662 </ul> 7.663 - 7.664 - 7.665 - <li> 7.666 - for all the <a data-link-type="dfn" href="#non_3d_preserving-child">non-3d-preserving child</a> boxes of the 7.667 - box and its <a data-link-type="dfn" href="#3d_preserving-descendant">3d-preserving descendant</a> boxes, 7.668 - the scrollable overflow of the box 7.669 - 7.670 - 7.671 - 7.672 + <li> for all the <a data-link-type="dfn" href="#non-3d-preserving-child">non-3d-preserving child</a> boxes of the 7.673 + box and its <a data-link-type="dfn" href="#3d-preserving-descendant">3d-preserving descendant</a> boxes, 7.674 + the scrollable overflow of the box 7.675 </ul> 7.676 - 7.677 - 7.678 - <p class="issue" id="issue-e889eac0"><a class="self-link" href="#issue-e889eac0"></a> 7.679 - I wrote this definition off the top of my head, 7.680 + <p class="issue" id="issue-e889eac0"><a class="self-link" href="#issue-e889eac0"></a> I wrote this definition off the top of my head, 7.681 so it can’t possibly be right. 7.682 - It’s missing tons of pieces! 7.683 - </p> 7.684 - 7.685 - 7.686 - <p class="issue" id="issue-521d48c7"><a class="self-link" href="#issue-521d48c7"></a> 7.687 - The handling of preserve-3d subtrees here is probably wrong; 7.688 + It’s missing tons of pieces! </p> 7.689 + <p class="issue" id="issue-521d48c7"><a class="self-link" href="#issue-521d48c7"></a> The handling of preserve-3d subtrees here is probably wrong; 7.690 the elements should probably count 7.691 - only towards the overflow of the element that flattens them. 7.692 - </p> 7.693 - 7.694 - 7.695 - <p> 7.696 - The <dfn data-dfn-type="dfn" data-noexport="" id="scrollable-overflow-region">scrollable overflow region<a class="self-link" href="#scrollable-overflow-region"></a></dfn> is the non-rectangular region 7.697 - occupied by the <a data-link-type="dfn" href="#scrollable-overflow0">scrollable overflow</a>, and the 7.698 - <dfn data-dfn-type="dfn" data-noexport="" id="scrollable-overflow-rectangle">scrollable overflow rectangle<a class="self-link" href="#scrollable-overflow-rectangle"></a></dfn> is 7.699 + only towards the overflow of the element that flattens them. </p> 7.700 + <p> The <dfn data-dfn-type="dfn" data-noexport="" id="scrollable-overflow-region">scrollable overflow region<a class="self-link" href="#scrollable-overflow-region"></a></dfn> is the non-rectangular region 7.701 + occupied by the <a data-link-type="dfn" href="#scrollable-overflow0">scrollable overflow</a>, and the <dfn data-dfn-type="dfn" data-noexport="" id="scrollable-overflow-rectangle">scrollable overflow rectangle<a class="self-link" href="#scrollable-overflow-rectangle"></a></dfn> is 7.702 the minimal rectangle whose axis is aligned to the box’s axes 7.703 and contains the <a data-link-type="dfn" href="#scrollable-overflow-region">scrollable overflow region</a>. 7.704 Note that the <a data-link-type="dfn" href="#scrollable-overflow-rectangle">scrollable overflow rectangle</a> is a rectangle 7.705 in the box’s coordinate system, but might be non-rectangular 7.706 - in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. 7.707 - </p> 7.708 - 7.709 - 7.710 + in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. </p> 7.711 <h3 class="heading settled" data-level="2.3" id="border-box-overflow"><span class="secno">2.3. </span><span class="content">Border box overflow</span><a class="self-link" href="#border-box-overflow"></a></h3> 7.712 - 7.713 - 7.714 - <p class="issue" id="issue-3930f393"><a class="self-link" href="#issue-3930f393"></a> 7.715 - This concept has been proposed for some uses, such as for 7.716 - determining what the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-ui-3/#propdef-outline">outline</a> property goes around, and 7.717 + <p class="issue" id="issue-3930f393"><a class="self-link" href="#issue-3930f393"></a> This concept has been proposed for some uses, such as for 7.718 + determining what the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-3/#propdef-outline">outline</a> property goes around, and 7.719 as the basis of a coordinate system for specifying clips and masks, 7.720 - but it’s not clear if it’s needed. 7.721 - </p> 7.722 - 7.723 - 7.724 - <p> 7.725 - The <dfn data-dfn-type="dfn" data-noexport="" id="border_box-overflow">border-box overflow<a class="self-link" href="#border_box-overflow"></a></dfn> of a box is the 7.726 + but it’s not clear if it’s needed. </p> 7.727 + <p> The <dfn data-dfn-type="dfn" data-noexport="" id="border-box-overflow0">border-box overflow<a class="self-link" href="#border-box-overflow0"></a></dfn> of a box is the 7.728 union of the box’s border edge and the border edges of 7.729 the box’s descendants.</p> 7.730 - 7.731 <p></p> 7.732 - 7.733 - 7.734 - <p class="issue" id="issue-42ea3c29"><a class="self-link" href="#issue-42ea3c29"></a> 7.735 - If needed, define more formally, as for scrollable overflow above. 7.736 - (Maybe even share the definitions in an appropriate way!) 7.737 - </p> 7.738 - 7.739 - 7.740 - <p> 7.741 - The <dfn data-dfn-type="dfn" data-noexport="" id="border_box-overflow-region">border-box overflow region<a class="self-link" href="#border_box-overflow-region"></a></dfn> is the non-rectangular region 7.742 - occupied by the <a data-link-type="dfn" href="#border_box-overflow">border-box overflow</a>, and the 7.743 - <dfn data-dfn-type="dfn" data-noexport="" id="border_box-overflow-rectangle">border-box overflow rectangle<a class="self-link" href="#border_box-overflow-rectangle"></a></dfn> is 7.744 + <p class="issue" id="issue-42ea3c29"><a class="self-link" href="#issue-42ea3c29"></a> If needed, define more formally, as for scrollable overflow above. 7.745 + (Maybe even share the definitions in an appropriate way!) </p> 7.746 + <p> The <dfn data-dfn-type="dfn" data-noexport="" id="border-box-overflow-region">border-box overflow region<a class="self-link" href="#border-box-overflow-region"></a></dfn> is the non-rectangular region 7.747 + occupied by the <a data-link-type="dfn" href="#border-box-overflow0">border-box overflow</a>, and the <dfn data-dfn-type="dfn" data-noexport="" id="border-box-overflow-rectangle">border-box overflow rectangle<a class="self-link" href="#border-box-overflow-rectangle"></a></dfn> is 7.748 the minimal rectangle whose axis is aligned to the box’s axes 7.749 - and contains the <a data-link-type="dfn" href="#border_box-overflow-region">border-box overflow region</a>. 7.750 - Note that the <a data-link-type="dfn" href="#border_box-overflow-rectangle">border-box overflow rectangle</a> is a rectangle 7.751 + and contains the <a data-link-type="dfn" href="#border-box-overflow-region">border-box overflow region</a>. 7.752 + Note that the <a data-link-type="dfn" href="#border-box-overflow-rectangle">border-box overflow rectangle</a> is a rectangle 7.753 in the box’s coordinate system, but might be non-rectangular 7.754 - in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. 7.755 - </p> 7.756 - 7.757 - 7.758 + in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. </p> 7.759 <h2 class="heading settled" data-level="3" id="overflow-properties"><span class="secno">3. </span><span class="content">Overflow properties</span><a class="self-link" href="#overflow-properties"></a></h2> 7.760 - 7.761 - 7.762 - <p> 7.763 - The <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> property specifies 7.764 + <p> The <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> property specifies 7.765 the handling of overflow in the horizontal direction 7.766 (i.e., overflow from the left and right sides of the box), 7.767 and the <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> property specifies the handling 7.768 of overflow in the vertical direction 7.769 - (i.e., overflow from the top and bottom sides of the box) 7.770 - </p> 7.771 - 7.772 - 7.773 - <table class="definition propdef" data-link-for-hint="overflow-x"> 7.774 + (i.e., overflow from the top and bottom sides of the box) </p> 7.775 + <table class="def propdef" data-link-for-hint="overflow-x"> 7.776 <tbody> 7.777 <tr> 7.778 <th>Name: 7.779 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-overflow-x">overflow-x<a class="self-link" href="#propdef-overflow-x"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-overflow-y">overflow-y<a class="self-link" href="#propdef-overflow-y"></a></dfn> 7.780 <tr class="value"> 7.781 <th>Value: 7.782 - <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-scroll">scroll</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a> 7.783 + <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-scroll">scroll</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a> 7.784 <tr> 7.785 <th>Initial: 7.786 <td><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> 7.787 @@ -735,24 +467,18 @@ 7.788 <td>no 7.789 <tr> 7.790 <th>Canonical order: 7.791 - <td><abbr title="follows order of property value definition">per grammar</abbr></table> 7.792 - 7.793 - 7.794 - <p> 7.795 - The <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property is a shorthand property 7.796 - that sets the specified values of both <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> 7.797 - to the value specified for <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a>. 7.798 - </p> 7.799 - 7.800 - 7.801 - <table class="definition propdef" data-link-for-hint="overflow"> 7.802 + <td><abbr title="follows order of property value definition">per grammar</abbr> 7.803 + </table> 7.804 + <p> The <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property is a shorthand property 7.805 + that sets the specified values of both <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> to the value specified for <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a>. </p> 7.806 + <table class="def propdef" data-link-for-hint="overflow"> 7.807 <tbody> 7.808 <tr> 7.809 <th>Name: 7.810 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-overflow">overflow<a class="self-link" href="#propdef-overflow"></a></dfn> 7.811 <tr class="value"> 7.812 <th>Value: 7.813 - <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-scroll">scroll</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a> 7.814 + <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-scroll">scroll</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a> 7.815 <tr> 7.816 <th>Initial: 7.817 <td>see individual properties 7.818 @@ -776,91 +502,45 @@ 7.819 <td>no 7.820 <tr> 7.821 <th>Canonical order: 7.822 - <td><abbr title="follows order of property value definition">per grammar</abbr></table> 7.823 - 7.824 - 7.825 + <td><abbr title="follows order of property value definition">per grammar</abbr> 7.826 + </table> 7.827 <div id="overflow-computed-values"> 7.828 - 7.829 - <p>The computed values of <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> 7.830 - are determined from the cascaded values <a data-link-type="biblio" href="#biblio-css3cascade">[CSS3CASCADE]</a> 7.831 - based on the following rules:</p> 7.832 - 7.833 - 7.834 - 7.835 + <p>The computed values of <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> are determined from the cascaded values <a data-link-type="biblio" href="#biblio-css3cascade">[CSS3CASCADE]</a> based on the following rules:</p> 7.836 <ol> 7.837 - 7.838 - <li> 7.839 - If one cascaded values is <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> 7.840 - and the other is not, 7.841 + <li> If one cascaded values is <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> and the other is not, 7.842 then computed values are the cascaded values 7.843 - with <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> changed to <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>. 7.844 - 7.845 - 7.846 - 7.847 - <li> 7.848 - Otherwise, if both cascaded values are <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> 7.849 - and the computed value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-containment/#propdef-contain">contain</a> is 7.850 - one that activates <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-containment/#paint-containment">paint containment</a> 7.851 - (e.g. <span class="css">contain:strict</span> 7.852 - or <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-containment/#propdef-contain">contain: paint</a> 7.853 - or <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-containment/#propdef-contain">contain: layout paint</a>…), 7.854 - then the computed values of both <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> 7.855 - are changed to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>. 7.856 - 7.857 - 7.858 - <li> 7.859 - Otherwise, the computed values are as specified. 7.860 - 7.861 - 7.862 - 7.863 + with <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> changed to <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>. 7.864 + <li> Otherwise, if both cascaded values are <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> and the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-containment/#propdef-contain">contain</a> is 7.865 + one that activates <a data-link-type="dfn" href="https://drafts.csswg.org/css-containment/#paint-containment">paint containment</a> (e.g. <span class="css">contain:strict</span> or <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-containment/#propdef-contain">contain: paint</a> or <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-containment/#propdef-contain">contain: layout paint</a>…), 7.866 + then the computed values of both <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> are changed to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>. 7.867 + <li> Otherwise, the computed values are as specified. 7.868 </ol> 7.869 - 7.870 - 7.871 </div> 7.872 - 7.873 - 7.874 <p>The values of these properties are:</p> 7.875 - 7.876 - 7.877 <dl> 7.878 - 7.879 - <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-visible">visible<a class="self-link" href="#valdef-overflow-visible"></a></dfn> 7.880 - 7.881 - <dd> 7.882 - There is no special handling of overflow, that is, it 7.883 - may be rendered outside the block container. 7.884 - 7.885 - 7.886 - 7.887 - <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-hidden">hidden<a class="self-link" href="#valdef-overflow-hidden"></a></dfn> 7.888 - 7.889 + <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-visible">visible<a class="self-link" href="#valdef-overflow-visible"></a></dfn> 7.890 + <dd> There is no special handling of overflow, that is, it 7.891 + may be rendered outside the block container. 7.892 + <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-hidden">hidden<a class="self-link" href="#valdef-overflow-hidden"></a></dfn> 7.893 <dd>This value indicates that 7.894 the content is clipped and that no scrolling user interface should be provided by the UA 7.895 to view the content outside the clipping region. 7.896 However, the content may still be scrolled programatically, 7.897 - for example using the mechanisms defined in <a data-link-type="biblio" href="#biblio-cssom-view">[CSSOM-VIEW]</a>. 7.898 - 7.899 - <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-clip">clip<a class="self-link" href="#valdef-overflow-clip"></a></dfn> 7.900 - 7.901 - <dd>Like <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a>, 7.902 + for example using the mechanisms defined in <a data-link-type="biblio" href="#biblio-cssom-view">[CSSOM-VIEW]</a>. 7.903 + <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-clip">clip<a class="self-link" href="#valdef-overflow-clip"></a></dfn> 7.904 + <dd> 7.905 + Like <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a>, 7.906 this value indicates that 7.907 the content is clipped 7.908 and that no scrolling user interface should be provided by the UA 7.909 to view the content outside the clipping region. 7.910 - In addition, unlike <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: hidden</a> 7.911 - which still allows programmatic scrolling, 7.912 - <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: clip</a> forbids scrolling entirely, 7.913 - through any mechanism. 7.914 - 7.915 - 7.916 + In addition, unlike <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: hidden</a> which still allows programmatic scrolling, <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: clip</a> forbids scrolling entirely, 7.917 + through any mechanism. 7.918 <p class="issue" id="issue-a9ea8890"><a class="self-link" href="#issue-a9ea8890"></a> Mozilla implements -moz-hidden-unscrollable, 7.919 which is similar to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>, 7.920 except that it does not cause the element to establish a BFC. 7.921 Should we match that?</p> 7.922 - 7.923 - 7.924 - <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-scroll">scroll<a class="self-link" href="#valdef-overflow-scroll"></a></dfn> 7.925 - 7.926 + <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-scroll">scroll<a class="self-link" href="#valdef-overflow-scroll"></a></dfn> 7.927 <dd>This value indicates that the content is clipped 7.928 and that if the user agent uses a scrolling mechanism 7.929 that is visible on the screen (such as a scroll bar or a panner), 7.930 @@ -868,25 +548,16 @@ 7.931 whether or not any of its content is clipped. 7.932 This avoids any problem with scrollbars appearing 7.933 and disappearing in a dynamic environment. 7.934 - When this value is specified and the target medium is <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/mediaqueries-4/#valdef-media-print">print</a>, 7.935 - overflowing content may be printed. 7.936 - 7.937 - <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-auto">auto<a class="self-link" href="#valdef-overflow-auto"></a></dfn> 7.938 - 7.939 + When this value is specified and the target medium is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-4/#valdef-media-print">print</a>, 7.940 + overflowing content may be printed. 7.941 + <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-auto">auto<a class="self-link" href="#valdef-overflow-auto"></a></dfn> 7.942 <dd>The behavior of the <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a> value is user agent-dependent, 7.943 - but should cause a scrolling mechanism to be provided for overflowing boxes. 7.944 - 7.945 + but should cause a scrolling mechanism to be provided for overflowing boxes. 7.946 </dl> 7.947 - 7.948 - 7.949 <p>Even if <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> is set to <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>, 7.950 content may be clipped to a UA’s document window by the native operating environment.</p> 7.951 - 7.952 - 7.953 <p>If the computed value of <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> is not <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>, 7.954 the element creates a block formatting context.</p> 7.955 - 7.956 - 7.957 <p>UAs must apply the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property 7.958 set on the root element to the viewport. 7.959 HTML UAs must instead apply the ‘overflow’ property 7.960 @@ -896,61 +567,38 @@ 7.961 must be interpreted as <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>. 7.962 The element from which the value is propagated 7.963 must have a used value for <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> of <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>.</p> 7.964 - 7.965 - 7.966 <p>In the case of a scrollbar being placed on an edge of the element’s box, 7.967 it should be inserted between the inner border edge 7.968 and the outer padding edge. 7.969 Any space taken up by the scrollbars should be 7.970 taken out of (subtracted from the dimensions of) 7.971 the containing block formed by the element with the scrollbars.</p> 7.972 - 7.973 - 7.974 <p class="issue" id="issue-402eb70c"><a class="self-link" href="#issue-402eb70c"></a> import examples from <a data-link-type="biblio" href="#biblio-css3-box">[CSS3-BOX]</a>.</p> 7.975 - 7.976 - 7.977 - <p class="issue" id="issue-c318b1c1"><a class="self-link" href="#issue-c318b1c1"></a> 7.978 - Explain which directions allow scrolling and which don’t, 7.979 - as a function of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> 7.980 - (including propagation of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> to the ICB). 7.981 - </p> 7.982 - 7.983 - 7.984 - 7.985 - <p class="issue" id="issue-52e2a181"><a class="self-link" href="#issue-52e2a181"></a> 7.986 - <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> describes an <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property, 7.987 + <p class="issue" id="issue-c318b1c1"><a class="self-link" href="#issue-c318b1c1"></a> Explain which directions allow scrolling and which don’t, 7.988 + as a function of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> (including propagation of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> to the ICB). </p> 7.989 + <p class="issue" id="issue-52e2a181"><a class="self-link" href="#issue-52e2a181"></a> <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> describes an <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property, 7.990 but it has not picked up implementation experience 7.991 that the working group is aware of. 7.992 - Should this document treat <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> as a defunct proposal, 7.993 - or should this document describe the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property 7.994 + Should this document treat <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> as a defunct proposal, 7.995 + or should this document describe the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property 7.996 and attempt to revive it, 7.997 - despite that implementations have implemented 7.998 - <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> instead? 7.999 - </p> 7.1000 - 7.1001 - 7.1002 + despite that implementations have implemented <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> instead? </p> 7.1003 <h2 class="heading settled" data-level="4" id="fragmentation"><span class="secno">4. </span><span class="content">Fragmentation of overflow</span><a class="self-link" href="#fragmentation"></a></h2> 7.1004 - 7.1005 - 7.1006 <p>The <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property gives authors the ability 7.1007 to request that content that does not fit inside an element 7.1008 be fragmented (in the sense of <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a>), 7.1009 and provides alternatives 7.1010 for where the remaining content should continue.</p> 7.1011 - 7.1012 - 7.1013 <p>Notably, this property explains traditional pagination, 7.1014 and extends it further.</p> 7.1015 - 7.1016 - 7.1017 - <table class="definition propdef" data-link-for-hint="continue"> 7.1018 + <table class="def propdef" data-link-for-hint="continue"> 7.1019 <tbody> 7.1020 <tr> 7.1021 <th>Name: 7.1022 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-continue">continue<a class="self-link" href="#propdef-continue"></a></dfn> 7.1023 <tr class="value"> 7.1024 <th>Value: 7.1025 - <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-overflow">overflow</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a> 7.1026 + <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-overflow">overflow</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a> 7.1027 <tr> 7.1028 <th>Initial: 7.1029 <td>auto 7.1030 @@ -974,227 +622,129 @@ 7.1031 <td>no 7.1032 <tr> 7.1033 <th>Canonical order: 7.1034 - <td><abbr title="follows order of property value definition">per grammar</abbr></table> 7.1035 - 7.1036 - 7.1037 + <td><abbr title="follows order of property value definition">per grammar</abbr> 7.1038 + </table> 7.1039 <p class="issue" id="issue-b2c6e3da"><a class="self-link" href="#issue-b2c6e3da"></a> The naming of this property and its values is preliminary. 7.1040 This was initially proposed as 7.1041 "fragmentation: auto | none | break | clone | page" 7.1042 in <a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html</a>, 7.1043 and there is not yet wide agreement as to which naming is better.</p> 7.1044 - 7.1045 - 7.1046 - <p class="issue" id="issue-d52b3e3d"><a class="self-link" href="#issue-d52b3e3d"></a> This property is meant to generalize and replace <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a>. 7.1047 -Once it is sufficiently stable in this specification, 7.1048 -<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a> should be removed from the regions specification in favor of this.</p> 7.1049 - 7.1050 - 7.1051 + <p class="issue" id="issue-d52b3e3d"><a class="self-link" href="#issue-d52b3e3d"></a> This property is meant to generalize and replace <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-regions-1/#propdef-region-fragment">region-fragment</a>. 7.1052 +Once it is sufficiently stable in this specification, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-regions-1/#propdef-region-fragment">region-fragment</a> should be removed from the regions specification in favor of this.</p> 7.1053 <p class="note" role="note">Note: <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> replaces "overflow:fragments" 7.1054 from earlier versions of this specification, 7.1055 while <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: paginate</a> replaces "overflow: paged-x | paged-y | paged-x-controls | paged-y-controls"</p> 7.1056 - 7.1057 - 7.1058 <dl> 7.1059 - 7.1060 - <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-auto">auto<a class="self-link" href="#valdef-continue-auto"></a></dfn> 7.1061 - 7.1062 - <dd><a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> may only occur as a computed value 7.1063 - if the element is a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-regions-1/#css-region">CSS Region</a> 7.1064 - other than the last one in a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-regions-1/#region-chain">region chain</a>. 7.1065 - Content that doesn’t fit is pushed to the next region of the chain. 7.1066 - 7.1067 - 7.1068 + <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-auto">auto<a class="self-link" href="#valdef-continue-auto"></a></dfn> 7.1069 + <dd> 7.1070 + <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> may only occur as a computed value 7.1071 + if the element is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-regions-1/#css-region">CSS Region</a> other than the last one in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-regions-1/#region-chain">region chain</a>. 7.1072 + Content that doesn’t fit is pushed to the next region of the chain. 7.1073 <p>In all other cases, <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> computes to one of the other values.</p> 7.1074 - 7.1075 - 7.1076 - 7.1077 - <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-overflow">overflow<a class="self-link" href="#valdef-continue-overflow"></a></dfn> 7.1078 - 7.1079 - <dd>Content that doesn’t fit overflows, according to the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property 7.1080 - 7.1081 - 7.1082 - <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-discard">discard<a class="self-link" href="#valdef-continue-discard"></a></dfn> 7.1083 - 7.1084 - <dd>Content that doesn’t fit is discarded at a fragmentation break 7.1085 - 7.1086 - 7.1087 + <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-overflow">overflow<a class="self-link" href="#valdef-continue-overflow"></a></dfn> 7.1088 + <dd>Content that doesn’t fit overflows, according to the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property 7.1089 + <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-discard">discard<a class="self-link" href="#valdef-continue-discard"></a></dfn> 7.1090 + <dd> 7.1091 + Content that doesn’t fit is discarded at a fragmentation break 7.1092 <p class="note" role="note">Note: generalized from region-fragment: break; on the last region of a region chain</p> 7.1093 - 7.1094 - 7.1095 - 7.1096 - <p class="issue" id="issue-36be54be"><a class="self-link" href="#issue-36be54be"></a> When the element isn’t a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-break-3/#fragmentation-container">fragmentation container</a> already, 7.1097 + <p class="issue" id="issue-36be54be"><a class="self-link" href="#issue-36be54be"></a> When the element isn’t a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragmentation-container">fragmentation container</a> already, 7.1098 should this work by turning it directly into one, 7.1099 or by creating a <a data-link-type="dfn" href="#fragment-box">fragment box</a> inside it like <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> does?</p> 7.1100 - 7.1101 - 7.1102 - 7.1103 - <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-paginate">paginate<a class="self-link" href="#valdef-continue-paginate"></a></dfn> 7.1104 - 7.1105 - <dd>Content that doesn’t fit paginates. 7.1106 + <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-paginate">paginate<a class="self-link" href="#valdef-continue-paginate"></a></dfn> 7.1107 + <dd> 7.1108 + Content that doesn’t fit paginates. 7.1109 This creates a paginated view inside the element 7.1110 - similar to the way that 'overflow: scroll' creates a scrollable view. 7.1111 - 7.1112 - 7.1113 + similar to the way that 'overflow: scroll' creates a scrollable view. 7.1114 <p>See <a href="#paginated-overflow">paginated overflow</a></p> 7.1115 - 7.1116 - 7.1117 - 7.1118 <p class="note" role="note">Note: Print is effectively "continue: paginate" on the root.</p> 7.1119 - 7.1120 - 7.1121 - <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-fragments">fragments<a class="self-link" href="#valdef-continue-fragments"></a></dfn> 7.1122 - 7.1123 - <dd>content that doesn’t fit causes the element to copy itself and continue laying out. 7.1124 - 7.1125 - 7.1126 + <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-fragments">fragments<a class="self-link" href="#valdef-continue-fragments"></a></dfn> 7.1127 + <dd> 7.1128 + content that doesn’t fit causes the element to copy itself and continue laying out. 7.1129 <p>See <a href="#fragment-overflow">fragment overflow</a>.</p> 7.1130 - 7.1131 - 7.1132 </dl> 7.1133 - 7.1134 - 7.1135 <p>The computed value of the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> for a given element or pseudo element is determined as follow:</p> 7.1136 - 7.1137 <ol> 7.1138 - 7.1139 - <li>If the specified value is <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> 7.1140 - 7.1141 + <li> 7.1142 + If the specified value is <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> 7.1143 <ol> 7.1144 - 7.1145 - <li>On a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-regions-1/#css-region">CSS Region</a> other than the last one in a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-regions-1/#region-chain">region chain</a>, 7.1146 - the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> 7.1147 - 7.1148 + <li>On a <a data-link-type="dfn" href="https://drafts.csswg.org/css-regions-1/#css-region">CSS Region</a> other than the last one in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-regions-1/#region-chain">region chain</a>, 7.1149 + the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> 7.1150 <li>On a page 7.1151 - the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a> 7.1152 - 7.1153 - <li>On a <a data-link-type="dfn" href="#fragment-box">fragment box</a> 7.1154 - the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> 7.1155 - 7.1156 - <li>Otherwise, the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-overflow">overflow</a> 7.1157 - 7.1158 + the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a> 7.1159 + <li>On a <a data-link-type="dfn" href="#fragment-box">fragment box</a> the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> 7.1160 + <li>Otherwise, the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-overflow">overflow</a> 7.1161 </ol> 7.1162 - 7.1163 - 7.1164 - <li>If the specified value is <span class="css">framgents</span> 7.1165 - 7.1166 + <li> 7.1167 + If the specified value is <span class="css">framgents</span> 7.1168 <ol> 7.1169 - 7.1170 <li>On a page 7.1171 - the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a> 7.1172 - 7.1173 - <li>Otherwise, the computed value is the specified value 7.1174 - 7.1175 + the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a> 7.1176 + <li>Otherwise, the computed value is the specified value 7.1177 </ol> 7.1178 - 7.1179 - 7.1180 - <li>In all other cases, the computed value is the specified value 7.1181 -</ol> 7.1182 - 7.1183 - 7.1184 + <li>In all other cases, the computed value is the specified value 7.1185 + </ol> 7.1186 <p class="issue" id="issue-53644667"><a class="self-link" href="#issue-53644667"></a> If we introduce a pseudo element that can select columns in a multicol, 7.1187 we would need to specify that auto computes to auto on it, 7.1188 or introduce a new value and have auto compute to that 7.1189 (but what would that value compute to on things that aren’t columns?).</p> 7.1190 - 7.1191 - 7.1192 - <p class="note" role="note">Note: For background discussions leading to this property, see these threads: 7.1193 -<a href="http://lists.w3.org/Archives/Public/www-style/2012May/1197.html">discussion of overflow, overflow-x, overflow-y and overflow-style</a> and 7.1194 -<a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">proposal for a fragmentation property</a></p> 7.1195 - 7.1196 - 7.1197 + <p class="note" role="note">Note: For background discussions leading to this property, see these threads: <a href="http://lists.w3.org/Archives/Public/www-style/2012May/1197.html">discussion of overflow, overflow-x, overflow-y and overflow-style</a> and <a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">proposal for a fragmentation property</a></p> 7.1198 <h2 class="heading settled" data-level="5" id="paginated-overflow"><span class="secno">5. </span><span class="content">Paginated overflow</span><a class="self-link" href="#paginated-overflow"></a></h2> 7.1199 - 7.1200 - 7.1201 <p>This section introduces and defines the meaning of the <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a> value of the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property.</p> 7.1202 - 7.1203 - 7.1204 <p class="issue" id="issue-001d5014"><a class="self-link" href="#issue-001d5014"></a> Write this section</p> 7.1205 - 7.1206 - 7.1207 <p class="issue" id="issue-338ad0f3"><a class="self-link" href="#issue-338ad0f3"></a> Pages should be possible to style with @page rules. How does that work for nested pages?</p> 7.1208 - 7.1209 - 7.1210 - <div class="issue" id="issue-67ad77e5"><a class="self-link" href="#issue-67ad77e5"></a> 7.1211 -Should traditional pagination (e.g. when printing) 7.1212 + <div class="issue" id="issue-67ad77e5"> 7.1213 + <a class="self-link" href="#issue-67ad77e5"></a> Should traditional pagination (e.g. when printing) 7.1214 be expressed through some magic in the computed value of <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>, 7.1215 -or by inserting this in the UA stylesheet: 7.1216 - 7.1217 - <pre><code class="lang-css highlight"><span class="k">@media</span> <span class="o">(</span><span class="nt">overflow-block</span><span class="o">:</span> <span class="nt">paged</span><span class="o">),</span> <span class="o">(</span><span class="nt">overflow-block</span><span class="o">:</span> <span class="nt">optional-paged</span><span class="o">)</span> <span class="p">{</span> 7.1218 - <span class="nd">:root</span> <span class="p">{</span> 7.1219 - <span class="n">continue</span><span class="o">:</span> <span class="n">paginate</span><span class="p">;</span> 7.1220 - <span class="p">}</span> 7.1221 -<span class="p">}</span></code></pre> 7.1222 -</div> 7.1223 - 7.1224 - 7.1225 +or by inserting this in the UA stylesheet: 7.1226 +<pre><code class="lang-css highlight"><span class="n">@media</span> <span class="p">(</span>overflow-block<span class="nt">: paged), (overflow-block: optional-paged) </span><span class="p">{</span> 7.1227 + :root { 7.1228 + continue: paginate; 7.1229 + } 7.1230 +}</code></pre> 7.1231 + </div> 7.1232 <p class="issue" id="issue-6eb3c644"><a class="self-link" href="#issue-6eb3c644"></a> Traditional pagination (e.g. when printing) assumes that 7.1233 :root is contained in the page box, 7.1234 rather than having the page box be a pseudo element child of :root. 7.1235 Can we work around that using something similar to fragment boxes? 7.1236 Or maybe by having a fragment box (reproducing :root) inside a page box inside :root?</p> 7.1237 - 7.1238 - 7.1239 <p class="issue" id="issue-64583cf9"><a class="self-link" href="#issue-64583cf9"></a> How does the page box model work when it is a child of a regular css box?</p> 7.1240 - 7.1241 - 7.1242 <p class="issue" id="issue-e9f64b3d"><a class="self-link" href="#issue-e9f64b3d"></a> The initial proposal in <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> and implemantation from Opera 7.1243 used 4 values instead of <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a>: 7.1244 "paged-x | paged-y | paged-x-controls | paged-y-controls". 7.1245 Should this property also include these values, 7.1246 or are they better handled as separate properties? 7.1247 (e.g.: "pagination-layout: auto | horizontal | vertical", "pagination-controls: auto | none")</p> 7.1248 - 7.1249 - 7.1250 <p class="issue" id="issue-55c97ed8"><a class="self-link" href="#issue-55c97ed8"></a> Ability to display N pages at once 7.1251 rather than just one page at once? 7.1252 Could this be a value of "pagination-layout", such as: 7.1253 "pagination-layout: horizontal 2;"</p> 7.1254 - 7.1255 - 7.1256 <p class="issue" id="issue-64de292b"><a class="self-link" href="#issue-64de292b"></a> Brad Kemper has proposed a model for combining pagination and 7.1257 -fragment overflow, which also deals with displaying multiple pages. 7.1258 -<a href="http://www.w3.org/mid/[email protected]">http://www.w3.org/mid/[email protected]</a></p> 7.1259 - 7.1260 - 7.1261 - <p class="issue" id="issue-360561bd"><a class="self-link" href="#issue-360561bd"></a> 7.1262 - The current implementation of paginated overflow uses 7.1263 +fragment overflow, which also deals with displaying multiple pages. <a href="http://www.w3.org/mid/[email protected]">http://www.w3.org/mid/[email protected]</a></p> 7.1264 + <p class="issue" id="issue-360561bd"><a class="self-link" href="#issue-360561bd"></a> The current implementation of paginated overflow uses 7.1265 the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a>/<a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a>/<a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> properties 7.1266 - rather than the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property as proposed 7.1267 + rather than the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property as proposed 7.1268 in the <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> draft 7.1269 (which also matches the <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> proposal). 7.1270 - or the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property as described here. 7.1271 - </p> 7.1272 - 7.1273 - 7.1274 + or the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property as described here. </p> 7.1275 <h2 class="heading settled" data-level="6" id="fragment-overflow"><span class="secno">6. </span><span class="content">Fragment overflow</span><a class="self-link" href="#fragment-overflow"></a></h2> 7.1276 - 7.1277 - 7.1278 <p>This section introduces and defines the meaning of 7.1279 the <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> value of the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property.</p> 7.1280 - 7.1281 - 7.1282 - <p> 7.1283 - When the computed value of <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> for an element is <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a>, 7.1284 + <p> When the computed value of <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> for an element is <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a>, 7.1285 and implementations would otherwise have created a box for the element, 7.1286 then implementations must create a sequence of <dfn data-dfn-type="dfn" data-noexport="" id="fragment-box">fragment box<a class="self-link" href="#fragment-box"></a></dfn>es 7.1287 for that element. 7.1288 - (It is possible for an element with <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> 7.1289 - to generate only one <a data-link-type="dfn" href="#fragment-box">fragment box</a>. 7.1290 + (It is possible for an element with <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> to generate only one <a data-link-type="dfn" href="#fragment-box">fragment box</a>. 7.1291 However, if an element’s computed <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> is not <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a>, 7.1292 then its box is not a <a data-link-type="dfn" href="#fragment-box">fragment box</a>.) 7.1293 Every <a data-link-type="dfn" href="#fragment-box">fragment box</a> is a fragmentation container, 7.1294 and any overflow 7.1295 that would cause that fragmentation container to fragment 7.1296 causes another <a data-link-type="dfn" href="#fragment-box">fragment box</a> created as a next sibling 7.1297 - of the previous one. 7.1298 - <span class="issue" id="issue-74f423ed"><a class="self-link" href="#issue-74f423ed"></a>Or is it as though it’s a next sibling of 7.1299 + of the previous one. <span class="issue" id="issue-74f423ed"><a class="self-link" href="#issue-74f423ed"></a>Or is it as though it’s a next sibling of 7.1300 the element? Need to figure out exactly how this interacts with 7.1301 - other box-level fixup.</span> 7.1302 - Additionally, if the <a data-link-type="dfn" href="#fragment-box">fragment box</a> is also 7.1303 - a multi-column box (as defined in <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a> 7.1304 - <span class="issue" id="issue-928903ce"><a class="self-link" href="#issue-928903ce"></a>though it defines <i>multi-column element</i></span>) 7.1305 - any content that would lead to the creation of <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-multicol-1/#overflow-columns">overflow columns</a> <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a> 7.1306 - instead is flown into an additional fragment box. 7.1307 + other box-level fixup.</span> Additionally, if the <a data-link-type="dfn" href="#fragment-box">fragment box</a> is also 7.1308 + a multi-column box (as defined in <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a> <span class="issue" id="issue-928903ce"><a class="self-link" href="#issue-928903ce"></a>though it defines <i>multi-column element</i></span>) 7.1309 + any content that would lead to the creation of <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#overflow-columns">overflow columns</a> <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a> instead is flown into an additional fragment box. 7.1310 However, fragment boxes may themselves be broken 7.1311 (due to fragmentation in a fragmentation context outside of them, 7.1312 such as pages, columns, or other fragment boxes); 7.1313 @@ -1205,30 +755,20 @@ 7.1314 with a single index. 7.1315 This design choice is so that 7.1316 breaking a fragment box across pages does not break 7.1317 - the association of indices to particular pieces of content.) 7.1318 - <span class="issue" id="issue-060b1de8"><a class="self-link" href="#issue-060b1de8"></a>Should a forced break that breaks to 7.1319 + the association of indices to particular pieces of content.) <span class="issue" id="issue-060b1de8"><a class="self-link" href="#issue-060b1de8"></a>Should a forced break that breaks to 7.1320 an outer fragmentation context cause a new fragment of a single 7.1321 - fragment box or a new fragment box?</span> 7.1322 - <span class="issue" id="issue-5b4b087c"><a class="self-link" href="#issue-5b4b087c"></a>Should we find a term other than 7.1323 - <a data-link-type="dfn" href="#fragment-box">fragment box</a> here to make this a little less confusing?</span> 7.1324 - </p> 7.1325 - 7.1326 - 7.1327 - <p class="issue" id="issue-c4f3aedb"><a class="self-link" href="#issue-c4f3aedb"></a> 7.1328 - What if we want to be able to style the pieces of an element 7.1329 + fragment box or a new fragment box?</span> <span class="issue" id="issue-5b4b087c"><a class="self-link" href="#issue-5b4b087c"></a>Should we find a term other than <a data-link-type="dfn" href="#fragment-box">fragment box</a> here to make this a little less confusing?</span> </p> 7.1330 + <p class="issue" id="issue-c4f3aedb"><a class="self-link" href="#issue-c4f3aedb"></a> What if we want to be able to style the pieces of an element 7.1331 split within another type of fragmentation context? 7.1332 These rules prevent ever using <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> for that, 7.1333 - despite that the name seems the most logical name for such a feature. 7.1334 - </p> 7.1335 - 7.1336 - 7.1337 - <div class="example" id="example-17470be2"><a class="self-link" href="#example-17470be2"></a> 7.1338 - 7.1339 + despite that the name seems the most logical name for such a feature. </p> 7.1340 + <div class="example" id="example-17470be2"> 7.1341 + <a class="self-link" href="#example-17470be2"></a> 7.1342 <table class="source-demo-pair"> 7.1343 <tbody> 7.1344 <tr> 7.1345 <td> 7.1346 - <pre><!DOCTYPE HTML> 7.1347 +<pre><!DOCTYPE HTML> 7.1348 <title>Breaking content into 7.1349 equal-sized cards</title> 7.1350 <style> 7.1351 @@ -1257,38 +797,20 @@ 7.1352 next sibling of the first. 7.1353 </div></pre> 7.1354 <td> 7.1355 - 7.1356 <div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards. These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div> 7.1357 - 7.1358 - 7.1359 <div class="in-cards-demo">one to be created. The second<br>card is created just like it’s the<br>next sibling of the first.</div> 7.1360 - 7.1361 - 7.1362 </table> 7.1363 - 7.1364 - 7.1365 </div> 7.1366 - 7.1367 - 7.1368 - <p class="issue" id="issue-25a84ff4"><a class="self-link" href="#issue-25a84ff4"></a> 7.1369 - We should specify that <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> does not apply 7.1370 + <p class="issue" id="issue-25a84ff4"><a class="self-link" href="#issue-25a84ff4"></a> We should specify that <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> does not apply 7.1371 to at least some table parts, 7.1372 and perhaps other elements as well. 7.1373 - We need to determine exactly which ones. 7.1374 - </p> 7.1375 - 7.1376 - 7.1377 - <p class="issue" id="issue-6c1669e3"><a class="self-link" href="#issue-6c1669e3"></a> 7.1378 - This specification needs to say which type of 7.1379 + We need to determine exactly which ones. </p> 7.1380 + <p class="issue" id="issue-6c1669e3"><a class="self-link" href="#issue-6c1669e3"></a> This specification needs to say which type of 7.1381 fragmentation context is created 7.1382 so that it’s clear which values of the <a class="property" data-link-type="propdesc">break-*</a> properties 7.1383 cause breaks within this context. 7.1384 - We probably want <span class="css">break-*: region</span> to apply. 7.1385 - </p> 7.1386 - 7.1387 - 7.1388 - <p class="issue" id="issue-08d6a80e"><a class="self-link" href="#issue-08d6a80e"></a> 7.1389 - This specification needs a processing model 7.1390 + We probably want <span class="css">break-*: region</span> to apply. </p> 7.1391 + <p class="issue" id="issue-08d6a80e"><a class="self-link" href="#issue-08d6a80e"></a> This specification needs a processing model 7.1392 that will apply in cases where the layout containing the 7.1393 fragments has characteristics that use the intrinsic size of the fragments 7.1394 to change the amount of space available for them, 7.1395 @@ -1297,91 +819,54 @@ 7.1396 in <a data-link-type="biblio" href="#biblio-css3-regions">[CSS3-REGIONS]</a>, 7.1397 and the work done on a model there, 7.1398 and the editors of that specification, 7.1399 - should inform what happens in this specification. 7.1400 - </p> 7.1401 - 7.1402 - 7.1403 + should inform what happens in this specification. </p> 7.1404 <h3 class="heading settled" data-level="6.1" id="fragment-styling"><span class="secno">6.1. </span><span class="content">Fragment styling</span><a class="self-link" href="#fragment-styling"></a></h3> 7.1405 - 7.1406 - 7.1407 <h4 class="heading settled" data-level="6.1.1" id="fragment-pseudo-element"><span class="secno">6.1.1. </span><span class="content">The ::nth-fragment() pseudo-element</span><a class="self-link" href="#fragment-pseudo-element"></a></h4> 7.1408 - 7.1409 - 7.1410 - <p> 7.1411 - The <dfn class="css" data-dfn-type="selector" data-export="" id="selectordef-nth-fragment">::nth-fragment()<a class="self-link" href="#selectordef-nth-fragment"></a></dfn> pseudo-element 7.1412 + <p> The <dfn class="css" data-dfn-type="selector" data-export="" id="selectordef-nth-fragment">::nth-fragment()<a class="self-link" href="#selectordef-nth-fragment"></a></dfn> pseudo-element 7.1413 is a pseudo-element 7.1414 that describes some of the <a data-link-type="dfn" href="#fragment-box">fragment box</a>es generated by an element. 7.1415 The argument to the pseudo-element takes the same syntax 7.1416 as the argument to the :nth-child() pseudo-class 7.1417 defined in <a data-link-type="biblio" href="#biblio-select">[SELECT]</a>, and has the same meaning 7.1418 - except that the number is relative to 7.1419 - <a data-link-type="dfn" href="#fragment-box">fragment box</a>es generated by the element 7.1420 - instead of siblings of the element. 7.1421 - </p> 7.1422 - 7.1423 - 7.1424 - <p class="note" role="note"> 7.1425 - Selectors that allow addressing fragments 7.1426 + except that the number is relative to <a data-link-type="dfn" href="#fragment-box">fragment box</a>es generated by the element 7.1427 + instead of siblings of the element. </p> 7.1428 + <p class="note" role="note"> Selectors that allow addressing fragments 7.1429 by counting from the end rather than the start 7.1430 are intentionally not provided. 7.1431 Such selectors would interfere with determining 7.1432 - the number of fragments. 7.1433 - </p> 7.1434 - 7.1435 - 7.1436 - <p class="issue" id="issue-0e3bec77"><a class="self-link" href="#issue-0e3bec77"></a> 7.1437 - Depending on future discussions, 7.1438 + the number of fragments. </p> 7.1439 + <p class="issue" id="issue-0e3bec77"><a class="self-link" href="#issue-0e3bec77"></a> Depending on future discussions, 7.1440 this <span class="css">::nth-fragment(an+b)</span> syntax 7.1441 may be replaced with 7.1442 - the new <span class="css">::fragment:nth(an+b)</span> syntax. 7.1443 - </p> 7.1444 - 7.1445 - 7.1446 + the new <span class="css">::fragment:nth(an+b)</span> syntax. </p> 7.1447 <h4 class="heading settled" data-level="6.1.2" id="style-of-fragments"><span class="secno">6.1.2. </span><span class="content">Styling of fragments</span><a class="self-link" href="#style-of-fragments"></a></h4> 7.1448 - 7.1449 - 7.1450 - <p class="issue" id="issue-6e8f615f"><a class="self-link" href="#issue-6e8f615f"></a> 7.1451 - Should this apply to continue:fragments only, 7.1452 + <p class="issue" id="issue-6e8f615f"><a class="self-link" href="#issue-6e8f615f"></a> Should this apply to continue:fragments only, 7.1453 or also to continue:paginate? 7.1454 (If it applies, 7.1455 then stricter property restrictions would be needed 7.1456 - for continue:paginate.) 7.1457 - </p> 7.1458 - 7.1459 - 7.1460 - <p> 7.1461 - In the absence of rules with <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements, 7.1462 - the computed style for each <a data-link-type="dfn" href="#fragment-box">fragment box</a> 7.1463 - is the computed style for the element 7.1464 + for continue:paginate.) </p> 7.1465 + <p> In the absence of rules with <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements, 7.1466 + the computed style for each <a data-link-type="dfn" href="#fragment-box">fragment box</a> is the computed style for the element 7.1467 for which the <a data-link-type="dfn" href="#fragment-box">fragment box</a> was created. 7.1468 However, the style for a <a data-link-type="dfn" href="#fragment-box">fragment box</a> is also influenced 7.1469 - by rules whose selector’s <a data-link-type="dfn" href="http://dev.w3.org/csswg/selectors-3/#subject">subject</a> <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> 7.1470 - has an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element, 7.1471 + by rules whose selector’s <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-3/#subject">subject</a> <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> has an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element, 7.1472 if the 1-based number of the <a data-link-type="dfn" href="#fragment-box">fragment box</a> matches 7.1473 that <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element 7.1474 and the selector (excluding the <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element) 7.1475 - matches the element generating the fragments. 7.1476 - </p> 7.1477 - 7.1478 - 7.1479 - <p> 7.1480 - When determining the style of the <a data-link-type="dfn" href="#fragment-box">fragment box</a>, 7.1481 + matches the element generating the fragments. </p> 7.1482 + <p> When determining the style of the <a data-link-type="dfn" href="#fragment-box">fragment box</a>, 7.1483 these rules that match the fragment pseudo-element 7.1484 cascade together with the rules that match the element, 7.1485 with the fragment pseudo-element adding the specificity 7.1486 - of a pseudo-class to the specificity calculation. 7.1487 - <span class="issue" id="issue-8f881f96"><a class="self-link" href="#issue-8f881f96"></a>Does this need to be specified in 7.1488 - the cascading module as well?</span> 7.1489 - </p> 7.1490 - 7.1491 - 7.1492 - <div class="example" id="example-17b703f2"><a class="self-link" href="#example-17b703f2"></a> 7.1493 - 7.1494 + of a pseudo-class to the specificity calculation. <span class="issue" id="issue-8f881f96"><a class="self-link" href="#issue-8f881f96"></a>Does this need to be specified in 7.1495 + the cascading module as well?</span> </p> 7.1496 + <div class="example" id="example-17b703f2"> 7.1497 + <a class="self-link" href="#example-17b703f2"></a> 7.1498 <table class="source-demo-pair"> 7.1499 <tbody> 7.1500 <tr> 7.1501 <td> 7.1502 - <pre><!DOCTYPE HTML> 7.1503 +<pre><!DOCTYPE HTML> 7.1504 <style> 7.1505 .bouncy-columns { 7.1506 continue: fragments; 7.1507 @@ -1405,109 +890,64 @@ 7.1508 <i>...</i> 7.1509 </div></pre> 7.1510 <td> 7.1511 - 7.1512 <div class="bouncy-columns-demo one">In this<br>example, the<br>text in the div<br>is broken into<br>a series of<br>columns. The<br>author<br>probably</div> 7.1513 - 7.1514 - 7.1515 <div class="bouncy-columns-demo two">intended the<br>text to fill two<br>columns. But<br>if it happens to<br>fill three<br>columns, the<br>third column is<br>still created. It</div> 7.1516 - 7.1517 - 7.1518 <div class="bouncy-columns-demo">just doesn’t<br>have any<br>fragment-specific<br>styling because<br>the author<br>didn’t give it<br>any.</div> 7.1519 - 7.1520 - 7.1521 </table> 7.1522 - 7.1523 - 7.1524 </div> 7.1525 - 7.1526 - 7.1527 - <p> 7.1528 - Styling an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element with the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> 7.1529 - property does take effect; 7.1530 + <p> Styling an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element with the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property does take effect; 7.1531 if a <a data-link-type="dfn" href="#fragment-box">fragment box</a> has a 7.1532 - computed value of <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> other than <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> 7.1533 - then that fragment box is the last fragment. 7.1534 + computed value of <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> other than <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> then that fragment box is the last fragment. 7.1535 However, overriding <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> on the first fragment 7.1536 does not cause the <a data-link-type="dfn" href="#fragment-box">fragment box</a> not to exist; 7.1537 whether there are fragment boxes at all is determined by 7.1538 - the computed value of overflow for the element. 7.1539 - </p> 7.1540 - 7.1541 - 7.1542 - <p> 7.1543 - Styling an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element with the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-content-3/#propdef-content">content</a> 7.1544 - property has no effect; 7.1545 - the computed value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-content-3/#propdef-content">content</a> for the fragment box 7.1546 - remains the same as the computed value of content for the element. 7.1547 - </p> 7.1548 - 7.1549 - 7.1550 - <p> 7.1551 - Specifying <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display: none</a> for a <a data-link-type="dfn" href="#fragment-box">fragment box</a> causes 7.1552 + the computed value of overflow for the element. </p> 7.1553 + <p> Styling an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element with the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content">content</a> property has no effect; 7.1554 + the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content">content</a> for the fragment box 7.1555 + remains the same as the computed value of content for the element. </p> 7.1556 + <p> Specifying <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display">display: none</a> for a <a data-link-type="dfn" href="#fragment-box">fragment box</a> causes 7.1557 the fragment box with that index not to be generated. 7.1558 However, in terms of the indices 7.1559 used for matching <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements 7.1560 of later fragment boxes, 7.1561 it still counts as though it was generated. 7.1562 - However, since it is not generated, it does not contain any content. 7.1563 - </p> 7.1564 - 7.1565 - 7.1566 - <p> 7.1567 - Specifying other values of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a>, <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-position">position</a>, 7.1568 - or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-float">float</a> is permitted, but is not allowed to change 7.1569 + However, since it is not generated, it does not contain any content. </p> 7.1570 + <p> Specifying other values of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display">display</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position">position</a>, 7.1571 + or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float">float</a> is permitted, but is not allowed to change 7.1572 the computed value of <a class="property" data-link-type="propdesc">display-inside</a>. 7.1573 (Since <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> only 7.1574 applies to block containers, flex containers, and grid containers 7.1575 - the computed value of <a class="property" data-link-type="propdesc">display-inside</a> is always 7.1576 - <span class="css">block</span>, <span class="css">flex</span>, or 7.1577 - <span class="css">grid</span>. 7.1578 - <span class="issue" id="issue-d98e732d"><a class="self-link" href="#issue-d98e732d"></a>Need to specify exactly how this works, 7.1579 + the computed value of <a class="property" data-link-type="propdesc">display-inside</a> is always <span class="css">block</span>, <span class="css">flex</span>, or <span class="css">grid</span>. <span class="issue" id="issue-d98e732d"><a class="self-link" href="#issue-d98e732d"></a>Need to specify exactly how this works, 7.1580 but it depends on 7.1581 - having <a class="property" data-link-type="propdesc">display-inside</a> and <a class="property" data-link-type="propdesc">display-outside</a> specified.</span> 7.1582 - </p> 7.1583 - 7.1584 - 7.1585 - <p> 7.1586 - To match the model for other pseudo-elements 7.1587 + having <a class="property" data-link-type="propdesc">display-inside</a> and <a class="property" data-link-type="propdesc">display-outside</a> specified.</span> </p> 7.1588 + <p> To match the model for other pseudo-elements 7.1589 where the pseudo-elements live inside their corresponding element, 7.1590 declarations in <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements override 7.1591 declarations in rules without the pseudo-element. 7.1592 The relative priority within such declarations is determined 7.1593 - by normal cascading order (see <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>). 7.1594 - </p> 7.1595 - 7.1596 - 7.1597 - <p> 7.1598 - Styles specified on <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements 7.1599 + by normal cascading order (see <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>). </p> 7.1600 + <p> Styles specified on <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements 7.1601 do affect inheritance to content within the <a data-link-type="dfn" href="#fragment-box">fragment box</a>. 7.1602 In other words, the content within the <a data-link-type="dfn" href="#fragment-box">fragment box</a> must 7.1603 inherit from the fragment box’s style (i.e., the pseudo-element style) 7.1604 rather than directly from the element. 7.1605 This means that elements split between fragment boxes may 7.1606 - have different styles for different parts of the element. 7.1607 - </p> 7.1608 - 7.1609 - 7.1610 - <p class="issue" id="issue-d95b27f9"><a class="self-link" href="#issue-d95b27f9"></a> 7.1611 - This inheritance rule allows specifying styles indirectly 7.1612 - (by using explicit <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-cascade-4/#valdef-all-inherit">inherit</a> or using default inheritance 7.1613 - on properties that don’t apply to <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a>) 7.1614 + have different styles for different parts of the element. </p> 7.1615 + <p class="issue" id="issue-d95b27f9"><a class="self-link" href="#issue-d95b27f9"></a> This inheritance rule allows specifying styles indirectly 7.1616 + (by using explicit <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">inherit</a> or using default inheritance 7.1617 + on properties that don’t apply to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a>) 7.1618 that can’t be specified directly 7.1619 (based on the rules in the next section). 7.1620 This is a problem. 7.1621 The restrictions that apply to styling inside fragments 7.1622 - should also apply to inheritance from fragments. 7.1623 - </p> 7.1624 - 7.1625 - 7.1626 - <div class="example" id="example-539b7bce"><a class="self-link" href="#example-539b7bce"></a> 7.1627 - 7.1628 + should also apply to inheritance from fragments. </p> 7.1629 + <div class="example" id="example-539b7bce"> 7.1630 + <a class="self-link" href="#example-539b7bce"></a> 7.1631 <table class="source-demo-pair"> 7.1632 <tbody> 7.1633 <tr> 7.1634 <td> 7.1635 - <pre><!DOCTYPE HTML> 7.1636 +<pre><!DOCTYPE HTML> 7.1637 <style> 7.1638 .article { 7.1639 continue: fragments; 7.1640 @@ -1526,88 +966,49 @@ 7.1641 The <code>font-size</code> property<i>...</i> 7.1642 </div></pre> 7.1643 <td> 7.1644 - 7.1645 <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div> 7.1646 - 7.1647 - 7.1648 <div class="article-font-inherit-demo two">descendants of the fragment.<br>This means that inherited<br>properties can be used<br>reliably on a fragment, as in<br>this example.</div> 7.1649 - 7.1650 - 7.1651 </table> 7.1652 - 7.1653 - 7.1654 </div> 7.1655 - 7.1656 - 7.1657 <h4 class="heading settled" data-level="6.1.3" id="style-in-fragments"><span class="secno">6.1.3. </span><span class="content">Styling inside fragments</span><a class="self-link" href="#style-in-fragments"></a></h4> 7.1658 - 7.1659 - 7.1660 - <p class="issue" id="issue-d00a7cbb"><a class="self-link" href="#issue-d00a7cbb"></a> 7.1661 - Should this apply to continue:fragments only, 7.1662 - or also to continue:paginate? 7.1663 - </p> 7.1664 - 7.1665 - 7.1666 - <p> 7.1667 - The <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element 7.1668 + <p class="issue" id="issue-d00a7cbb"><a class="self-link" href="#issue-d00a7cbb"></a> Should this apply to continue:fragments only, 7.1669 + or also to continue:paginate? </p> 7.1670 + <p> The <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element 7.1671 can also be used to style 7.1672 content inside of a <a data-link-type="dfn" href="#fragment-box">fragment box</a>. 7.1673 - Unlike the <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-line">::first-line</a> and <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-elements, 7.1674 + Unlike the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line">::first-line</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-elements, 7.1675 the <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element can be applied 7.1676 to parts of the selector other than the subject: 7.1677 in particular, it can match ancestors of the subject. 7.1678 However, the only CSS properties applied 7.1679 by rules with such selectors 7.1680 are those that apply 7.1681 - to the <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-element. 7.1682 - </p> 7.1683 - 7.1684 - 7.1685 - <p> 7.1686 - To be more precise, 7.1687 + to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-element. </p> 7.1688 + <p> To be more precise, 7.1689 when a rule’s selector has <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements 7.1690 attached to parts of the selector other than the subject, 7.1691 the declarations in that rule apply to 7.1692 - a fragment (or pseudo-element thereof) when: 7.1693 - </p> 7.1694 - 7.1695 + a fragment (or pseudo-element thereof) when: </p> 7.1696 <ol> 7.1697 - 7.1698 - <li> 7.1699 - the declarations are for properties that apply to the 7.1700 - <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-element, 7.1701 - 7.1702 - 7.1703 - 7.1704 - <li> 7.1705 - the declarations would apply to 7.1706 + <li> the declarations are for properties that apply to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-element, 7.1707 + <li> the declarations would apply to 7.1708 that fragment (or pseudo-element thereof) 7.1709 had those <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements been removed, 7.1710 with a particular association between 7.1711 each sequence of simple selectors and the element it matched, 7.1712 - and 7.1713 - 7.1714 - 7.1715 - 7.1716 - <li> 7.1717 - for each removed <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element, 7.1718 - the fragment lives within a <a data-link-type="dfn" href="#fragment-box">fragment box</a> 7.1719 - of the element associated in that association 7.1720 + and 7.1721 + <li> for each removed <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element, 7.1722 + the fragment lives within a <a data-link-type="dfn" href="#fragment-box">fragment box</a> of the element associated in that association 7.1723 with the selector that the pseudo-element was attached to, 7.1724 - and whose index matches the pseudo-element. 7.1725 - 7.1726 - 7.1727 - 7.1728 + and whose index matches the pseudo-element. 7.1729 </ol> 7.1730 - 7.1731 - 7.1732 - <div class="example" id="example-95fb489a"><a class="self-link" href="#example-95fb489a"></a> 7.1733 - 7.1734 + <div class="example" id="example-95fb489a"> 7.1735 + <a class="self-link" href="#example-95fb489a"></a> 7.1736 <table class="source-demo-pair"> 7.1737 <tbody> 7.1738 <tr> 7.1739 <td> 7.1740 - <pre><!DOCTYPE HTML> 7.1741 +<pre><!DOCTYPE HTML> 7.1742 <style> 7.1743 .dark-columns { 7.1744 continue: fragments; 7.1745 @@ -1641,25 +1042,12 @@ 7.1746 <i>...</i> 7.1747 </div></pre> 7.1748 <td> 7.1749 - 7.1750 <div class="dark-columns-demo one">In this<br><a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>text flows<br>from one<br>light-colored<br>fragment into<br>another<br>dark-colored</div> 7.1751 - 7.1752 - 7.1753 <div class="dark-columns-demo two">fragment. We<br>therefore want<br>different styles<br>for <a href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>in the different<br>fragments.</div> 7.1754 - 7.1755 - 7.1756 </table> 7.1757 - 7.1758 - 7.1759 </div> 7.1760 - 7.1761 - 7.1762 - 7.1763 <h3 class="heading settled" data-level="6.2" id="max-lines"><span class="secno">6.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-max-lines">max-lines</a> property</span><a class="self-link" href="#max-lines"></a></h3> 7.1764 - 7.1765 - 7.1766 - <p> 7.1767 - Authors may wish to style the opening lines of an element 7.1768 + <p> Authors may wish to style the opening lines of an element 7.1769 with different styles 7.1770 by putting those opening lines in a separate fragment. 7.1771 However, since it may be difficult to predict the exact height 7.1772 @@ -1670,18 +1058,15 @@ 7.1773 after a specified number of lines. 7.1774 This forces a break after the given number of lines 7.1775 contained within the element or its descendants, 7.1776 - as long as those lines are in the same block formatting context. 7.1777 - </p> 7.1778 - 7.1779 - 7.1780 - <table class="definition propdef" data-link-for-hint="max-lines"> 7.1781 + as long as those lines are in the same block formatting context. </p> 7.1782 + <table class="def propdef" data-link-for-hint="max-lines"> 7.1783 <tbody> 7.1784 <tr> 7.1785 <th>Name: 7.1786 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-max-lines">max-lines<a class="self-link" href="#propdef-max-lines"></a></dfn> 7.1787 <tr class="value"> 7.1788 <th>Value: 7.1789 - <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-max-lines-none">none</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-max-lines-integer"><integer></a> 7.1790 + <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-max-lines-none">none</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-max-lines-integer"><integer></a> 7.1791 <tr> 7.1792 <th>Initial: 7.1793 <td><a class="css" data-link-type="maybe" href="#valdef-max-lines-none">none</a> 7.1794 @@ -1702,82 +1087,46 @@ 7.1795 <td>specified value 7.1796 <tr> 7.1797 <th>Animatable: 7.1798 - <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a> 7.1799 + <td>as <a href="https://www.w3.org/TR/css3-transitions/#animatable-types">integer</a> 7.1800 <tr> 7.1801 <th>Canonical order: 7.1802 - <td><abbr title="follows order of property value definition">per grammar</abbr></table> 7.1803 - 7.1804 - 7.1805 + <td><abbr title="follows order of property value definition">per grammar</abbr> 7.1806 + </table> 7.1807 <dl> 7.1808 - 7.1809 - <dt><dfn class="css" data-dfn-for="max-lines" data-dfn-type="value" data-export="" id="valdef-max-lines-none">none<a class="self-link" href="#valdef-max-lines-none"></a></dfn> 7.1810 - 7.1811 + <dt><dfn class="css" data-dfn-for="max-lines" data-dfn-type="value" data-export="" id="valdef-max-lines-none">none<a class="self-link" href="#valdef-max-lines-none"></a></dfn> 7.1812 <dd> 7.1813 - 7.1814 - <p> 7.1815 - Breaks occur only as specified elsewhere. 7.1816 - </p> 7.1817 - 7.1818 - 7.1819 - 7.1820 - 7.1821 - 7.1822 - <dt><dfn class="css" data-dfn-for="max-lines" data-dfn-type="value" data-export="" id="valdef-max-lines-integer"><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#integer-value"><integer></a><a class="self-link" href="#valdef-max-lines-integer"></a></dfn> 7.1823 - 7.1824 + <p> Breaks occur only as specified elsewhere. </p> 7.1825 + <dt><dfn class="css" data-dfn-for="max-lines" data-dfn-type="value" data-export="" id="valdef-max-lines-integer"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value"><integer></a><a class="self-link" href="#valdef-max-lines-integer"></a></dfn> 7.1826 <dd> 7.1827 - 7.1828 - <p> 7.1829 - In addition to any breaks specified elsewhere, 7.1830 + <p> In addition to any breaks specified elsewhere, 7.1831 a break is forced before any line that would exceed 7.1832 the given number of lines 7.1833 being placed inside the element 7.1834 (excluding lines that are in 7.1835 a different block formatting context from 7.1836 the block formatting context to which 7.1837 - an unstyled child of the element would belong). 7.1838 - </p> 7.1839 - 7.1840 - 7.1841 - 7.1842 - <p class="issue" id="issue-9488ec29"><a class="self-link" href="#issue-9488ec29"></a> 7.1843 - If there are multiple boundaries between this line 7.1844 + an unstyled child of the element would belong). </p> 7.1845 + <p class="issue" id="issue-9488ec29"><a class="self-link" href="#issue-9488ec29"></a> If there are multiple boundaries between this line 7.1846 and the previous, where exactly (in terms of element 7.1847 - boundaries) is the break forced? 7.1848 - </p> 7.1849 - 7.1850 - 7.1851 - 7.1852 - <p> 7.1853 - Only positive integers are accepted. 7.1854 - Zero or negative integers are a parse error. 7.1855 - </p> 7.1856 - 7.1857 - 7.1858 - 7.1859 - 7.1860 + boundaries) is the break forced? </p> 7.1861 + <p> Only positive integers are accepted. 7.1862 + Zero or negative integers are a parse error. </p> 7.1863 </dl> 7.1864 - 7.1865 - 7.1866 <p class="issue" id="issue-f6e7b6c3"><a class="self-link" href="#issue-f6e7b6c3"></a>Should this apply to fragment overflow only, or also 7.1867 to pagination? 7.1868 Given what we’re doing with the continue property, 7.1869 it should actually apply to any fragmentainer.</p> 7.1870 - 7.1871 - 7.1872 <p class="issue" id="issue-13fa8ed4"><a class="self-link" href="#issue-13fa8ed4"></a> having max-lines do nothing on regular elements is not ideal. 7.1873 When applied to non fragmentainers, 7.1874 -it should probably cause <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> to compute to <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a> 7.1875 -so that you only need to reach for one property rather than 2 to get 7.1876 +it should probably cause <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> to compute to <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a> so that you only need to reach for one property rather than 2 to get 7.1877 that effect.</p> 7.1878 - 7.1879 - 7.1880 - <div class="example" id="example-9f00def3"><a class="self-link" href="#example-9f00def3"></a> 7.1881 - 7.1882 + <div class="example" id="example-9f00def3"> 7.1883 + <a class="self-link" href="#example-9f00def3"></a> 7.1884 <table class="source-demo-pair"> 7.1885 <tbody> 7.1886 <tr> 7.1887 <td> 7.1888 - <pre><!DOCTYPE HTML> 7.1889 +<pre><!DOCTYPE HTML> 7.1890 <style> 7.1891 .article { 7.1892 continue: fragments; 7.1893 @@ -1798,43 +1147,21 @@ 7.1894 <i>...</i> 7.1895 </div></pre> 7.1896 <td> 7.1897 - 7.1898 <div class="article-max-lines-demo one">The max-lines property allows<br>authors to use a larger font for the first<br>few lines of an article. Without the</div> 7.1899 - 7.1900 - 7.1901 - <div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br><a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-height">height</a> property instead, but<br>that would leave a slight gap<br>if the author miscalculated<br>how much height a given<br>number of lines would<br>occupy (which might be</div> 7.1902 - 7.1903 - 7.1904 + <div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a> property instead, but<br>that would leave a slight gap<br>if the author miscalculated<br>how much height a given<br>number of lines would<br>occupy (which might be</div> 7.1905 <div class="article-max-lines-demo three">particularly hard if the author<br>didn’t know what text would<br>be filling the space, exactly<br>what font would be used, or<br>exactly which platform’s font<br>rendering would be used to<br>display the font).</div> 7.1906 - 7.1907 - 7.1908 </table> 7.1909 - 7.1910 - 7.1911 </div> 7.1912 - 7.1913 - 7.1914 <h2 class="heading settled" data-level="7" id="static-media"><span class="secno">7. </span><span class="content">Overflow in static media</span><a class="self-link" href="#static-media"></a></h2> 7.1915 - 7.1916 - 7.1917 - <p class="issue" id="issue-de91ba9b"><a class="self-link" href="#issue-de91ba9b"></a> 7.1918 - This specification should define useful behavior 7.1919 - for all values of <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> and <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> 7.1920 - in static media (such as print). 7.1921 + <p class="issue" id="issue-de91ba9b"><a class="self-link" href="#issue-de91ba9b"></a> This specification should define useful behavior 7.1922 + for all values of <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> and <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> in static media (such as print). 7.1923 Current implementation behavior is quite poor and 7.1924 produces unexpected results when authors have not considered 7.1925 what will happen when 7.1926 the content they produce for interactive media 7.1927 - is printed. 7.1928 - </p> 7.1929 - 7.1930 - 7.1931 - <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> 7.1932 -Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2> 7.1933 - 7.1934 - 7.1935 - <p> 7.1936 - Thanks especially to the feedback from 7.1937 + is printed. </p> 7.1938 + <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2> 7.1939 + <p> Thanks especially to the feedback from 7.1940 Rossen Atanassov, 7.1941 Bert Bos, 7.1942 Tantek Çelik, 7.1943 @@ -1848,289 +1175,225 @@ 7.1944 Florian Rivoal, 7.1945 Alan Stearns, 7.1946 Steve Zilles, 7.1947 - and all the rest of the 7.1948 - <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community. 7.1949 - </p> 7.1950 - 7.1951 -</main> 7.1952 - 7.1953 - <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> 7.1954 -Conformance</span><a class="self-link" href="#conformance"></a></h2> 7.1955 - 7.1956 - 7.1957 - <h3 class="no-ref heading settled" id="conventions"><span class="content"> 7.1958 -Document conventions</span><a class="self-link" href="#conventions"></a></h3> 7.1959 - 7.1960 - 7.1961 + and all the rest of the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community. </p> 7.1962 + </main> 7.1963 + <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2> 7.1964 + <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3> 7.1965 <p>Conformance requirements are expressed with a combination of 7.1966 - descriptive assertions and RFC 2119 terminology. The key words "MUST", 7.1967 - "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", 7.1968 - "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this 7.1969 - document are to be interpreted as described in RFC 2119. 7.1970 - However, for readability, these words do not appear in all uppercase 7.1971 - letters in this specification. 7.1972 - 7.1973 - </p> 7.1974 + descriptive assertions and RFC 2119 terminology. The key words “MUST”, 7.1975 + “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 7.1976 + “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 7.1977 + document are to be interpreted as described in RFC 2119. 7.1978 + However, for readability, these words do not appear in all uppercase 7.1979 + letters in this specification. </p> 7.1980 <p>All of the text of this specification is normative except sections 7.1981 - explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p> 7.1982 - 7.1983 - 7.1984 - <p>Examples in this specification are introduced with the words "for example" 7.1985 - or are set apart from the normative text with <code>class="example"</code>, 7.1986 - like this: 7.1987 - 7.1988 - </p> 7.1989 - <div class="example" id="example-f839f6c8"><a class="self-link" href="#example-f839f6c8"></a> 7.1990 - 7.1991 - <p>This is an example of an informative example.</p> 7.1992 - 7.1993 - 7.1994 + explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p> 7.1995 + <p>Examples in this specification are introduced with the words “for example” 7.1996 + or are set apart from the normative text with <code>class="example"</code>, 7.1997 + like this: </p> 7.1998 + <div class="example" id="example-52448c84"> 7.1999 + <a class="self-link" href="#example-52448c84"></a> 7.2000 + <p>This is an example of an informative example. </p> 7.2001 </div> 7.2002 - 7.2003 - 7.2004 - <p>Informative notes begin with the word "Note" and are set apart from the 7.2005 - normative text with <code>class="note"</code>, like this: 7.2006 - 7.2007 - </p> 7.2008 - <p class="note" role="note">Note, this is an informative note.</p> 7.2009 - 7.2010 - 7.2011 + <p>Informative notes begin with the word “Note” and are set apart from the 7.2012 + normative text with <code>class="note"</code>, like this: </p> 7.2013 + <p class="note" role="note">Note, this is an informative note. </p> 7.2014 <p>Advisements are normative sections styled to evoke special attention and are 7.2015 - set apart from other normative text with <code><strong class="advisement"></code>, like 7.2016 - this: 7.2017 - 7.2018 - <strong class="advisement"> 7.2019 - UAs MUST provide an accessible alternative. 7.2020 - </strong> 7.2021 - 7.2022 -</p> 7.2023 - <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> 7.2024 -Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3> 7.2025 - 7.2026 - 7.2027 + set apart from other normative text with <code><strong class="advisement"></code>, like 7.2028 + this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p> 7.2029 + <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3> 7.2030 <p>Conformance to this specification 7.2031 - is defined for three conformance classes: 7.2032 - </p> 7.2033 + is defined for three conformance classes: </p> 7.2034 <dl> 7.2035 - 7.2036 - <dt>style sheet 7.2037 - 7.2038 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 7.2039 - style sheet</a>. 7.2040 - 7.2041 - <dt>renderer 7.2042 - 7.2043 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 7.2044 - that interprets the semantics of a style sheet and renders 7.2045 - documents that use them. 7.2046 - 7.2047 - <dt>authoring tool 7.2048 - 7.2049 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 7.2050 - that writes a style sheet. 7.2051 - 7.2052 + <dt>style sheet 7.2053 + <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS 7.2054 + style sheet</a>. 7.2055 + <dt>renderer 7.2056 + <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders 7.2057 + documents that use them. 7.2058 + <dt>authoring tool 7.2059 + <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 7.2060 </dl> 7.2061 - 7.2062 - 7.2063 <p>A style sheet is conformant to this specification 7.2064 - if all of its statements that use syntax defined in this module are valid 7.2065 - according to the generic CSS grammar and the individual grammars of each 7.2066 - feature defined in this module. 7.2067 - 7.2068 - </p> 7.2069 + if all of its statements that use syntax defined in this module are valid 7.2070 + according to the generic CSS grammar and the individual grammars of each 7.2071 + feature defined in this module. </p> 7.2072 <p>A renderer is conformant to this specification 7.2073 - if, in addition to interpreting the style sheet as defined by the 7.2074 - appropriate specifications, it supports all the features defined 7.2075 - by this specification by parsing them correctly 7.2076 - and rendering the document accordingly. However, the inability of a 7.2077 - UA to correctly render a document due to limitations of the device 7.2078 - does not make the UA non-conformant. (For example, a UA is not 7.2079 - required to render color on a monochrome monitor.) 7.2080 - 7.2081 - </p> 7.2082 + if, in addition to interpreting the style sheet as defined by the 7.2083 + appropriate specifications, it supports all the features defined 7.2084 + by this specification by parsing them correctly 7.2085 + and rendering the document accordingly. However, the inability of a 7.2086 + UA to correctly render a document due to limitations of the device 7.2087 + does not make the UA non-conformant. (For example, a UA is not 7.2088 + required to render color on a monochrome monitor.) </p> 7.2089 <p>An authoring tool is conformant to this specification 7.2090 - if it writes style sheets that are syntactically correct according to the 7.2091 - generic CSS grammar and the individual grammars of each feature in 7.2092 - this module, and meet all other conformance requirements of style sheets 7.2093 - as described in this module. 7.2094 - 7.2095 -</p> 7.2096 - <h3 class="no-ref heading settled" id="partial"><span class="content"> 7.2097 -Partial implementations</span><a class="self-link" href="#partial"></a></h3> 7.2098 - 7.2099 - 7.2100 - <p>So that authors can exploit the forward-compatible parsing rules to 7.2101 - assign fallback values, CSS renderers <strong>must</strong> 7.2102 - treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 7.2103 - as appropriate</a>) any at-rules, properties, property values, keywords, 7.2104 - and other syntactic constructs for which they have no usable level of 7.2105 - support. In particular, user agents <strong>must not</strong> selectively 7.2106 - ignore unsupported component values and honor supported values in a single 7.2107 - multi-value property declaration: if any value is considered invalid 7.2108 - (as unsupported values must be), CSS requires that the entire declaration 7.2109 - be ignored.</p> 7.2110 - 7.2111 - 7.2112 - <h3 class="no-ref heading settled" id="experimental"><span class="content"> 7.2113 -Experimental implementations</span><a class="self-link" href="#experimental"></a></h3> 7.2114 - 7.2115 - 7.2116 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 7.2117 - reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 7.2118 - syntax</a> for proprietary and experimental extensions to CSS. 7.2119 - 7.2120 - </p> 7.2121 - <p>Prior to a specification reaching the Candidate Recommendation stage 7.2122 - in the W3C process, all implementations of a CSS feature are considered 7.2123 - experimental. The CSS Working Group recommends that implementations 7.2124 - use a vendor-prefixed syntax for such features, including those in 7.2125 - W3C Working Drafts. This avoids incompatibilities with future changes 7.2126 - in the draft. 7.2127 - </p> 7.2128 - 7.2129 - 7.2130 - <h3 class="no-ref heading settled" id="testing"><span class="content"> 7.2131 -Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3> 7.2132 - 7.2133 - 7.2134 + if it writes style sheets that are syntactically correct according to the 7.2135 + generic CSS grammar and the individual grammars of each feature in 7.2136 + this module, and meet all other conformance requirements of style sheets 7.2137 + as described in this module. </p> 7.2138 + <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3> 7.2139 + <p>The following sections define several conformance requirements 7.2140 + for implementing CSS responsibly, 7.2141 + in a way that promotes interoperability in the present and future. </p> 7.2142 + <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4> 7.2143 + <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid 7.2144 + (and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>) 7.2145 + any at-rules, properties, property values, keywords, and other syntactic constructs 7.2146 + for which they have no usable level of support</strong>. 7.2147 + In particular, user agents <em>must not</em> selectively ignore 7.2148 + unsupported property values and honor supported values in a single multi-value property declaration: 7.2149 + if any value is considered invalid (as unsupported values must be), 7.2150 + CSS requires that the entire declaration be ignored. </p> 7.2151 + <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4> 7.2152 + <p>To avoid clashes with future stable CSS features, 7.2153 + the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p> 7.2154 + <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4> 7.2155 <p>Once a specification reaches the Candidate Recommendation stage, 7.2156 - non-experimental implementations are possible, and implementors should 7.2157 - release an unprefixed implementation of any CR-level feature they 7.2158 - can demonstrate to be correctly implemented according to spec. 7.2159 - 7.2160 - </p> 7.2161 + implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation 7.2162 + of any CR-level feature they can demonstrate 7.2163 + to be correctly implemented according to spec, 7.2164 + and should avoid exposing a prefixed variant of that feature. </p> 7.2165 <p>To establish and maintain the interoperability of CSS across 7.2166 - implementations, the CSS Working Group requests that non-experimental 7.2167 - CSS renderers submit an implementation report (and, if necessary, the 7.2168 - testcases used for that implementation report) to the W3C before 7.2169 - releasing an unprefixed implementation of any CSS features. Testcases 7.2170 - submitted to W3C are subject to review and correction by the CSS 7.2171 - Working Group. 7.2172 - 7.2173 - </p> 7.2174 + implementations, the CSS Working Group requests that non-experimental 7.2175 + CSS renderers submit an implementation report (and, if necessary, the 7.2176 + testcases used for that implementation report) to the W3C before 7.2177 + releasing an unprefixed implementation of any CSS features. Testcases 7.2178 + submitted to W3C are subject to review and correction by the CSS 7.2179 + Working Group. </p> 7.2180 <p>Further information on submitting testcases and implementation reports 7.2181 - can be found from on the CSS Working Group’s website at 7.2182 - <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 7.2183 - Questions should be directed to the 7.2184 - <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">[email protected]</a> 7.2185 - mailing list. 7.2186 - 7.2187 - 7.2188 - 7.2189 -</p> 7.2190 + can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 7.2191 + Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">[email protected]</a> mailing list. </p> 7.2192 <h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> 7.2193 <h3 class="no-num heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> 7.2194 - <ul class="indexlist"> 7.2195 - <li>3d-preserving child, <a href="#3d_preserving-child">2.2</a> 7.2196 - <li>3d-preserving descendant, <a href="#3d_preserving-descendant">2.2</a> 7.2197 - <li>auto 7.2198 + <ul class="index"> 7.2199 + <li><a href="#3d-preserving-child">3d-preserving child</a><span>, in §2.2</span> 7.2200 + <li><a href="#3d-preserving-descendant">3d-preserving descendant</a><span>, in §2.2</span> 7.2201 + <li> 7.2202 + auto 7.2203 <ul> 7.2204 - <li>value for overflow, overflow-x, overflow-y, <a href="#valdef-overflow-auto">3</a> 7.2205 - <li>value for continue, <a href="#valdef-continue-auto">4</a> 7.2206 + <li><a href="#valdef-overflow-auto">value for overflow, overflow-x, overflow-y</a><span>, in §3</span> 7.2207 + <li><a href="#valdef-continue-auto">value for continue</a><span>, in §4</span> 7.2208 </ul> 7.2209 - <li>border-box overflow, <a href="#border_box-overflow">2.3</a> 7.2210 - <li>border-box overflow rectangle, <a href="#border_box-overflow-rectangle">2.3</a> 7.2211 - <li>border-box overflow region, <a href="#border_box-overflow-region">2.3</a> 7.2212 - <li>clip, <a href="#valdef-overflow-clip">3</a> 7.2213 - <li>continue, <a href="#propdef-continue">4</a> 7.2214 - <li>discard, <a href="#valdef-continue-discard">4</a> 7.2215 - <li>fragment box, <a href="#fragment-box">6</a> 7.2216 - <li>fragments, <a href="#valdef-continue-fragments">4</a> 7.2217 - <li>hidden, <a href="#valdef-overflow-hidden">3</a> 7.2218 - <li>ink overflow, <a href="#ink-overflow0">2.1</a> 7.2219 - <li>ink overflow rectangle, <a href="#ink-overflow-rectangle">2.1</a> 7.2220 - <li>ink overflow region, <a href="#ink-overflow-region">2.1</a> 7.2221 - <li><integer>, <a href="#valdef-max-lines-integer">6.2</a> 7.2222 - <li>max-lines, <a href="#propdef-max-lines">6.2</a> 7.2223 - <li>non-3d-preserving child, <a href="#non_3d_preserving-child">2.2</a> 7.2224 - <li>none, <a href="#valdef-max-lines-none">6.2</a> 7.2225 - <li>::nth-fragment(), <a href="#selectordef-nth-fragment">6.1.1</a> 7.2226 - <li>overflow 7.2227 + <li><a href="#border-box-overflow0">border-box overflow</a><span>, in §2.3</span> 7.2228 + <li><a href="#border-box-overflow-rectangle">border-box overflow rectangle</a><span>, in §2.3</span> 7.2229 + <li><a href="#border-box-overflow-region">border-box overflow region</a><span>, in §2.3</span> 7.2230 + <li><a href="#valdef-overflow-clip">clip</a><span>, in §3</span> 7.2231 + <li><a href="#propdef-continue">continue</a><span>, in §4</span> 7.2232 + <li><a href="#valdef-continue-discard">discard</a><span>, in §4</span> 7.2233 + <li><a href="#fragment-box">fragment box</a><span>, in §6</span> 7.2234 + <li><a href="#valdef-continue-fragments">fragments</a><span>, in §4</span> 7.2235 + <li><a href="#valdef-overflow-hidden">hidden</a><span>, in §3</span> 7.2236 + <li><a href="#ink-overflow0">ink overflow</a><span>, in §2.1</span> 7.2237 + <li><a href="#ink-overflow-rectangle">ink overflow rectangle</a><span>, in §2.1</span> 7.2238 + <li><a href="#ink-overflow-region">ink overflow region</a><span>, in §2.1</span> 7.2239 + <li><a href="#valdef-max-lines-integer"><integer></a><span>, in §6.2</span> 7.2240 + <li><a href="#propdef-max-lines">max-lines</a><span>, in §6.2</span> 7.2241 + <li><a href="#non-3d-preserving-child">non-3d-preserving child</a><span>, in §2.2</span> 7.2242 + <li><a href="#valdef-max-lines-none">none</a><span>, in §6.2</span> 7.2243 + <li><a href="#selectordef-nth-fragment">::nth-fragment()</a><span>, in §6.1.1</span> 7.2244 + <li> 7.2245 + overflow 7.2246 <ul> 7.2247 - <li>definition of, <a href="#overflow">2</a> 7.2248 - <li>(property), <a href="#propdef-overflow">3</a> 7.2249 - <li>value for continue, <a href="#valdef-continue-overflow">4</a> 7.2250 + <li><a href="#overflow">definition of</a><span>, in §2</span> 7.2251 + <li><a href="#propdef-overflow">(property)</a><span>, in §3</span> 7.2252 + <li><a href="#valdef-continue-overflow">value for continue</a><span>, in §4</span> 7.2253 </ul> 7.2254 - <li>overflow-x, <a href="#propdef-overflow-x">3</a> 7.2255 - <li>overflow-y, <a href="#propdef-overflow-y">3</a> 7.2256 - <li>paginate, <a href="#valdef-continue-paginate">4</a> 7.2257 - <li>scroll, <a href="#valdef-overflow-scroll">3</a> 7.2258 - <li>scrollable overflow, <a href="#scrollable-overflow0">2.2</a> 7.2259 - <li>scrollable overflow rectangle, <a href="#scrollable-overflow-rectangle">2.2</a> 7.2260 - <li>scrollable overflow region, <a href="#scrollable-overflow-region">2.2</a> 7.2261 - <li>visible, <a href="#valdef-overflow-visible">3</a> 7.2262 + <li><a href="#propdef-overflow-x">overflow-x</a><span>, in §3</span> 7.2263 + <li><a href="#propdef-overflow-y">overflow-y</a><span>, in §3</span> 7.2264 + <li><a href="#valdef-continue-paginate">paginate</a><span>, in §4</span> 7.2265 + <li><a href="#valdef-overflow-scroll">scroll</a><span>, in §3</span> 7.2266 + <li><a href="#scrollable-overflow0">scrollable overflow</a><span>, in §2.2</span> 7.2267 + <li><a href="#scrollable-overflow-rectangle">scrollable overflow rectangle</a><span>, in §2.2</span> 7.2268 + <li><a href="#scrollable-overflow-region">scrollable overflow region</a><span>, in §2.2</span> 7.2269 + <li><a href="#valdef-overflow-visible">visible</a><span>, in §3</span> 7.2270 </ul> 7.2271 <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> 7.2272 - <ul class="indexlist"> 7.2273 - <li><a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> defines the following terms: 7.2274 + <ul class="index"> 7.2275 + <li> 7.2276 + <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> defines the following terms: 7.2277 <ul> 7.2278 - <li><a href="http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow">box-shadow</a> 7.2279 + <li><a href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow">box-shadow</a> 7.2280 </ul> 7.2281 - <li><a data-link-type="biblio" href="#biblio-css-break-3">[css-break-3]</a> defines the following terms: 7.2282 + <li> 7.2283 + <a data-link-type="biblio" href="#biblio-css-break-3">[css-break-3]</a> defines the following terms: 7.2284 <ul> 7.2285 - <li><a href="http://dev.w3.org/csswg/css-break-3/#fragmentation-container">fragmentation container</a> 7.2286 + <li><a href="https://drafts.csswg.org/css-break-3/#fragmentation-container">fragmentation container</a> 7.2287 </ul> 7.2288 - <li><a data-link-type="biblio" href="#biblio-css-cascade-4">[css-cascade-4]</a> defines the following terms: 7.2289 + <li> 7.2290 + <a data-link-type="biblio" href="#biblio-css-cascade-4">[css-cascade-4]</a> defines the following terms: 7.2291 <ul> 7.2292 - <li><a href="http://dev.w3.org/csswg/css-cascade-4/#valdef-all-inherit">inherit</a> 7.2293 + <li><a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">inherit</a> 7.2294 </ul> 7.2295 - <li><a data-link-type="biblio" href="#biblio-css-content-3">[css-content-3]</a> defines the following terms: 7.2296 + <li> 7.2297 + <a data-link-type="biblio" href="#biblio-css-content-3">[css-content-3]</a> defines the following terms: 7.2298 <ul> 7.2299 - <li><a href="http://dev.w3.org/csswg/css-content-3/#propdef-content">content</a> 7.2300 + <li><a href="https://drafts.csswg.org/css-content-3/#propdef-content">content</a> 7.2301 </ul> 7.2302 - <li><a data-link-type="biblio" href="#biblio-css-multicol-1">[css-multicol-1]</a> defines the following terms: 7.2303 + <li> 7.2304 + <a data-link-type="biblio" href="#biblio-css-multicol-1">[css-multicol-1]</a> defines the following terms: 7.2305 <ul> 7.2306 - <li><a href="http://dev.w3.org/csswg/css-multicol-1/#overflow-columns">overflow columns</a> 7.2307 + <li><a href="https://drafts.csswg.org/css-multicol-1/#overflow-columns">overflow columns</a> 7.2308 </ul> 7.2309 - <li><a data-link-type="biblio" href="#biblio-css-position-3">[css-position-3]</a> defines the following terms: 7.2310 + <li> 7.2311 + <a data-link-type="biblio" href="#biblio-css-position-3">[css-position-3]</a> defines the following terms: 7.2312 <ul> 7.2313 - <li><a href="http://dev.w3.org/csswg/css-position-3/#propdef-position">position</a> 7.2314 + <li><a href="https://drafts.csswg.org/css-position-3/#propdef-position">position</a> 7.2315 </ul> 7.2316 - <li><a data-link-type="biblio" href="#biblio-css-pseudo-4">[css-pseudo-4]</a> defines the following terms: 7.2317 + <li> 7.2318 + <a data-link-type="biblio" href="#biblio-css-pseudo-4">[css-pseudo-4]</a> defines the following terms: 7.2319 <ul> 7.2320 - <li><a href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a> 7.2321 - <li><a href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-line">::first-line</a> 7.2322 + <li><a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a> 7.2323 + <li><a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line">::first-line</a> 7.2324 </ul> 7.2325 - <li><a data-link-type="biblio" href="#biblio-css-regions-1">[css-regions-1]</a> defines the following terms: 7.2326 + <li> 7.2327 + <a data-link-type="biblio" href="#biblio-css-regions-1">[css-regions-1]</a> defines the following terms: 7.2328 <ul> 7.2329 - <li><a href="http://dev.w3.org/csswg/css-regions-1/#css-region">css region</a> 7.2330 - <li><a href="http://dev.w3.org/csswg/css-regions-1/#region-chain">region chain</a> 7.2331 - <li><a href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a> 7.2332 + <li><a href="https://drafts.csswg.org/css-regions-1/#css-region">css region</a> 7.2333 + <li><a href="https://drafts.csswg.org/css-regions-1/#region-chain">region chain</a> 7.2334 + <li><a href="https://drafts.csswg.org/css-regions-1/#propdef-region-fragment">region-fragment</a> 7.2335 </ul> 7.2336 - <li><a data-link-type="biblio" href="#biblio-css-text-decor-3">[css-text-decor-3]</a> defines the following terms: 7.2337 + <li> 7.2338 + <a data-link-type="biblio" href="#biblio-css-text-decor-3">[css-text-decor-3]</a> defines the following terms: 7.2339 <ul> 7.2340 - <li><a href="http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-shadow">text-shadow</a> 7.2341 + <li><a href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow">text-shadow</a> 7.2342 </ul> 7.2343 - <li><a data-link-type="biblio" href="#biblio-css-transforms-1">[css-transforms-1]</a> defines the following terms: 7.2344 + <li> 7.2345 + <a data-link-type="biblio" href="#biblio-css-transforms-1">[css-transforms-1]</a> defines the following terms: 7.2346 <ul> 7.2347 - <li><a href="http://dev.w3.org/csswg/css-transforms-1/#propdef-transform-style">transform-style</a> 7.2348 + <li><a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-style">transform-style</a> 7.2349 </ul> 7.2350 - <li><a data-link-type="biblio" href="#biblio-css-ui-3">[css-ui-3]</a> defines the following terms: 7.2351 + <li> 7.2352 + <a data-link-type="biblio" href="#biblio-css-ui-3">[css-ui-3]</a> defines the following terms: 7.2353 <ul> 7.2354 - <li><a href="http://dev.w3.org/csswg/css-ui-3/#propdef-outline">outline</a> 7.2355 + <li><a href="https://drafts.csswg.org/css-ui-3/#propdef-outline">outline</a> 7.2356 </ul> 7.2357 - <li><a data-link-type="biblio" href="#biblio-css-values-3">[css-values-3]</a> defines the following terms: 7.2358 + <li> 7.2359 + <a data-link-type="biblio" href="#biblio-css-values-3">[css-values]</a> defines the following terms: 7.2360 <ul> 7.2361 - <li><a href="http://dev.w3.org/csswg/css-values-3/#integer-value"><integer></a> 7.2362 - <li><a href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> 7.2363 + <li><a href="https://drafts.csswg.org/css-values-3/#integer-value"><integer></a> 7.2364 + <li><a href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> 7.2365 </ul> 7.2366 - <li><a data-link-type="biblio" href="#biblio-css-writing-modes-3">[css-writing-modes-3]</a> defines the following terms: 7.2367 + <li> 7.2368 + <a data-link-type="biblio" href="#biblio-css-writing-modes-3">[css-writing-modes-3]</a> defines the following terms: 7.2369 <ul> 7.2370 - <li><a href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> 7.2371 + <li><a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> 7.2372 </ul> 7.2373 - <li><a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> defines the following terms: 7.2374 + <li> 7.2375 + <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> defines the following terms: 7.2376 <ul> 7.2377 - <li><a href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> 7.2378 - <li><a href="http://dev.w3.org/csswg/css2/visuren.html#propdef-float">float</a> 7.2379 - <li><a href="http://dev.w3.org/csswg/css2/visudet.html#propdef-height">height</a> 7.2380 + <li><a href="https://drafts.csswg.org/css2/visuren.html#propdef-display">display</a> 7.2381 + <li><a href="https://drafts.csswg.org/css2/visuren.html#propdef-float">float</a> 7.2382 + <li><a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a> 7.2383 </ul> 7.2384 - <li><a data-link-type="biblio" href="#biblio-html">[HTML]</a> defines the following terms: 7.2385 + <li> 7.2386 + <a data-link-type="biblio" href="#biblio-html">[HTML]</a> defines the following terms: 7.2387 <ul> 7.2388 <li><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-body-element">body</a> 7.2389 </ul> 7.2390 - <li><a data-link-type="biblio" href="#biblio-mediaqueries-4">[mediaqueries-4]</a> defines the following terms: 7.2391 + <li> 7.2392 + <a data-link-type="biblio" href="#biblio-mediaqueries-4">[mediaqueries-4]</a> defines the following terms: 7.2393 <ul> 7.2394 - <li><a href="http://dev.w3.org/csswg/mediaqueries-4/#valdef-media-print">print</a> 7.2395 + <li><a href="https://drafts.csswg.org/mediaqueries-4/#valdef-media-print">print</a> 7.2396 </ul> 7.2397 </ul> 7.2398 <h2 class="no-num heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> 7.2399 @@ -2147,17 +1410,17 @@ 7.2400 <dt id="biblio-select"><a class="self-link" href="#biblio-select"></a>[SELECT] 7.2401 <dd>Tantek Çelik; et al. <a href="http://www.w3.org/TR/css3-selectors/">Selectors Level 3</a>. 29 September 2011. REC. URL: <a href="http://www.w3.org/TR/css3-selectors/">http://www.w3.org/TR/css3-selectors/</a> 7.2402 <dt id="biblio-css-backgrounds-3"><a class="self-link" href="#biblio-css-backgrounds-3"></a>[CSS-BACKGROUNDS-3] 7.2403 - <dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a> 7.2404 + <dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="https://www.w3.org/TR/css3-background/">https://www.w3.org/TR/css3-background/</a> 7.2405 <dt id="biblio-css-break-3"><a class="self-link" href="#biblio-css-break-3"></a>[CSS-BREAK-3] 7.2406 - <dd>CSS Fragmentation Module Level 3 URL: <a href="http://www.w3.org/TR/css3-break/">http://www.w3.org/TR/css3-break/</a> 7.2407 + <dd>Rossen Atanassov; Elika Etemad. <a href="http://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 14 January 2016. CR. URL: <a href="http://www.w3.org/TR/css-break-3/">http://www.w3.org/TR/css-break-3/</a> 7.2408 <dt id="biblio-css-cascade-4"><a class="self-link" href="#biblio-css-cascade-4"></a>[CSS-CASCADE-4] 7.2409 - <dd>Elika Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 21 April 2015. WD. URL: <a href="http://www.w3.org/TR/css-cascade-4/">http://www.w3.org/TR/css-cascade-4/</a> 7.2410 + <dd>Elika Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 14 January 2016. CR. URL: <a href="http://www.w3.org/TR/css-cascade-4/">http://www.w3.org/TR/css-cascade-4/</a> 7.2411 <dt id="biblio-css-content-3"><a class="self-link" href="#biblio-css-content-3"></a>[CSS-CONTENT-3] 7.2412 - <dd>CSS Generated Content Module Level 3 URL: <a href="http://dev.w3.org/csswg/css-content-3/">http://dev.w3.org/csswg/css-content-3/</a> 7.2413 + <dd>CSS Generated Content Module Level 3 URL: <a href="https://drafts.csswg.org/css-content-3/">https://drafts.csswg.org/css-content-3/</a> 7.2414 <dt id="biblio-css-multicol-1"><a class="self-link" href="#biblio-css-multicol-1"></a>[CSS-MULTICOL-1] 7.2415 - <dd>CSS Multi-column Layout Module Level 1 URL: <a href="http://www.w3.org/TR/css3-multicol/">http://www.w3.org/TR/css3-multicol/</a> 7.2416 + <dd>CSS Multi-column Layout Module Level 1 URL: <a href="https://www.w3.org/TR/css3-multicol/">https://www.w3.org/TR/css3-multicol/</a> 7.2417 <dt id="biblio-css-position-3"><a class="self-link" href="#biblio-css-position-3"></a>[CSS-POSITION-3] 7.2418 - <dd>CSS Positioned Layout Module Level 3 URL: <a href="http://www.w3.org/TR/css3-positioning/">http://www.w3.org/TR/css3-positioning/</a> 7.2419 + <dd>CSS Positioned Layout Module Level 3 URL: <a href="https://www.w3.org/TR/css3-positioning/">https://www.w3.org/TR/css3-positioning/</a> 7.2420 <dt id="biblio-css-pseudo-4"><a class="self-link" href="#biblio-css-pseudo-4"></a>[CSS-PSEUDO-4] 7.2421 <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="http://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 15 January 2015. WD. URL: <a href="http://www.w3.org/TR/css-pseudo-4/">http://www.w3.org/TR/css-pseudo-4/</a> 7.2422 <dt id="biblio-css-regions-1"><a class="self-link" href="#biblio-css-regions-1"></a>[CSS-REGIONS-1] 7.2423 @@ -2167,21 +1430,21 @@ 7.2424 <dt id="biblio-css-transforms-1"><a class="self-link" href="#biblio-css-transforms-1"></a>[CSS-TRANSFORMS-1] 7.2425 <dd>Simon Fraser; et al. <a href="http://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 26 November 2013. WD. URL: <a href="http://www.w3.org/TR/css-transforms-1/">http://www.w3.org/TR/css-transforms-1/</a> 7.2426 <dt id="biblio-css-ui-3"><a class="self-link" href="#biblio-css-ui-3"></a>[CSS-UI-3] 7.2427 - <dd>CSS Basic User Interface Module Level 3 URL: <a href="http://www.w3.org/TR/css3-ui/">http://www.w3.org/TR/css3-ui/</a> 7.2428 - <dt id="biblio-css-values-3"><a class="self-link" href="#biblio-css-values-3"></a>[CSS-VALUES-3] 7.2429 - <dd>CSS Values and Units Module Level 3 URL: <a href="http://www.w3.org/TR/css3-values/">http://www.w3.org/TR/css3-values/</a> 7.2430 + <dd>Tantek Çelik; Florian Rivoal. <a href="http://www.w3.org/TR/css-ui-3/">CSS Basic User Interface Module Level 3 (CSS3 UI)</a>. 7 July 2015. CR. URL: <a href="http://www.w3.org/TR/css-ui-3/">http://www.w3.org/TR/css-ui-3/</a> 7.2431 + <dt id="biblio-css-values"><a class="self-link" href="#biblio-css-values"></a>[CSS-VALUES] 7.2432 + <dd>Tab Atkins Jr.; Elika Etemad. <a href="http://www.w3.org/TR/css-values/">CSS Values and Units Module Level 3</a>. 11 June 2015. CR. URL: <a href="http://www.w3.org/TR/css-values/">http://www.w3.org/TR/css-values/</a> 7.2433 <dt id="biblio-css-writing-modes-3"><a class="self-link" href="#biblio-css-writing-modes-3"></a>[CSS-WRITING-MODES-3] 7.2434 - <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 20 March 2014. CR. URL: <a href="http://www.w3.org/TR/css-writing-modes-3/">http://www.w3.org/TR/css-writing-modes-3/</a> 7.2435 + <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 15 December 2015. CR. URL: <a href="http://www.w3.org/TR/css-writing-modes-3/">http://www.w3.org/TR/css-writing-modes-3/</a> 7.2436 <dt id="biblio-css3-break"><a class="self-link" href="#biblio-css3-break"></a>[CSS3-BREAK] 7.2437 - <dd>Rossen Atanassov; Elika Etemad. <a href="http://www.w3.org/TR/css3-break/">CSS Fragmentation Module Level 3</a>. 29 January 2015. WD. URL: <a href="http://www.w3.org/TR/css3-break/">http://www.w3.org/TR/css3-break/</a> 7.2438 + <dd>Rossen Atanassov; Elika Etemad. <a href="http://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 14 January 2016. CR. URL: <a href="http://www.w3.org/TR/css-break-3/">http://www.w3.org/TR/css-break-3/</a> 7.2439 <dt id="biblio-css3-flexbox"><a class="self-link" href="#biblio-css3-flexbox"></a>[CSS3-FLEXBOX] 7.2440 <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 14 May 2015. LCWD. URL: <a href="http://www.w3.org/TR/css-flexbox-1/">http://www.w3.org/TR/css-flexbox-1/</a> 7.2441 <dt id="biblio-css3-grid-layout"><a class="self-link" href="#biblio-css3-grid-layout"></a>[CSS3-GRID-LAYOUT] 7.2442 - <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 17 March 2015. WD. URL: <a href="http://www.w3.org/TR/css-grid-1/">http://www.w3.org/TR/css-grid-1/</a> 7.2443 + <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 17 September 2015. WD. URL: <a href="http://www.w3.org/TR/css-grid-1/">http://www.w3.org/TR/css-grid-1/</a> 7.2444 <dt id="biblio-css3-transforms"><a class="self-link" href="#biblio-css3-transforms"></a>[CSS3-TRANSFORMS] 7.2445 <dd>Simon Fraser; et al. <a href="http://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 26 November 2013. WD. URL: <a href="http://www.w3.org/TR/css-transforms-1/">http://www.w3.org/TR/css-transforms-1/</a> 7.2446 <dt id="biblio-mediaqueries-4"><a class="self-link" href="#biblio-mediaqueries-4"></a>[MEDIAQUERIES-4] 7.2447 - <dd>Florian Rivoal; Tab Atkins Jr.. <a href="http://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a>. 5 June 2014. WD. URL: <a href="http://www.w3.org/TR/mediaqueries-4/">http://www.w3.org/TR/mediaqueries-4/</a> 7.2448 + <dd>Florian Rivoal; Tab Atkins Jr.. <a href="http://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a>. 26 January 2016. WD. URL: <a href="http://www.w3.org/TR/mediaqueries-4/">http://www.w3.org/TR/mediaqueries-4/</a> 7.2449 <dt id="biblio-rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[RFC2119] 7.2450 <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a> 7.2451 </dl> 7.2452 @@ -2205,142 +1468,124 @@ 7.2453 <dd>Simon Pieters; Glenn Adams. <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a>. 17 December 2013. WD. URL: <a href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a> 7.2454 </dl> 7.2455 <h2 class="no-num heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> 7.2456 - <table class="proptable data"> 7.2457 - <thead> 7.2458 - <tr> 7.2459 - <th scope="col">Name 7.2460 - <th scope="col">Value 7.2461 - <th scope="col">Initial 7.2462 - <th scope="col">Applies to 7.2463 - <th scope="col">Inh. 7.2464 - <th scope="col">%ages 7.2465 - <th scope="col">Media 7.2466 - <th scope="col">Animatable 7.2467 - <th scope="col">Canonical order 7.2468 - <th scope="col">Computed value 7.2469 - <tbody> 7.2470 - <tr> 7.2471 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-x">overflow-x</a> 7.2472 - <td>visible | hidden | clip | scroll | auto 7.2473 - <td>visible 7.2474 - <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 7.2475 - <td>no 7.2476 - <td>N/A 7.2477 - <td>visual 7.2478 - <td>no 7.2479 - <td>per grammar 7.2480 - <td>see below 7.2481 - <tr> 7.2482 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-y">overflow-y</a> 7.2483 - <td>visible | hidden | clip | scroll | auto 7.2484 - <td>visible 7.2485 - <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 7.2486 - <td>no 7.2487 - <td>N/A 7.2488 - <td>visual 7.2489 - <td>no 7.2490 - <td>per grammar 7.2491 - <td>see below 7.2492 - <tr> 7.2493 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow">overflow</a> 7.2494 - <td>visible | hidden | clip | scroll | auto 7.2495 - <td>see individual properties 7.2496 - <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 7.2497 - <td>no 7.2498 - <td>N/A 7.2499 - <td>visual 7.2500 - <td>no 7.2501 - <td>per grammar 7.2502 - <td>see individual properties 7.2503 - <tr> 7.2504 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-continue">continue</a> 7.2505 - <td>auto | overflow | paginate | fragments | discard 7.2506 - <td>auto 7.2507 - <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 7.2508 - <td>no 7.2509 - <td>N/A 7.2510 - <td>visual 7.2511 - <td>no 7.2512 - <td>per grammar 7.2513 - <td>see below 7.2514 - <tr> 7.2515 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-max-lines">max-lines</a> 7.2516 - <td>none | <integer> 7.2517 - <td>none 7.2518 - <td>fragment boxes 7.2519 - <td>no 7.2520 - <td>N/A 7.2521 - <td>visual 7.2522 - <td>as integer 7.2523 - <td>per grammar 7.2524 - <td>specified value 7.2525 - </table> 7.2526 + <div class="big-element-wrapper"> 7.2527 + <table class="index"> 7.2528 + <thead> 7.2529 + <tr> 7.2530 + <th scope="col">Name 7.2531 + <th scope="col">Value 7.2532 + <th scope="col">Initial 7.2533 + <th scope="col">Applies to 7.2534 + <th scope="col">Inh. 7.2535 + <th scope="col">%ages 7.2536 + <th scope="col">Media 7.2537 + <th scope="col">Animatable 7.2538 + <th scope="col">Canonical order 7.2539 + <th scope="col">Computed value 7.2540 + <tbody> 7.2541 + <tr> 7.2542 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-x">overflow-x</a> 7.2543 + <td>visible | hidden | clip | scroll | auto 7.2544 + <td>visible 7.2545 + <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 7.2546 + <td>no 7.2547 + <td>N/A 7.2548 + <td>visual 7.2549 + <td>no 7.2550 + <td>per grammar 7.2551 + <td>see below 7.2552 + <tr> 7.2553 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-y">overflow-y</a> 7.2554 + <td>visible | hidden | clip | scroll | auto 7.2555 + <td>visible 7.2556 + <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 7.2557 + <td>no 7.2558 + <td>N/A 7.2559 + <td>visual 7.2560 + <td>no 7.2561 + <td>per grammar 7.2562 + <td>see below 7.2563 + <tr> 7.2564 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow">overflow</a> 7.2565 + <td>visible | hidden | clip | scroll | auto 7.2566 + <td>see individual properties 7.2567 + <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 7.2568 + <td>no 7.2569 + <td>N/A 7.2570 + <td>visual 7.2571 + <td>no 7.2572 + <td>per grammar 7.2573 + <td>see individual properties 7.2574 + <tr> 7.2575 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-continue">continue</a> 7.2576 + <td>auto | overflow | paginate | fragments | discard 7.2577 + <td>auto 7.2578 + <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 7.2579 + <td>no 7.2580 + <td>N/A 7.2581 + <td>visual 7.2582 + <td>no 7.2583 + <td>per grammar 7.2584 + <td>see below 7.2585 + <tr> 7.2586 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-max-lines">max-lines</a> 7.2587 + <td>none | <integer> 7.2588 + <td>none 7.2589 + <td>fragment boxes 7.2590 + <td>no 7.2591 + <td>N/A 7.2592 + <td>visual 7.2593 + <td>as integer 7.2594 + <td>per grammar 7.2595 + <td>specified value 7.2596 + </table> 7.2597 + </div> 7.2598 <h2 class="no-num heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2> 7.2599 <div style="counter-reset:issue"> 7.2600 <div class="issue">undefined term?<a href="#issue-18c1c008"> ↵ </a></div> 7.2601 - <div class="issue"> 7.2602 - Should we try to define it at all and just leave pieces undefined? 7.2603 - <a href="#issue-1baddb1e"> ↵ </a></div> 7.2604 - <div class="issue"> 7.2605 - The following definition should be rewritten to use 7.2606 - the concept of <a href="http://dev.w3.org/csswg/css-transforms/#3d-rendering-context">3D rendering context</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> 7.2607 - and related terms, 7.2608 + <div class="issue"> Should we try to define it at all and just leave pieces undefined? <a href="#issue-1baddb1e"> ↵ </a></div> 7.2609 + <div class="issue"> The following definition should be rewritten to use 7.2610 + the concept of <a href="https://drafts.csswg.org/css-transforms/#3d-rendering-context">3D rendering context</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> and related terms, 7.2611 particularly once those concepts stabilize following changes 7.2612 - proposed in the CSS WG meeting on the morning of 2014-01-28. 7.2613 - <a href="#issue-6b232bb5"> ↵ </a></div> 7.2614 + proposed in the CSS WG meeting on the morning of 2014-01-28. <a href="#issue-766655c2"> ↵ </a></div> 7.2615 <div class="issue">which belong in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a><a href="#issue-101a26b2"> ↵ </a></div> 7.2616 <div class="issue">undefined concept!<a href="#issue-1b139c15"> ↵ </a></div> 7.2617 <div class="issue">undefined term!<a href="#issue-2d1dc4f9"> ↵ </a></div> 7.2618 <div class="issue">MORE HERE!<a href="#issue-75780f3f"> ↵ </a></div> 7.2619 - <div class="issue"> 7.2620 - I wrote this definition off the top of my head, 7.2621 + <div class="issue"> I wrote this definition off the top of my head, 7.2622 so it can’t possibly be right. 7.2623 - It’s missing tons of pieces! 7.2624 - <a href="#issue-e889eac0"> ↵ </a></div> 7.2625 - <div class="issue"> 7.2626 - The handling of preserve-3d subtrees here is probably wrong; 7.2627 + It’s missing tons of pieces! <a href="#issue-e889eac0"> ↵ </a></div> 7.2628 + <div class="issue"> The handling of preserve-3d subtrees here is probably wrong; 7.2629 the elements should probably count 7.2630 - only towards the overflow of the element that flattens them. 7.2631 - <a href="#issue-521d48c7"> ↵ </a></div> 7.2632 - <div class="issue"> 7.2633 - This concept has been proposed for some uses, such as for 7.2634 - determining what the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-ui-3/#propdef-outline">outline</a> property goes around, and 7.2635 + only towards the overflow of the element that flattens them. <a href="#issue-521d48c7"> ↵ </a></div> 7.2636 + <div class="issue"> This concept has been proposed for some uses, such as for 7.2637 + determining what the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-3/#propdef-outline">outline</a> property goes around, and 7.2638 as the basis of a coordinate system for specifying clips and masks, 7.2639 - but it’s not clear if it’s needed. 7.2640 - <a href="#issue-3930f393"> ↵ </a></div> 7.2641 - <div class="issue"> 7.2642 - If needed, define more formally, as for scrollable overflow above. 7.2643 - (Maybe even share the definitions in an appropriate way!) 7.2644 - <a href="#issue-42ea3c29"> ↵ </a></div> 7.2645 + but it’s not clear if it’s needed. <a href="#issue-3930f393"> ↵ </a></div> 7.2646 + <div class="issue"> If needed, define more formally, as for scrollable overflow above. 7.2647 + (Maybe even share the definitions in an appropriate way!) <a href="#issue-42ea3c29"> ↵ </a></div> 7.2648 <div class="issue"> Mozilla implements -moz-hidden-unscrollable, 7.2649 which is similar to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>, 7.2650 except that it does not cause the element to establish a BFC. 7.2651 Should we match that?<a href="#issue-a9ea8890"> ↵ </a></div> 7.2652 <div class="issue"> import examples from <a data-link-type="biblio" href="#biblio-css3-box">[CSS3-BOX]</a>.<a href="#issue-402eb70c"> ↵ </a></div> 7.2653 - <div class="issue"> 7.2654 - Explain which directions allow scrolling and which don’t, 7.2655 - as a function of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> 7.2656 - (including propagation of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> to the ICB). 7.2657 - <a href="#issue-c318b1c1"> ↵ </a></div> 7.2658 - <div class="issue"> 7.2659 - <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> describes an <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property, 7.2660 + <div class="issue"> Explain which directions allow scrolling and which don’t, 7.2661 + as a function of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> (including propagation of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> to the ICB). <a href="#issue-c318b1c1"> ↵ </a></div> 7.2662 + <div class="issue"> <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> describes an <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property, 7.2663 but it has not picked up implementation experience 7.2664 that the working group is aware of. 7.2665 - Should this document treat <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> as a defunct proposal, 7.2666 - or should this document describe the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property 7.2667 + Should this document treat <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> as a defunct proposal, 7.2668 + or should this document describe the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property 7.2669 and attempt to revive it, 7.2670 - despite that implementations have implemented 7.2671 - <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> instead? 7.2672 - <a href="#issue-52e2a181"> ↵ </a></div> 7.2673 + despite that implementations have implemented <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> instead? <a href="#issue-52e2a181"> ↵ </a></div> 7.2674 <div class="issue"> The naming of this property and its values is preliminary. 7.2675 This was initially proposed as 7.2676 "fragmentation: auto | none | break | clone | page" 7.2677 in <a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html</a>, 7.2678 and there is not yet wide agreement as to which naming is better.<a href="#issue-b2c6e3da"> ↵ </a></div> 7.2679 - <div class="issue"> This property is meant to generalize and replace <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a>. 7.2680 -Once it is sufficiently stable in this specification, 7.2681 -<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a> should be removed from the regions specification in favor of this.<a href="#issue-d52b3e3d"> ↵ </a></div> 7.2682 - <div class="issue"> When the element isn’t a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-break-3/#fragmentation-container">fragmentation container</a> already, 7.2683 + <div class="issue"> This property is meant to generalize and replace <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-regions-1/#propdef-region-fragment">region-fragment</a>. 7.2684 +Once it is sufficiently stable in this specification, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-regions-1/#propdef-region-fragment">region-fragment</a> should be removed from the regions specification in favor of this.<a href="#issue-d52b3e3d"> ↵ </a></div> 7.2685 + <div class="issue"> When the element isn’t a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragmentation-container">fragmentation container</a> already, 7.2686 should this work by turning it directly into one, 7.2687 or by creating a <a data-link-type="dfn" href="#fragment-box">fragment box</a> inside it like <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> does?<a href="#issue-36be54be"> ↵ </a></div> 7.2688 <div class="issue"> If we introduce a pseudo element that can select columns in a multicol, 7.2689 @@ -2350,17 +1595,15 @@ 7.2690 <div class="issue"> Write this section<a href="#issue-001d5014"> ↵ </a></div> 7.2691 <div class="issue"> Pages should be possible to style with @page rules. How does that work for nested pages?<a href="#issue-338ad0f3"> ↵ </a></div> 7.2692 <div class="issue"> 7.2693 -Should traditional pagination (e.g. when printing) 7.2694 + Should traditional pagination (e.g. when printing) 7.2695 be expressed through some magic in the computed value of <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>, 7.2696 -or by inserting this in the UA stylesheet: 7.2697 - 7.2698 - <pre><code class="lang-css highlight"><span class="k">@media</span> <span class="o">(</span><span class="nt">overflow-block</span><span class="o">:</span> <span class="nt">paged</span><span class="o">),</span> <span class="o">(</span><span class="nt">overflow-block</span><span class="o">:</span> <span class="nt">optional-paged</span><span class="o">)</span> <span class="p">{</span> 7.2699 - <span class="nd">:root</span> <span class="p">{</span> 7.2700 - <span class="n">continue</span><span class="o">:</span> <span class="n">paginate</span><span class="p">;</span> 7.2701 - <span class="p">}</span> 7.2702 -<span class="p">}</span></code></pre> 7.2703 - 7.2704 -<a href="#issue-67ad77e5"> ↵ </a> 7.2705 +or by inserting this in the UA stylesheet: 7.2706 +<pre><code class="lang-css highlight"><span class="n">@media</span> <span class="p">(</span>overflow-block<span class="nt">: paged), (overflow-block: optional-paged) </span><span class="p">{</span> 7.2707 + :root { 7.2708 + continue: paginate; 7.2709 + } 7.2710 +}</code></pre> 7.2711 + <a href="#issue-67ad77e5"> ↵ </a> 7.2712 </div> 7.2713 <div class="issue"> Traditional pagination (e.g. when printing) assumes that 7.2714 :root is contained in the page box, 7.2715 @@ -2379,16 +1622,13 @@ 7.2716 Could this be a value of "pagination-layout", such as: 7.2717 "pagination-layout: horizontal 2;"<a href="#issue-55c97ed8"> ↵ </a></div> 7.2718 <div class="issue"> Brad Kemper has proposed a model for combining pagination and 7.2719 -fragment overflow, which also deals with displaying multiple pages. 7.2720 -<a href="http://www.w3.org/mid/[email protected]">http://www.w3.org/mid/[email protected]</a><a href="#issue-64de292b"> ↵ </a></div> 7.2721 - <div class="issue"> 7.2722 - The current implementation of paginated overflow uses 7.2723 +fragment overflow, which also deals with displaying multiple pages. <a href="http://www.w3.org/mid/[email protected]">http://www.w3.org/mid/[email protected]</a><a href="#issue-64de292b"> ↵ </a></div> 7.2724 + <div class="issue"> The current implementation of paginated overflow uses 7.2725 the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a>/<a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a>/<a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> properties 7.2726 - rather than the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property as proposed 7.2727 + rather than the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property as proposed 7.2728 in the <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> draft 7.2729 (which also matches the <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> proposal). 7.2730 - or the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property as described here. 7.2731 - <a href="#issue-360561bd"> ↵ </a></div> 7.2732 + or the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property as described here. <a href="#issue-360561bd"> ↵ </a></div> 7.2733 <div class="issue">Or is it as though it’s a next sibling of 7.2734 the element? Need to figure out exactly how this interacts with 7.2735 other box-level fixup.<a href="#issue-74f423ed"> ↵ </a></div> 7.2736 @@ -2396,29 +1636,21 @@ 7.2737 <div class="issue">Should a forced break that breaks to 7.2738 an outer fragmentation context cause a new fragment of a single 7.2739 fragment box or a new fragment box?<a href="#issue-060b1de8"> ↵ </a></div> 7.2740 - <div class="issue">Should we find a term other than 7.2741 - <a data-link-type="dfn" href="#fragment-box">fragment box</a> here to make this a little less confusing?<a href="#issue-5b4b087c"> ↵ </a></div> 7.2742 - <div class="issue"> 7.2743 - What if we want to be able to style the pieces of an element 7.2744 + <div class="issue">Should we find a term other than <a data-link-type="dfn" href="#fragment-box">fragment box</a> here to make this a little less confusing?<a href="#issue-5b4b087c"> ↵ </a></div> 7.2745 + <div class="issue"> What if we want to be able to style the pieces of an element 7.2746 split within another type of fragmentation context? 7.2747 These rules prevent ever using <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> for that, 7.2748 - despite that the name seems the most logical name for such a feature. 7.2749 - <a href="#issue-c4f3aedb"> ↵ </a></div> 7.2750 - <div class="issue"> 7.2751 - We should specify that <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> does not apply 7.2752 + despite that the name seems the most logical name for such a feature. <a href="#issue-c4f3aedb"> ↵ </a></div> 7.2753 + <div class="issue"> We should specify that <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> does not apply 7.2754 to at least some table parts, 7.2755 and perhaps other elements as well. 7.2756 - We need to determine exactly which ones. 7.2757 - <a href="#issue-25a84ff4"> ↵ </a></div> 7.2758 - <div class="issue"> 7.2759 - This specification needs to say which type of 7.2760 + We need to determine exactly which ones. <a href="#issue-25a84ff4"> ↵ </a></div> 7.2761 + <div class="issue"> This specification needs to say which type of 7.2762 fragmentation context is created 7.2763 so that it’s clear which values of the <a class="property" data-link-type="propdesc">break-*</a> properties 7.2764 cause breaks within this context. 7.2765 - We probably want <span class="css">break-*: region</span> to apply. 7.2766 - <a href="#issue-6c1669e3"> ↵ </a></div> 7.2767 - <div class="issue"> 7.2768 - This specification needs a processing model 7.2769 + We probably want <span class="css">break-*: region</span> to apply. <a href="#issue-6c1669e3"> ↵ </a></div> 7.2770 + <div class="issue"> This specification needs a processing model 7.2771 that will apply in cases where the layout containing the 7.2772 fragments has characteristics that use the intrinsic size of the fragments 7.2773 to change the amount of space available for them, 7.2774 @@ -2427,63 +1659,49 @@ 7.2775 in <a data-link-type="biblio" href="#biblio-css3-regions">[CSS3-REGIONS]</a>, 7.2776 and the work done on a model there, 7.2777 and the editors of that specification, 7.2778 - should inform what happens in this specification. 7.2779 - <a href="#issue-08d6a80e"> ↵ </a></div> 7.2780 - <div class="issue"> 7.2781 - Depending on future discussions, 7.2782 + should inform what happens in this specification. <a href="#issue-08d6a80e"> ↵ </a></div> 7.2783 + <div class="issue"> Depending on future discussions, 7.2784 this <span class="css">::nth-fragment(an+b)</span> syntax 7.2785 may be replaced with 7.2786 - the new <span class="css">::fragment:nth(an+b)</span> syntax. 7.2787 - <a href="#issue-0e3bec77"> ↵ </a></div> 7.2788 - <div class="issue"> 7.2789 - Should this apply to continue:fragments only, 7.2790 + the new <span class="css">::fragment:nth(an+b)</span> syntax. <a href="#issue-0e3bec77"> ↵ </a></div> 7.2791 + <div class="issue"> Should this apply to continue:fragments only, 7.2792 or also to continue:paginate? 7.2793 (If it applies, 7.2794 then stricter property restrictions would be needed 7.2795 - for continue:paginate.) 7.2796 - <a href="#issue-6e8f615f"> ↵ </a></div> 7.2797 + for continue:paginate.) <a href="#issue-6e8f615f"> ↵ </a></div> 7.2798 <div class="issue">Does this need to be specified in 7.2799 the cascading module as well?<a href="#issue-8f881f96"> ↵ </a></div> 7.2800 <div class="issue">Need to specify exactly how this works, 7.2801 but it depends on 7.2802 having <a class="property" data-link-type="propdesc">display-inside</a> and <a class="property" data-link-type="propdesc">display-outside</a> specified.<a href="#issue-d98e732d"> ↵ </a></div> 7.2803 - <div class="issue"> 7.2804 - This inheritance rule allows specifying styles indirectly 7.2805 - (by using explicit <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-cascade-4/#valdef-all-inherit">inherit</a> or using default inheritance 7.2806 - on properties that don’t apply to <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a>) 7.2807 + <div class="issue"> This inheritance rule allows specifying styles indirectly 7.2808 + (by using explicit <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">inherit</a> or using default inheritance 7.2809 + on properties that don’t apply to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a>) 7.2810 that can’t be specified directly 7.2811 (based on the rules in the next section). 7.2812 This is a problem. 7.2813 The restrictions that apply to styling inside fragments 7.2814 - should also apply to inheritance from fragments. 7.2815 - <a href="#issue-d95b27f9"> ↵ </a></div> 7.2816 - <div class="issue"> 7.2817 - Should this apply to continue:fragments only, 7.2818 - or also to continue:paginate? 7.2819 - <a href="#issue-d00a7cbb"> ↵ </a></div> 7.2820 - <div class="issue"> 7.2821 - If there are multiple boundaries between this line 7.2822 + should also apply to inheritance from fragments. <a href="#issue-d95b27f9"> ↵ </a></div> 7.2823 + <div class="issue"> Should this apply to continue:fragments only, 7.2824 + or also to continue:paginate? <a href="#issue-d00a7cbb"> ↵ </a></div> 7.2825 + <div class="issue"> If there are multiple boundaries between this line 7.2826 and the previous, where exactly (in terms of element 7.2827 - boundaries) is the break forced? 7.2828 - <a href="#issue-9488ec29"> ↵ </a></div> 7.2829 + boundaries) is the break forced? <a href="#issue-9488ec29"> ↵ </a></div> 7.2830 <div class="issue">Should this apply to fragment overflow only, or also 7.2831 to pagination? 7.2832 Given what we’re doing with the continue property, 7.2833 it should actually apply to any fragmentainer.<a href="#issue-f6e7b6c3"> ↵ </a></div> 7.2834 <div class="issue"> having max-lines do nothing on regular elements is not ideal. 7.2835 When applied to non fragmentainers, 7.2836 -it should probably cause <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> to compute to <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a> 7.2837 -so that you only need to reach for one property rather than 2 to get 7.2838 +it should probably cause <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> to compute to <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a> so that you only need to reach for one property rather than 2 to get 7.2839 that effect.<a href="#issue-13fa8ed4"> ↵ </a></div> 7.2840 - <div class="issue"> 7.2841 - This specification should define useful behavior 7.2842 - for all values of <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> and <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> 7.2843 - in static media (such as print). 7.2844 + <div class="issue"> This specification should define useful behavior 7.2845 + for all values of <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> and <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> in static media (such as print). 7.2846 Current implementation behavior is quite poor and 7.2847 produces unexpected results when authors have not considered 7.2848 what will happen when 7.2849 the content they produce for interactive media 7.2850 - is printed. 7.2851 - <a href="#issue-de91ba9b"> ↵ </a></div> 7.2852 - </div></body> 7.2853 + is printed. <a href="#issue-de91ba9b"> ↵ </a></div> 7.2854 + </div> 7.2855 + </body> 7.2856 </html> 7.2857 \ No newline at end of file
8.1 --- a/css-ui-4/Overview.bs Wed Feb 03 19:18:59 2016 +1100 8.2 +++ b/css-ui-4/Overview.bs Thu Feb 04 09:45:32 2016 +1100 8.3 @@ -11,7 +11,7 @@ 8.4 !Issue Tracking: https://wiki.csswg.org/spec/css4-ui#css4-ui-issues-list 8.5 Status: ED 8.6 Work Status: Exploring 8.7 -Editor: Florian Rivoal, Invited Expert, on behalf of Bloomberg, [email protected], http://florian.rivoal.net 8.8 +Editor: Florian Rivoal, On behalf of Bloomberg, [email protected], http://florian.rivoal.net/ 8.9 Ignored Terms: box-sizing, resize, text-overflow, caret-color, nav-up, nav-down, nav-left, nav-right 8.10 Link Defaults: css-position-3 (property) position 8.11 Link Defaults: css21 (property) float
9.1 --- a/css-ui/Overview.bs Wed Feb 03 19:18:59 2016 +1100 9.2 +++ b/css-ui/Overview.bs Thu Feb 04 09:45:32 2016 +1100 9.3 @@ -12,7 +12,7 @@ 9.4 Status: ED 9.5 Work Status: Testing 9.6 Editor: Tantek Çelik, Mozilla https://www.mozilla.org/en-US/, [email protected], http://tantek.com 9.7 -Editor: Florian Rivoal, Invited Expert, [email protected], http://florian.rivoal.net 9.8 +Editor: Florian Rivoal, On behalf of Bloomberg, [email protected], http://florian.rivoal.net/ 9.9 Abstract: This specification describes user interface related 9.10 properties and values that are proposed for CSS level 3 9.11 to style HTML and XML (including XHTML).
10.1 --- a/css-ui/Overview.html Wed Feb 03 19:18:59 2016 +1100 10.2 +++ b/css-ui/Overview.html Thu Feb 04 09:45:32 2016 +1100 10.3 @@ -2,51 +2,15 @@ 10.4 <head> 10.5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 10.6 <title>CSS Basic User Interface Module Level 3 (CSS3 UI)</title> 10.7 + <meta content="width=device-width, initial-scale=1" name="viewport"> 10.8 <meta content="testing" name="csswg-work-status"> 10.9 <meta content="ED" name="w3c-status"> 10.10 <link href="../default.css" rel="stylesheet" type="text/css"> 10.11 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> 10.12 <style> 10.13 body { 10.14 - background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white; 10.15 - background-attachment: fixed; 10.16 - color: black; 10.17 - font-family: sans-serif; 10.18 - margin: 0 auto; 10.19 - max-width: 50em; 10.20 - padding: 2em 1em 2em 70px; 10.21 - } 10.22 - :link { color: #00C; background: transparent } 10.23 - :visited { color: #609; background: transparent } 10.24 - a[href]:active { color: #C00; background: transparent } 10.25 - a[href]:hover { background: #ffa } 10.26 - 10.27 - a[href] img { border-style: none } 10.28 - 10.29 - h1, h2, h3, h4, h5, h6 { text-align: left } 10.30 - h1, h2, h3 { color: #005A9C; } 10.31 - h1 { font: 170% sans-serif } 10.32 - h2 { font: 140% sans-serif } 10.33 - h3 { font: 120% sans-serif } 10.34 - h4 { font: bold 100% sans-serif } 10.35 - h5 { font: italic 100% sans-serif } 10.36 - h6 { font: small-caps 100% sans-serif } 10.37 - 10.38 - .hide { display: none } 10.39 - 10.40 - div.head { margin-bottom: 1em } 10.41 - div.head h1 { margin-top: 2em; clear: both } 10.42 - div.head table { margin-left: 2em; margin-top: 2em } 10.43 - 10.44 - p.copyright { font-size: small } 10.45 - p.copyright small { font-size: small } 10.46 - 10.47 - pre { margin-left: 2em } 10.48 - dt { font-weight: bold } 10.49 - 10.50 - ul.toc, ol.toc { 10.51 - list-style: none; 10.52 - } 10.53 + background-image: url("https://www.w3.org/StyleSheets/TR/logo-ED"); 10.54 + }; 10.55 </style> 10.56 <meta content="Bikeshed 1.0.0" name="generator"> 10.57 <script defer="" src="//test.csswg.org/harness/annotate.js#css-ui-3_dev/css-ui-3" type="text/javascript"></script> 10.58 @@ -55,7 +19,7 @@ 10.59 .highlight { background: #ffffff; } 10.60 .highlight .c { color: #708090 } /* Comment */ 10.61 .highlight .k { color: #990055 } /* Keyword */ 10.62 -.highlight .l { color: #669900 } /* Literal */ 10.63 +.highlight .l { color: #000000 } /* Literal */ 10.64 .highlight .n { color: #0077aa } /* Name */ 10.65 .highlight .o { color: #999999 } /* Operator */ 10.66 .highlight .p { color: #999999 } /* Punctuation */ 10.67 @@ -69,9 +33,9 @@ 10.68 .highlight .kp { color: #990055 } /* Keyword.Pseudo */ 10.69 .highlight .kr { color: #990055 } /* Keyword.Reserved */ 10.70 .highlight .kt { color: #990055 } /* Keyword.Type */ 10.71 -.highlight .ld { color: #669900 } /* Literal.Date */ 10.72 -.highlight .m { color: #990055 } /* Literal.Number */ 10.73 -.highlight .s { color: #669900 } /* Literal.String */ 10.74 +.highlight .ld { color: #000000 } /* Literal.Date */ 10.75 +.highlight .m { color: #000000 } /* Literal.Number */ 10.76 +.highlight .s { color: #a67f59 } /* Literal.String */ 10.77 .highlight .na { color: #0077aa } /* Name.Attribute */ 10.78 .highlight .nc { color: #0077aa } /* Name.Class */ 10.79 .highlight .no { color: #0077aa } /* Name.Constant */ 10.80 @@ -82,29 +46,29 @@ 10.81 .highlight .nl { color: #0077aa } /* Name.Label */ 10.82 .highlight .nn { color: #0077aa } /* Name.Namespace */ 10.83 .highlight .py { color: #0077aa } /* Name.Property */ 10.84 -.highlight .nt { color: #0077aa } /* Name.Tag */ 10.85 +.highlight .nt { color: #669900 } /* Name.Tag */ 10.86 .highlight .nv { color: #0077aa } /* Name.Variable */ 10.87 .highlight .ow { color: #999999 } /* Operator.Word */ 10.88 -.highlight .mb { color: #990055 } /* Literal.Number.Bin */ 10.89 -.highlight .mf { color: #990055 } /* Literal.Number.Float */ 10.90 -.highlight .mh { color: #990055 } /* Literal.Number.Hex */ 10.91 -.highlight .mi { color: #990055 } /* Literal.Number.Integer */ 10.92 -.highlight .mo { color: #990055 } /* Literal.Number.Oct */ 10.93 -.highlight .sb { color: #669900 } /* Literal.String.Backtick */ 10.94 -.highlight .sc { color: #669900 } /* Literal.String.Char */ 10.95 -.highlight .sd { color: #669900 } /* Literal.String.Doc */ 10.96 -.highlight .s2 { color: #669900 } /* Literal.String.Double */ 10.97 -.highlight .se { color: #669900 } /* Literal.String.Escape */ 10.98 -.highlight .sh { color: #669900 } /* Literal.String.Heredoc */ 10.99 -.highlight .si { color: #669900 } /* Literal.String.Interpol */ 10.100 -.highlight .sx { color: #669900 } /* Literal.String.Other */ 10.101 -.highlight .sr { color: #669900 } /* Literal.String.Regex */ 10.102 -.highlight .s1 { color: #669900 } /* Literal.String.Single */ 10.103 -.highlight .ss { color: #669900 } /* Literal.String.Symbol */ 10.104 +.highlight .mb { color: #000000 } /* Literal.Number.Bin */ 10.105 +.highlight .mf { color: #000000 } /* Literal.Number.Float */ 10.106 +.highlight .mh { color: #000000 } /* Literal.Number.Hex */ 10.107 +.highlight .mi { color: #000000 } /* Literal.Number.Integer */ 10.108 +.highlight .mo { color: #000000 } /* Literal.Number.Oct */ 10.109 +.highlight .sb { color: #a67f59 } /* Literal.String.Backtick */ 10.110 +.highlight .sc { color: #a67f59 } /* Literal.String.Char */ 10.111 +.highlight .sd { color: #a67f59 } /* Literal.String.Doc */ 10.112 +.highlight .s2 { color: #a67f59 } /* Literal.String.Double */ 10.113 +.highlight .se { color: #a67f59 } /* Literal.String.Escape */ 10.114 +.highlight .sh { color: #a67f59 } /* Literal.String.Heredoc */ 10.115 +.highlight .si { color: #a67f59 } /* Literal.String.Interpol */ 10.116 +.highlight .sx { color: #a67f59 } /* Literal.String.Other */ 10.117 +.highlight .sr { color: #a67f59 } /* Literal.String.Regex */ 10.118 +.highlight .s1 { color: #a67f59 } /* Literal.String.Single */ 10.119 +.highlight .ss { color: #a67f59 } /* Literal.String.Symbol */ 10.120 .highlight .vc { color: #0077aa } /* Name.Variable.Class */ 10.121 .highlight .vg { color: #0077aa } /* Name.Variable.Global */ 10.122 .highlight .vi { color: #0077aa } /* Name.Variable.Instance */ 10.123 -.highlight .il { color: #990055 } /* Literal.Number.Integer.Long */ 10.124 +.highlight .il { color: #000000 } /* Literal.Number.Integer.Long */ 10.125 .highlight { background: hsl(24, 20%, 95%); } 10.126 code.highlight { padding: .1em; border-radius: .3em; } 10.127 pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } 10.128 @@ -114,29 +78,28 @@ 10.129 <div class="head"> 10.130 <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> </a> </p> 10.131 <h1 class="p-name no-ref" id="title">CSS Basic User Interface Module Level 3 (CSS3 UI)</h1> 10.132 - <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-09-29">29 September 2015</time></span></h2> 10.133 + <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2016-02-04">4 February 2016</time></span></h2> 10.134 <div data-fill-with="spec-metadata"> 10.135 <dl> 10.136 <dt>This version: 10.137 - <dd><a class="u-url" href="http://dev.w3.org/csswg/css-ui/">http://dev.w3.org/csswg/css-ui/</a> 10.138 + <dd><a class="u-url" href="https://drafts.csswg.org/css-ui/">https://drafts.csswg.org/css-ui/</a> 10.139 <dt>Latest version: 10.140 - <dd><a href="http://www.w3.org/TR/css3-ui/">http://www.w3.org/TR/css3-ui/</a> 10.141 + <dd><a href="https://www.w3.org/TR/css3-ui/">https://www.w3.org/TR/css3-ui/</a> 10.142 <dt>Previous Versions: 10.143 - <dd><a href="http://www.w3.org/TR/2015/WD-css3-ui-20150707/" rel="previous">http://www.w3.org/TR/2015/WD-css3-ui-20150707/</a> 10.144 + <dd><a href="https://www.w3.org/TR/2015/WD-css3-ui-20150707/" rel="previous">https://www.w3.org/TR/2015/WD-css3-ui-20150707/</a> 10.145 <dt>Feedback: 10.146 - <dd><span><a href="mailto:[email protected]?subject=%5Bcss-ui%5D%20YOUR%20TOPIC%20HERE">[email protected]</a> with subject line “<kbd>[css-ui] <var>… message topic …</var></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span> 10.147 + <dd><span><a href="mailto:[email protected]?subject=%5Bcss-ui%5D%20YOUR%20TOPIC%20HERE">[email protected]</a> with subject line “<kbd>[css-ui] <i data-lt="">… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span> 10.148 <dt>Test Suite: 10.149 <dd><a href="http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/</a> 10.150 - <dt>Issue Tracking: 10.151 - <dd><a href="https://github.com/w3c/csswg-drafts/issues/">GitHub</a> 10.152 - <dd><span><a href="https://wiki.csswg.org/spec/css3-ui">https://wiki.csswg.org/spec/css3-ui</a></span> 10.153 <dt class="editor">Editors: 10.154 <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://tantek.com">Tantek Çelik</a> (<a class="p-org org" href="https://www.mozilla.org/en-US/">Mozilla</a>) <a class="u-email email" href="mailto:[email protected]">[email protected]</a> 10.155 - <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://florian.rivoal.net">Florian Rivoal</a> (<span class="p-org org">Invited Expert</span>) <a class="u-email email" href="mailto:[email protected]">[email protected]</a> 10.156 + <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://florian.rivoal.net/">Florian Rivoal</a> (<span class="p-org org">On behalf of Bloomberg</span>) <a class="u-email email" href="mailto:[email protected]">[email protected]</a> 10.157 + <dt>Issue Tracking: 10.158 + <dd><span><a href="https://wiki.csswg.org/spec/css3-ui">https://wiki.csswg.org/spec/css3-ui</a></span> 10.159 </dl> 10.160 </div> 10.161 <div data-fill-with="warning"></div> 10.162 - <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2015 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p> 10.163 + <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2016 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p> 10.164 <hr title="Separator for header"> 10.165 </div> 10.166 <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> 10.167 @@ -184,64 +147,64 @@ 10.168 </ul> 10.169 <p>“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulting being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.</p> 10.170 </div> 10.171 - <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="content">Table of Contents</span></h2> 10.172 - <div data-fill-with="table-of-contents" role="navigation"> 10.173 - <ul class="toc" role="directory"> 10.174 + <nav data-fill-with="table-of-contents" id="toc"> 10.175 + <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> 10.176 + <ol class="toc" role="directory"> 10.177 <li> 10.178 <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a> 10.179 - <ul class="toc"> 10.180 + <ol class="toc"> 10.181 <li><a href="#purpose"><span class="secno">1.1</span> <span class="content">Purpose</span></a> 10.182 - </ul> 10.183 + </ol> 10.184 <li><a href="#interaction"><span class="secno">2</span> <span class="content">Module Interactions</span></a> 10.185 <li> 10.186 <a href="#box-model"><span class="secno">3</span> <span class="content">Box Model addition</span></a> 10.187 - <ul class="toc"> 10.188 + <ol class="toc"> 10.189 <li><a href="#box-sizing"><span class="secno">3.1</span> <span class="content"><span class="property">box-sizing</span> property</span></a> 10.190 - </ul> 10.191 + </ol> 10.192 <li> 10.193 <a href="#outline-props"><span class="secno">4</span> <span class="content">Outline properties</span></a> 10.194 - <ul class="toc"> 10.195 + <ol class="toc"> 10.196 <li><a href="#outline"><span class="secno">4.1</span> <span class="content"><span class="property">outline</span> property</span></a> 10.197 <li><a href="#outline-width"><span class="secno">4.2</span> <span class="content"><span class="property">outline-width</span> property</span></a> 10.198 <li><a href="#outline-style"><span class="secno">4.3</span> <span class="content"><span class="property">outline-style</span> property</span></a> 10.199 <li><a href="#outline-color"><span class="secno">4.4</span> <span class="content"><span class="property">outline-color</span> property</span></a> 10.200 <li><a href="#outline-offset"><span class="secno">4.5</span> <span class="content"><span class="property">outline-offset</span> property</span></a> 10.201 - </ul> 10.202 + </ol> 10.203 <li> 10.204 <a href="#resizing-and-overflow"><span class="secno">5</span> <span class="content">Resizing & Overflow</span></a> 10.205 - <ul class="toc"> 10.206 + <ol class="toc"> 10.207 <li><a href="#resize"><span class="secno">5.1</span> <span class="content"><span class="property">resize</span> property</span></a> 10.208 <li><a href="#text-overflow"><span class="secno">5.2</span> <span class="content"> Overflow Ellipsis: the <span class="property">text-overflow</span> property</span></a> 10.209 - </ul> 10.210 + </ol> 10.211 <li> 10.212 <a href="#pointing-keyboard"><span class="secno">6</span> <span class="content">Pointing Devices and Keyboards</span></a> 10.213 - <ul class="toc"> 10.214 + <ol class="toc"> 10.215 <li> 10.216 <a href="#pointer-interaction"><span class="secno">6.1</span> <span class="content">Pointer interaction</span></a> 10.217 - <ul class="toc"> 10.218 + <ol class="toc"> 10.219 <li> 10.220 <a href="#cursor"><span class="secno">6.1.1</span> <span class="content"><span class="property">cursor</span> property</span></a> 10.221 - <ul class="toc"> 10.222 + <ol class="toc"> 10.223 <li><a href="#canvas_cursor"><span class="secno">6.1.1.1</span> <span class="content">Cursor of the canvas</span></a> 10.224 - </ul> 10.225 - </ul> 10.226 + </ol> 10.227 + </ol> 10.228 <li> 10.229 <a href="#insertion-caret"><span class="secno">6.2</span> <span class="content">Insertion caret</span></a> 10.230 - <ul class="toc"> 10.231 + <ol class="toc"> 10.232 <li><a href="#caret-color"><span class="secno">6.2.1</span> <span class="content">Coloring the insertion caret: caret-color</span></a> 10.233 - </ul> 10.234 + </ol> 10.235 <li> 10.236 <a href="#keyboard"><span class="secno">6.3</span> <span class="content">Keyboard control</span></a> 10.237 - <ul class="toc"> 10.238 + <ol class="toc"> 10.239 <li> 10.240 <a href="#nav-dir"><span class="secno">6.3.1</span> <span class="content">Directional focus navigation: the <span class="property">nav-up</span>, <span class="property">nav-right</span>, <span class="property">nav-down</span>, <span class="property">nav-left</span> properties</span></a> 10.241 - <ul class="toc"> 10.242 + <ol class="toc"> 10.243 <li><a href="#example-positioned-buttons"><span class="secno">6.3.1.1</span> <span class="content">Example: positioned buttons</span></a> 10.244 <li><a href="#example-moving-focus-to-inside-a-frame"><span class="secno">6.3.1.2</span> <span class="content">Example: moving focus to inside a frame</span></a> 10.245 - </ul> 10.246 + </ol> 10.247 <li><a href="#input-method-editor"><span class="secno">6.3.2</span> <span class="content">Obsolete: the ime-mode property</span></a> 10.248 - </ul> 10.249 - </ul> 10.250 + </ol> 10.251 + </ol> 10.252 <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Appendix A. Acknowledgments</span></a> 10.253 <li><a href="#changes"><span class="secno"></span> <span class="content">Appendix B. Changes</span></a> 10.254 <li><a href="#security-privacy-considerations"><span class="secno"></span> <span class="content">Appendix C. Considerations for Security and Privacy</span></a> 10.255 @@ -249,34 +212,38 @@ 10.256 <li><a href="#test-suite"><span class="secno"></span> <span class="content">Appendix E: Test Suite</span></a> 10.257 <li> 10.258 <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> 10.259 - <ul class="toc"> 10.260 - <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> 10.261 - <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> 10.262 - <li><a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a> 10.263 - <li><a href="#experimental"><span class="secno"></span> <span class="content"> Experimental implementations</span></a> 10.264 - <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a> 10.265 - </ul> 10.266 + <ol class="toc"> 10.267 + <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> 10.268 + <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> 10.269 + <li> 10.270 + <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a> 10.271 + <ol class="toc"> 10.272 + <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a> 10.273 + <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> 10.274 + <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a> 10.275 + </ol> 10.276 + </ol> 10.277 <li> 10.278 <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> 10.279 - <ul class="toc"> 10.280 + <ol class="toc"> 10.281 <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> 10.282 <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> 10.283 - </ul> 10.284 + </ol> 10.285 <li> 10.286 <a href="#references"><span class="secno"></span> <span class="content">References</span></a> 10.287 - <ul class="toc"> 10.288 + <ol class="toc"> 10.289 <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> 10.290 <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a> 10.291 - </ul> 10.292 + </ol> 10.293 <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> 10.294 - </ul> 10.295 - </div> 10.296 + </ol> 10.297 + </nav> 10.298 <main> 10.299 <p></p> 10.300 <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2> 10.301 <p>This module describes CSS properties which enable authors 10.302 to style user interface related properties and values.</p> 10.303 - <p><a href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes">Section 2.1 of CSS1</a> <a data-link-type="biblio" href="#biblio-css1">[CSS1]</a> and <a href="http://www.w3.org/TR/CSS2/ui.html">Chapter 18 of CSS2</a> <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> introduced several user interface related properties and values. <a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> introduced several new user interface related features.</p> 10.304 + <p><a href="https://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes">Section 2.1 of CSS1</a> <a data-link-type="biblio" href="#biblio-css1">[CSS1]</a> and <a href="https://www.w3.org/TR/CSS2/ui.html">Chapter 18 of CSS2</a> <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> introduced several user interface related properties and values. <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> introduced several new user interface related features.</p> 10.305 <p>This Working Draft incorporates, extends, and supersedes them.</p> 10.306 <h3 class="heading settled" data-level="1.1" id="purpose"><span class="secno">1.1. </span><span class="content">Purpose</span><a class="self-link" href="#purpose"></a></h3> 10.307 <p>The purpose of this specification is to achieve the following objectives:</p> 10.308 @@ -291,9 +258,9 @@ 10.309 <p>This document defines new features not present in earlier specifications. 10.310 In addition, it replaces and supersedes the following:</p> 10.311 <ul> 10.312 - <li><a href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">Section 18.1</a>, <a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">section 18.4</a>, 10.313 -and Information on the stacking of outlines defined in <a href="http://www.w3.org/TR/CSS21/zindex.html">Appendix E</a> of Cascading Style Sheets, level 2, revision 1 <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> 10.314 - <li><a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> <a data-link-type="biblio" href="#biblio-cssui">[CSSUI]</a> 10.315 + <li><a href="https://www.w3.org/TR/CSS21/ui.html#cursor-props">Section 18.1</a>, <a href="https://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">section 18.4</a>, 10.316 +and Information on the stacking of outlines defined in <a href="https://www.w3.org/TR/CSS21/zindex.html">Appendix E</a> of Cascading Style Sheets, level 2, revision 1 <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> 10.317 + <li><a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> <a data-link-type="biblio" href="#biblio-cssui">[CSSUI]</a> 10.318 </ul> 10.319 <h2 class="heading settled" data-level="3" id="box-model"><span class="secno">3. </span><span class="content">Box Model addition</span><a class="self-link" href="#box-model"></a></h2> 10.320 <h3 class="heading settled" data-level="3.1" id="box-sizing"><span class="secno">3.1. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-box-sizing">box-sizing</a> property</span><a class="self-link" href="#box-sizing"></a></h3> 10.321 @@ -344,7 +311,7 @@ 10.322 The content width and height are calculated 10.323 by subtracting the border and padding widths of the respective sides 10.324 from the specified <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a> properties. 10.325 -As the content width and height <a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">cannot be negative</a> (<a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>, section 10.2), 10.326 +As the content width and height <a href="https://www.w3.org/TR/CSS21/visudet.html#the-width-property">cannot be negative</a> (<a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>, section 10.2), 10.327 this computation is floored at 0. 10.328 Used values, as exposed for instance through getComputedStyle(), also refer to the border box. 10.329 <p class="note" role="note">Note: This is the behavior of width and height as commonly implemented 10.330 @@ -380,12 +347,12 @@ 10.331 <td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height">max-height</a> 10.332 <td>max(0, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height">max-height</a> − <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-top">padding-top</a> − <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-bottom">padding-bottom</a> − <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-top-width">border-top-width</a> − <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-bottom-width">border-bottom-width</a>) 10.333 </table> 10.334 - <p>The <a href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> of <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> are written assuming <a class="css" data-link-type="propdesc" href="#propdef-box-sizing">box-sizing: content-box</a>. The following disambiguations are made to clarify the behavior for all values of <a class="property" data-link-type="propdesc" href="#propdef-box-sizing">box-sizing</a>:</p> 10.335 + <p>The <a href="https://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> of <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> are written assuming <a class="css" data-link-type="propdesc" href="#propdef-box-sizing">box-sizing: content-box</a>. The following disambiguations are made to clarify the behavior for all values of <a class="property" data-link-type="propdesc" href="#propdef-box-sizing">box-sizing</a>:</p> 10.336 <ol> 10.337 - <li>In <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, the second <q>width</q> in the following phrase is to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-width">content width</a>: <q>If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> is not <span class="css">auto</span> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-left-width">border-left-width</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-left">padding-left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> + [...]</q> 10.338 - <li>In <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">10.3.7</a>, <q>width</q> is to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-width">content width</a> in the following equation: <q><a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visuren.html#position-props">left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin-left">margin-left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-left-width">border-left-width</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-left">padding-left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> + [...]</q> 10.339 + <li>In <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, the second <q>width</q> in the following phrase is to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-width">content width</a>: <q>If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> is not <span class="css">auto</span> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-left-width">border-left-width</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-left">padding-left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> + [...]</q> 10.340 + <li>In <a href="https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">10.3.7</a>, <q>width</q> is to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-width">content width</a> in the following equation: <q><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#position-props">left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin-left">margin-left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-left-width">border-left-width</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-left">padding-left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> + [...]</q> 10.341 <li> 10.342 - In <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">10.4</a>, <q>width</q>, <q>height</q>, <q>min-width</q>, <q>max-width</q>, <q>min-height</q> and <q>max-height</q> are respectively to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-width">content width</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-height">content height</a>, <a data-link-type="dfn" href="#min-inner-width">min inner width</a>, <a data-link-type="dfn" href="#max-inner-width">max inner width</a>, <a data-link-type="dfn" href="#min-inner-height">min inner height</a> and <a data-link-type="dfn" href="#max-inner-height">max inner height</a> in the following phrases: 10.343 + In <a href="https://www.w3.org/TR/CSS21/visudet.html#min-max-widths">10.4</a>, <q>width</q>, <q>height</q>, <q>min-width</q>, <q>max-width</q>, <q>min-height</q> and <q>max-height</q> are respectively to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-width">content width</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-height">content height</a>, <a data-link-type="dfn" href="#min-inner-width">min inner width</a>, <a data-link-type="dfn" href="#max-inner-width">max inner width</a>, <a data-link-type="dfn" href="#min-inner-height">min inner height</a> and <a data-link-type="dfn" href="#max-inner-height">max inner height</a> in the following phrases: 10.344 <ol> 10.345 <li><q>The tentative used width is calculated [...]</q> 10.346 <li><q>If the tentative used width is greater than <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width">max-width</a>, the rules above are applied again, but this time using the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width">max-width</a> as the computed value for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a>.</q> 10.347 @@ -394,9 +361,9 @@ 10.348 <li>All instances of these words in the table 10.349 <li><q>Then apply the rules under "Calculating widths and margins" above, as if <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> were computed as this value.</q> 10.350 </ol> 10.351 - <li>In <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">10.6.4</a>, <q>height</q> is to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-height">content height</a> in the following equation: <q><a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visuren.html#position-props">top</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin-top">margin-top</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-top-width">border-top-width</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-top">padding-top</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a> + [...]</q> 10.352 + <li>In <a href="https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">10.6.4</a>, <q>height</q> is to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-height">content height</a> in the following equation: <q><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#position-props">top</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin-top">margin-top</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-top-width">border-top-width</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-top">padding-top</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a> + [...]</q> 10.353 <li> 10.354 - In <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">10.7</a>, <q>width</q>, <q>height</q>, <q>min-height</q> and <q>max-height</q> are respectively to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-width">content width</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-height">content height</a>, <a data-link-type="dfn" href="#min-inner-height">min inner height</a> and <a data-link-type="dfn" href="#max-inner-height">max inner height</a> in the following phrases: 10.355 + In <a href="https://www.w3.org/TR/CSS21/visudet.html#min-max-heights">10.7</a>, <q>width</q>, <q>height</q>, <q>min-height</q> and <q>max-height</q> are respectively to be interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-width">content width</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-height">content height</a>, <a data-link-type="dfn" href="#min-inner-height">min inner height</a> and <a data-link-type="dfn" href="#max-inner-height">max inner height</a> in the following phrases: 10.356 <ol> 10.357 <li><q>The tentative used height is calculated [...]</q> 10.358 <li><q>If this tentative height is greater than <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height">max-height</a>, the rules above are applied again, but this time using the value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height">max-height</a> as the computed value for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>.</q> 10.359 @@ -412,17 +379,17 @@ 10.360 two divs with fixed size borders inside a div container, 10.361 which would otherwise require additional markup.</p> 10.362 <p>sample CSS:</p> 10.363 -<pre><code class="lang-css highlight"><span class="nt">div</span><span class="nc">.container</span> <span class="p">{</span> 10.364 - <span class="k">width</span><span class="o">:</span><span class="m">38em</span><span class="p">;</span> 10.365 - <span class="k">border</span><span class="o">:</span><span class="m">1em</span> <span class="k">solid</span> <span class="nb">black</span><span class="p">;</span> 10.366 +<pre><code class="lang-css highlight"><span class="nt">div.container </span><span class="p">{</span> 10.367 + <span class="k">width</span><span class="p">:</span><span class="m">38</span><span class="l">em</span><span class="p">;</span> 10.368 + <span class="k">border</span><span class="p">:</span><span class="m">1</span><span class="l">em</span> solid black<span class="p">;</span> 10.369 <span class="p">}</span> 10.370 10.371 -<span class="nt">div</span><span class="nc">.split</span> <span class="p">{</span> 10.372 - <span class="n">box</span><span class="o">-</span><span class="n">sizing</span><span class="o">:</span><span class="k">border</span><span class="o">-</span><span class="n">box</span><span class="p">;</span> 10.373 - <span class="k">width</span><span class="o">:</span><span class="m">50%</span><span class="p">;</span> 10.374 - <span class="k">border</span><span class="o">:</span><span class="m">1em</span> <span class="nb">silver</span> <span class="k">ridge</span><span class="p">;</span> 10.375 - <span class="k">float</span><span class="o">:</span><span class="k">left</span><span class="p">;</span> 10.376 -<span class="p">}</span></code></pre> 10.377 +<span class="nt">div.split </span><span class="p">{</span> 10.378 + <span class="k">box-sizing</span><span class="p">:</span>border-box<span class="p">;</span> 10.379 + <span class="k">width</span><span class="p">:</span><span class="m">5</span><span class="l">0</span>%; 10.380 + border:1em silver ridge; 10.381 + float:left; 10.382 +}</code></pre> 10.383 <p>sample HTML fragment:</p> 10.384 <pre><code class="lang-markup highlight"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 10.385 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"split"</span><span class="nt">></span>This div occupies the left half.<span class="nt"></div></span> 10.386 @@ -516,7 +483,7 @@ 10.387 <td>absolute length; <span class="css">0</span> if the outline style is <span class="css">none</span>. 10.388 <tr> 10.389 <th>Animatable: 10.390 - <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a> 10.391 + <td>as <a href="https://drafts.csswg.org/css3-transitions/#animtype-length">length</a> 10.392 </table> 10.393 <h3 class="heading settled" data-level="4.3" id="outline-style"><span class="secno">4.3. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a> property</span><a class="self-link" href="#outline-style"></a></h3> 10.394 <table class="propdef"> 10.395 @@ -578,7 +545,7 @@ 10.396 <td>The computed value for <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/ui.html#value-def-invert">invert</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/ui.html#value-def-invert">invert</a>. For <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | greenyellow | mediumorchid | silver | papayawhip | dimgray | black | springgreen | crimson | lightsalmon | brown | turquoise | lightseagreen | cyan | transparent | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lime | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | maroon | purple | darkkhaki | mediumpurple | cornsilk | red | bisque | burlywood | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | aqua | mediumslateblue | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | mediumvioletred | royalblue | olivedrab | sienna | lightcoral | orangered | navajowhite | slategray | palegreen | mistyrose | seashell | mediumspringgreen | fuchsia | chartreuse | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | lightgreen | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | lightgrey | darkgoldenrod | slateblue | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | linen | darkorange | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | chocolate | lightgray | hotpink | lightyellow | lavenderblush | darkblue | mediumaquamarine | green | blueviolet | peachpuff"><color></a> values, the computed value is as defined for the <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a> <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-3/#color0">color</a> property. 10.397 <tr> 10.398 <th>Animatable: 10.399 - <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a> 10.400 + <td>as <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a> 10.401 </table> 10.402 <p>The outline created with the outline properties is drawn "over" a box, 10.403 i.e., the outline is always on top, 10.404 @@ -593,7 +560,7 @@ 10.405 rather than open on some sides 10.406 (as borders on inline elements are when lines are broken).</p> 10.407 <p>The parts of the outline are not required to be rectangular. 10.408 -To the extent that the outline follows the <a data-link-type="dfn" href="http://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a>, 10.409 +To the extent that the outline follows the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a>, 10.410 it should follow the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">border-radius</a> curve.</p> 10.411 <p>The position of the outline may be affected by descendant boxes.</p> 10.412 <p>User agents should use an algorithm for determining 10.413 @@ -601,9 +568,9 @@ 10.414 for conveying the concept of focus to the user.</p> 10.415 <p class="note" role="note">Note: This specification does not define the exact position or shape of the outline, but it is typically drawn immediately outside the border box.</p> 10.416 <p>The <a class="property" data-link-type="propdesc" href="#propdef-outline-width">outline-width</a> property accepts 10.417 -the same values as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-width">border-width</a> (<a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>, <a href="http://www.w3.org/TR/css3-background/#the-border-width">Section 4.3</a>).</p> 10.418 +the same values as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-width">border-width</a> (<a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>, <a href="https://www.w3.org/TR/css3-background/#the-border-width">Section 4.3</a>).</p> 10.419 <p>The <a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a> property accepts 10.420 -the same values as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-style">border-style</a> (<a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>, <a href="http://www.w3.org/TR/css3-background/#the-border-style">Section 4.2</a>), 10.421 +the same values as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-style">border-style</a> (<a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>, <a href="https://www.w3.org/TR/css3-background/#the-border-style">Section 4.2</a>), 10.422 except that <span class="css">hidden</span> is not a legal outline style. 10.423 In addition, in CSS3, <a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a> accepts the value <span class="css">auto</span>. 10.424 The <span class="css">auto</span> value permits the user agent 10.425 @@ -637,7 +604,7 @@ 10.426 <a class="self-link" href="#example-bcd0e0d3"></a> 10.427 <p style="display:none">Example(s): </p> 10.428 <p>Here’s an example of drawing a thick outline around a BUTTON element:</p> 10.429 -<pre><code class="lang-css highlight"><span class="nt">button</span> <span class="p">{</span> <span class="k">outline</span><span class="o">:</span> <span class="k">thick</span> <span class="k">solid</span> <span class="p">}</span></code></pre> 10.430 +<pre><code class="lang-css highlight"><span class="nt">button </span><span class="p">{</span> <span class="k">outline</span><span class="p">:</span> thick solid <span class="p">}</span></code></pre> 10.431 </div> 10.432 <p>Graphical user interfaces may use outlines around elements 10.433 to tell the user which element on the page has the focus. 10.434 @@ -651,15 +618,15 @@ 10.435 <p>For example, to draw a thick black line around an element when it has the focus, 10.436 and a thick red line when it is active, 10.437 the following rules can be used:</p> 10.438 -<pre><code class="lang-css highlight"><span class="nd">:focus</span> <span class="p">{</span> <span class="k">outline</span><span class="o">:</span> <span class="k">thick</span> <span class="k">solid</span> <span class="nb">black</span> <span class="p">}</span> 10.439 -<span class="nd">:active</span> <span class="p">{</span> <span class="k">outline</span><span class="o">:</span> <span class="k">thick</span> <span class="k">solid</span> <span class="nb">red</span> <span class="p">}</span></code></pre> 10.440 +<pre><code class="lang-css highlight"><span class="nt">:focus </span><span class="p">{</span> <span class="k">outline</span><span class="p">:</span> thick solid black <span class="p">}</span> 10.441 +<span class="nt">:active </span><span class="p">{</span> <span class="k">outline</span><span class="p">:</span> thick solid red <span class="p">}</span></code></pre> 10.442 </div> 10.443 <p class="note" role="note">Note: Since the outline does not affect formatting 10.444 (i.e., no space is left for it in the box model), 10.445 it may well overlap other elements on the page.</p> 10.446 <h3 class="heading settled" data-level="4.5" id="outline-offset"><span class="secno">4.5. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-outline-offset">outline-offset</a> property</span><a class="self-link" href="#outline-offset"></a></h3> 10.447 - <p>By default, the outline is drawn starting just outside the <a data-link-type="dfn" href="http://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a>. 10.448 -However, it is possible to offset the outline and draw it beyond the <a data-link-type="dfn" href="http://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a>.</p> 10.449 + <p>By default, the outline is drawn starting just outside the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a>. 10.450 +However, it is possible to offset the outline and draw it beyond the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a>.</p> 10.451 <table class="propdef"> 10.452 <tbody> 10.453 <tr> 10.454 @@ -688,10 +655,10 @@ 10.455 <td><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value"><length></a> value in absolute units (px or physical). 10.456 <tr> 10.457 <th>Animatable: 10.458 - <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a> 10.459 + <td>as <a href="https://drafts.csswg.org/css3-transitions/#animtype-length">length</a> 10.460 </table> 10.461 <p>If the computed value of <a class="property" data-link-type="propdesc" href="#propdef-outline-offset">outline-offset</a> is anything other than 0, 10.462 -then the outline is outset from the <a data-link-type="dfn" href="http://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a> by that amount.</p> 10.463 +then the outline is outset from the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a> by that amount.</p> 10.464 <div class="example" id="example-8c7e0106"> 10.465 <a class="self-link" href="#example-8c7e0106"></a> 10.466 <p style="display:none">Example(s): </p> 10.467 @@ -699,7 +666,7 @@ 10.468 to leave 2 pixels of space between a focus outline 10.469 and the element that has the focus or is active, 10.470 the following rule can be used:</p> 10.471 -<pre><code class="lang-css highlight"><span class="nd">:focus</span><span class="o">,</span><span class="nd">:active</span> <span class="p">{</span> <span class="k">outline</span><span class="o">-</span><span class="n">offset</span><span class="o">:</span> <span class="m">2px</span> <span class="p">}</span></code></pre> 10.472 +<pre><code class="lang-css highlight"><span class="nt">:focus,:active </span><span class="p">{</span> <span class="k">outline-offset</span><span class="p">:</span> <span class="m">2</span><span class="l">px</span> <span class="p">}</span></code></pre> 10.473 </div> 10.474 <p id="negative-offset">Negative values must cause the outline 10.475 to shrink into the border box. 10.476 @@ -736,7 +703,7 @@ 10.477 <td>none 10.478 <tr> 10.479 <th>Applies to: 10.480 - <td>elements with <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> other than visible, 10.481 + <td>elements with <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> other than visible, 10.482 and optionally replaced elements representing images or videos, and iframes 10.483 <tr> 10.484 <th>Inherited: 10.485 @@ -769,8 +736,8 @@ 10.486 to allow the user to adjust only the height of the element. 10.487 </dl> 10.488 <p>Currently it is possible to control the appearance of the scrolling mechanism (if any) 10.489 -on an element using the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> property 10.490 -(e.g. <code class="lang-css highlight"><span class="nt">overflow</span><span class="o">:</span> <span class="nt">scroll</span></code> vs. <code class="lang-css highlight"><span class="nt">overflow</span><span class="o">:</span> <span class="nt">hidden</span></code> etc.). 10.491 +on an element using the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> property 10.492 +(e.g. <code class="lang-css highlight"><span class="err">overflow:</span> <span class="err">scroll</span></code> vs. <code class="lang-css highlight"><span class="err">overflow:</span> <span class="err">hidden</span></code> etc.). 10.493 The purpose of the <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property 10.494 is to allow control over the appearance and function of the resizing mechanism 10.495 (e.g. a resize box or widget) on the element.</p> 10.496 @@ -780,22 +747,22 @@ 10.497 The resizing mechanism allows the user 10.498 to determine the size of the element.</p> 10.499 <p>The <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property applies to elements 10.500 -whose computed <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> value 10.501 -is something other than <a class="css" data-link-type="maybe" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">visible</a>. 10.502 +whose computed <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> value 10.503 +is something other than <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">visible</a>. 10.504 UAs may also apply it, 10.505 -regardless of the value of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-continue-overflow">overflow</a> property, 10.506 +regardless of the value of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-4/#valdef-continue-overflow">overflow</a> property, 10.507 to:</p> 10.508 <ul> 10.509 <li>Replaced elements representing images or videos, such as <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">img</a></code>, <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#video">video</a></code>, <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element">picture</a></code>, <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#NewDocument">svg</a></code>, <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-object-element">object</a></code>, or <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/scripting.html#canvas">canvas</a></code>. 10.510 <li>The <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-iframe-element">iframe</a></code> element. 10.511 </ul> 10.512 <p>The effect of the <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property on generated content is undefined. Implementations should not apply the <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property to generated content.</p> 10.513 - <p class="note" role="note">Note: the <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property may apply to generated content in the future if there is implementation of <a href="http://dev.w3.org/csswg/css-pseudo/#CSSPseudoElement-interface">Interface CSSPseudoElement</a>.</p> 10.514 + <p class="note" role="note">Note: the <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property may apply to generated content in the future if there is implementation of <a href="https://drafts.csswg.org/css-pseudo/#CSSPseudoElement-interface">Interface CSSPseudoElement</a>.</p> 10.515 <p>When an element is resized by the user, 10.516 the user agent sets 10.517 the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a> properties 10.518 to px unit length values of the size indicated by the user, 10.519 -in the element’s <a href="http://www.w3.org/TR/css-style-attr/#style-attribute">style attribute</a> DOM, 10.520 +in the element’s <a href="https://www.w3.org/TR/css-style-attr/#style-attribute">style attribute</a> DOM, 10.521 replacing existing property declaration(s), if any, 10.522 without <span class="css">!important</span>, if any.</p> 10.523 <p>If an element is resized in only one dimension, 10.524 @@ -804,7 +771,7 @@ 10.525 (i.e. altering the top left of the element or altering the bottom right) 10.526 may depend on a number of CSS layout factors 10.527 including whether the element is absolutely positioned, 10.528 -whether it is positioned using the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visuren.html#position-props">right</a> and <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visuren.html#position-props">bottom</a> properties, 10.529 +whether it is positioned using the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#position-props">right</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#position-props">bottom</a> properties, 10.530 whether the language of the element is right-to-left etc. 10.531 The UA should consider the direction of resizing 10.532 (as determined by CSS layout), 10.533 @@ -815,9 +782,9 @@ 10.534 (The "must" is <a href="https://wiki.csswg.org/spec/css3-ui#issue-53">at risk</a> since <a href="http://lists.w3.org/Archives/Public/www-style/2014Dec/0063.html">only Firefox currently supports this</a>, and may be downgraded to a "should".)</p> 10.535 <p class="note" role="note">Note: There may be situations where user attempts to resize an element 10.536 appear to be overriden or ignored, e.g. because of <span class="css">!important</span> cascading declarations that supersede 10.537 -that element’s <a href="http://www.w3.org/TR/css-style-attr/#style-attribute">style attribute</a> <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a> properties in the DOM.</p> 10.538 +that element’s <a href="https://www.w3.org/TR/css-style-attr/#style-attribute">style attribute</a> <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a> properties in the DOM.</p> 10.539 <p>Changes to the computed value of an element’s <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property 10.540 -do not reset changes to the <a href="http://www.w3.org/TR/css-style-attr/#style-attribute">style attribute</a> made due to 10.541 +do not reset changes to the <a href="https://www.w3.org/TR/css-style-attr/#style-attribute">style attribute</a> made due to 10.542 user resizing of that element.</p> 10.543 <div class="example" id="example-0ff410a0"> 10.544 <a class="self-link" href="#example-0ff410a0"></a> 10.545 @@ -825,11 +792,11 @@ 10.546 <p>For example, 10.547 to make iframes scrollable <em>and</em> resizable, 10.548 the following rule can be used:</p> 10.549 -<pre><code class="lang-css highlight"><span class="nt">iframe</span><span class="o">,</span><span class="nt">object</span><span class="o">[</span><span class="nt">type</span><span class="o">^=</span><span class="s2">"text/"</span><span class="o">],</span> 10.550 -<span class="nt">object</span><span class="o">[</span><span class="nt">type</span><span class="o">$=</span><span class="s2">"+xml"</span><span class="o">],</span><span class="nt">object</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">"application/xml"</span><span class="o">]</span> 10.551 +<pre><code class="lang-css highlight"><span class="nt">iframe,object[type^="text/"],</span> 10.552 +<span class="nt">object[type$="+xml"],object[type="application/xml"]</span> 10.553 <span class="p">{</span> 10.554 - <span class="k">overflow</span><span class="o">:</span><span class="k">auto</span><span class="p">;</span> 10.555 - <span class="n">resize</span><span class="o">:</span><span class="k">both</span><span class="p">;</span> 10.556 + <span class="k">overflow</span><span class="p">:</span>auto<span class="p">;</span> 10.557 + <span class="k">resize</span><span class="p">:</span>both<span class="p">;</span> 10.558 <span class="p">}</span></code></pre> 10.559 </div> 10.560 <p></p> 10.561 @@ -869,14 +836,14 @@ 10.562 <p>This property specifies rendering when inline content overflows 10.563 its line box edge 10.564 in the inline progression direction of its block container element ("the block") 10.565 -that has <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> other than <a class="css" data-link-type="maybe" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">visible</a>.</p> 10.566 +that has <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> other than <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">visible</a>.</p> 10.567 <p>Text can overflow for example when it is prevented from wrapping 10.568 -(e.g. due to <code class="lang-css highlight"><span class="nt">white-space</span><span class="o">:</span> <span class="nt">nowrap</span></code> or a single word is too long to fit). 10.569 +(e.g. due to <code class="lang-css highlight"><span class="err">white-space:</span> <span class="err">nowrap</span></code> or a single word is too long to fit). 10.570 Values have the following meanings:</p> 10.571 <dl class="valuedef"> 10.572 - <dt id="overflow-clip"><a class="self-link" href="#overflow-clip"></a><dfn data-dfn-for="overflow" data-dfn-type="dfn" data-noexport="" id="clip">clip<a class="self-link" href="#clip"></a></dfn> 10.573 + <dt id="overflow-clip"><a class="self-link" href="#overflow-clip"></a><dfn data-dfn-for="overflow" data-dfn-type="dfn" data-noexport="" id="overflow-clip0">clip<a class="self-link" href="#overflow-clip0"></a></dfn> 10.574 <dd>Clip inline content that overflows its block container element. Characters may be only partially rendered. 10.575 - <dt id="overflow-ellipsis"><a class="self-link" href="#overflow-ellipsis"></a><dfn data-dfn-for="overflow" data-dfn-type="dfn" data-noexport="" id="ellipsis">ellipsis<a class="self-link" href="#ellipsis"></a></dfn> 10.576 + <dt id="overflow-ellipsis"><a class="self-link" href="#overflow-ellipsis"></a><dfn data-dfn-for="overflow" data-dfn-type="dfn" data-noexport="" id="overflow-ellipsis0">ellipsis<a class="self-link" href="#overflow-ellipsis0"></a></dfn> 10.577 <dd> Render an ellipsis character (U+2026) 10.578 to represent clipped inline content. 10.579 Implementations may substitute a more language, script, or writing-mode appropriate 10.580 @@ -901,10 +868,10 @@ 10.581 to facilitate the use of directional characters such as arrows.</p> 10.582 <p>For the ellipsis 10.583 and string values, 10.584 -implementations must hide characters and <a href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes"> atomic inline-level elements</a> at the applicable edge(s) of the line as necessary to fit the ellipsis/string. 10.585 +implementations must hide characters and <a href="https://www.w3.org/TR/CSS21/visuren.html#inline-boxes"> atomic inline-level elements</a> at the applicable edge(s) of the line as necessary to fit the ellipsis/string. 10.586 Place the ellipsis/string immediately adjacent 10.587 to the applicable edge(s) of the remaining inline content. 10.588 -The first character or <a href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes"> atomic inline-level element</a> on a line 10.589 +The first character or <a href="https://www.w3.org/TR/CSS21/visuren.html#inline-boxes"> atomic inline-level element</a> on a line 10.590 must be clipped rather than ellipsed.</p> 10.591 <h4 class="no-num no-toc heading settled" id="ellipsing-details"><span class="content">ellipsing details</span><a class="self-link" href="#ellipsing-details"></a></h4> 10.592 <ul> 10.593 @@ -935,9 +902,9 @@ 10.594 <p>These examples demonstrate setting the text-overflow of a block container element 10.595 that has text which overflows its dimensions:</p> 10.596 <p>sample CSS for a div:</p> 10.597 -<pre><code class="lang-css highlight"><span class="nt">div</span> <span class="p">{</span> <span class="k">font-family</span><span class="o">:</span><span class="n">Helvetica</span><span class="o">,</span><span class="k">sans-serif</span><span class="p">;</span> <span class="k">line-height</span><span class="o">:</span><span class="m">1</span><span class="o">.</span><span class="m">1</span><span class="p">;</span> 10.598 - <span class="k">width</span><span class="o">:</span><span class="m">3.1em</span><span class="p">;</span> <span class="k">padding</span><span class="o">:.</span><span class="m">2em</span><span class="p">;</span> <span class="k">border</span><span class="o">:</span><span class="k">solid</span> <span class="m">.1em</span> <span class="nb">black</span><span class="p">;</span> <span class="k">margin</span><span class="o">:</span><span class="m">1em</span> <span class="m">0</span><span class="p">;</span> 10.599 -<span class="p">}</span></code></pre> 10.600 +<pre><code class="lang-css highlight"><span class="nt">div </span><span class="p">{</span> <span class="k">font-family</span><span class="p">:</span>Helvetica<span class="p">,</span>sans-serif<span class="p">;</span> <span class="k">line-height</span><span class="p">:</span><span class="m">1</span>.1; 10.601 + width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0; 10.602 +}</code></pre> 10.603 <p>sample HTML fragments, renderings, and your browser:</p> 10.604 <table id="awesome-table" style="color:#000;background:#fff"> 10.605 <tbody> 10.606 @@ -991,7 +958,7 @@ 10.607 </div> 10.608 <p class="note" role="note">Note: the side of the line that the ellipsis is placed depends on the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> of the block. 10.609 E.g. an overflow hidden right-to-left 10.610 -(<code class="lang-css highlight"><span class="nt">direction</span><span class="o">:</span> <span class="nt">rtl</span></code>) 10.611 +(<code class="lang-css highlight"><span class="err">direction:</span> <span class="err">rtl</span></code>) 10.612 block clips inline content on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#left">left</a> side, 10.613 thus would place a text-overflow ellipsis on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#left">left</a> to represent that clipped content.</p> 10.614 <h4 class="no-num no-toc heading settled" id="ellipsis-scrolling"><span class="content">ellipsis interaction with scrolling interfaces</span><a class="self-link" href="#ellipsis-scrolling"></a></h4> 10.615 @@ -1022,13 +989,13 @@ 10.616 <p>This example uses text-overflow on an element with overflow scroll 10.617 to demonstrate the above described behavior.</p> 10.618 <p>sample CSS:</p> 10.619 -<pre><code class="lang-css highlight"><span class="nt">div</span><span class="nc">.crawlbar</span> <span class="p">{</span> 10.620 - <span class="k">text</span><span class="o">-</span><span class="k">overflow</span><span class="o">:</span> <span class="n">ellipsis</span><span class="p">;</span> 10.621 - <span class="k">height</span><span class="o">:</span> <span class="m">2em</span><span class="p">;</span> 10.622 - <span class="k">overflow</span><span class="o">:</span> <span class="k">scroll</span><span class="p">;</span> 10.623 - <span class="k">white-space</span><span class="o">:</span> <span class="k">nowrap</span><span class="p">;</span> 10.624 - <span class="k">width</span><span class="o">:</span> <span class="m">15em</span><span class="p">;</span> 10.625 - <span class="k">border</span><span class="o">:</span><span class="m">1em</span> <span class="k">solid</span> <span class="nb">black</span><span class="p">;</span> 10.626 +<pre><code class="lang-css highlight"><span class="nt">div.crawlbar </span><span class="p">{</span> 10.627 + <span class="k">text-overflow</span><span class="p">:</span> ellipsis<span class="p">;</span> 10.628 + <span class="k">height</span><span class="p">:</span> <span class="m">2</span><span class="l">em</span><span class="p">;</span> 10.629 + <span class="k">overflow</span><span class="p">:</span> scroll<span class="p">;</span> 10.630 + <span class="k">white-space</span><span class="p">:</span> nowrap<span class="p">;</span> 10.631 + <span class="k">width</span><span class="p">:</span> <span class="m">15</span><span class="l">em</span><span class="p">;</span> 10.632 + <span class="k">border</span><span class="p">:</span><span class="m">1</span><span class="l">em</span> solid black<span class="p">;</span> 10.633 <span class="p">}</span></code></pre> 10.634 <p>sample HTML fragment:</p> 10.635 <pre><code class="lang-markup highlight"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"crawlbar"</span><span class="nt">></span> 10.636 @@ -1104,8 +1071,8 @@ 10.637 <td>no 10.638 </table> 10.639 <p>This property specifies the type of cursor to be displayed for the pointing device 10.640 -when the cursor’s hotspot is within the element’s <a data-link-type="dfn" href="http://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a>.</p> 10.641 - <p class="note" role="note">Note: As per <a data-link-type="biblio" href="#biblio-css3-background">[CSS3-BACKGROUND]</a>, the <a data-link-type="dfn" href="http://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a> is affected by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">border-radius</a>.</p> 10.642 +when the cursor’s hotspot is within the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a>.</p> 10.643 + <p class="note" role="note">Note: As per <a data-link-type="biblio" href="#biblio-css3-background">[CSS3-BACKGROUND]</a>, the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a> is affected by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">border-radius</a>.</p> 10.644 <p>In the case of overlapping elements, 10.645 which element determines the type of cursor 10.646 is based on hit testing: 10.647 @@ -1133,14 +1100,14 @@ 10.648 <p>The UA must support the following image file formats:</p> 10.649 <ul> 10.650 <li>PNG, as defined in <a data-link-type="biblio" href="#biblio-png">[PNG]</a> 10.651 - <li>SVG, as defined in <a data-link-type="biblio" href="#biblio-svg">[SVG]</a>, in <a href="http://www.w3.org/TR/svg-integration/#secure-static-mode">secure static mode</a> <a data-link-type="biblio" href="#biblio-svg-integration">[SVG-INTEGRATION]</a> 10.652 + <li>SVG, as defined in <a data-link-type="biblio" href="#biblio-svg">[SVG]</a>, in <a href="https://www.w3.org/TR/svg-integration/#secure-static-mode">secure static mode</a> <a data-link-type="biblio" href="#biblio-svg-integration">[SVG-INTEGRATION]</a> 10.653 <li>any other non-animated image file format that they support 10.654 for <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image"><image></a> in other properties, 10.655 such as the the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#background-image">background-image</a> property 10.656 </ul> 10.657 <p>In addition, the UA should support the following image file formats:</p> 10.658 <ul> 10.659 - <li>SVG, as defined in <a data-link-type="biblio" href="#biblio-svg">[SVG]</a>, in <a href="http://www.w3.org/TR/svg-integration/#secure-animated-mode">secure animated mode</a> <a data-link-type="biblio" href="#biblio-svg-integration">[SVG-INTEGRATION]</a> 10.660 + <li>SVG, as defined in <a data-link-type="biblio" href="#biblio-svg">[SVG]</a>, in <a href="https://www.w3.org/TR/svg-integration/#secure-animated-mode">secure animated mode</a> <a data-link-type="biblio" href="#biblio-svg-integration">[SVG-INTEGRATION]</a> 10.661 <li>any other animated image file format that they support 10.662 for <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image"><image></a> in other properties, 10.663 such as the the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#background-image">background-image</a> property 10.664 @@ -1282,18 +1249,18 @@ 10.665 often rendered as a magnifying glass with a "+" or "-" in the center of the glass, for <span class="css">zoom-in</span> and <span class="css">zoom-out</span> respectively. 10.666 </dl> 10.667 </dl> 10.668 - <div class="example" id="example-5ef67586"> 10.669 - <a class="self-link" href="#example-5ef67586"></a> 10.670 + <div class="example" id="example-4f28e344"> 10.671 + <a class="self-link" href="#example-4f28e344"></a> 10.672 <p>Example: cursor fallback</p> 10.673 <p>Here is an example of using several cursor values.</p> 10.674 -<pre><code class="lang-css highlight"><span class="nd">:link</span><span class="o">,</span><span class="nd">:visited</span> <span class="p">{</span> 10.675 - <span class="k">cursor</span><span class="o">:</span> <span class="sx">url(example.svg#linkcursor)</span><span class="o">,</span> 10.676 - <span class="sx">url(hyper.cur)</span><span class="o">,</span> 10.677 - <span class="sx">url(hyper.png)</span> <span class="m">2</span> <span class="m">3</span><span class="o">,</span> 10.678 - <span class="k">pointer</span> 10.679 +<pre><code class="lang-css highlight"><span class="nt">:link,:visited </span><span class="p">{</span> 10.680 + <span class="k">cursor</span><span class="p">:</span> <span class="nf">url</span><span class="p">(</span><span class="s">example.svg#linkcursor</span><span class="p">),</span> 10.681 + <span class="nf">url</span><span class="p">(</span><span class="s">hyper.cur</span><span class="p">),</span> 10.682 + <span class="nf">url</span><span class="p">(</span><span class="s">hyper.png</span><span class="p">)</span> <span class="m">2</span> <span class="m">3</span><span class="p">,</span> 10.683 + pointer 10.684 <span class="p">}</span></code></pre> 10.685 <p>This example sets the cursor on all hyperlinks (whether visited or not) 10.686 -to an external <a href="http://www.w3.org/TR/SVG/interact.html#CursorElement">SVG cursor</a> (<a data-link-type="biblio" href="#biblio-svg10">[SVG10]</a>, section 16.8.3). 10.687 +to an external <a href="https://www.w3.org/TR/SVG/interact.html#CursorElement">SVG cursor</a> (<a data-link-type="biblio" href="#biblio-svg10">[SVG10]</a>, section 16.8.3). 10.688 User agents that don’t support SVG cursors would simply skip 10.689 to the next value and attempt to use the "hyper.cur" cursor. 10.690 If that cursor format was also not supported, 10.691 @@ -1302,7 +1269,7 @@ 10.692 and render the <span class="css">pointer</span> cursor.</p> 10.693 </div> 10.694 <h5 class="heading settled" data-level="6.1.1.1" id="canvas_cursor"><span class="secno">6.1.1.1. </span><span class="content">Cursor of the canvas</span><a class="self-link" href="#canvas_cursor"></a></h5> 10.695 - <p>The document <a href="http://www.w3.org/TR/CSS21/intro.html#the-canvas">canvas</a> is the infinite surface over which the document is rendered <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. 10.696 + <p>The document <a href="https://www.w3.org/TR/CSS21/intro.html#the-canvas">canvas</a> is the infinite surface over which the document is rendered <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. 10.697 Since no element corresponds to the canvas, 10.698 in order to allow styling of the cursor when not over any element, 10.699 the canvas cursor re-uses the root element’s cursor. 10.700 @@ -1343,7 +1310,7 @@ 10.701 <td>The computed value for <span class="css">auto</span> is <span class="css">auto</span>. For <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | greenyellow | mediumorchid | silver | papayawhip | dimgray | black | springgreen | crimson | lightsalmon | brown | turquoise | lightseagreen | cyan | transparent | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lime | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | maroon | purple | darkkhaki | mediumpurple | cornsilk | red | bisque | burlywood | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | aqua | mediumslateblue | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | mediumvioletred | royalblue | olivedrab | sienna | lightcoral | orangered | navajowhite | slategray | palegreen | mistyrose | seashell | mediumspringgreen | fuchsia | chartreuse | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | lightgreen | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | lightgrey | darkgoldenrod | slateblue | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | linen | darkorange | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | chocolate | lightgray | hotpink | lightyellow | lavenderblush | darkblue | mediumaquamarine | green | blueviolet | peachpuff"><color></a> values, the computed value is as defined for the <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a> <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-3/#color0">color</a> property. 10.702 <tr> 10.703 <th>Animatable: 10.704 - <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a> 10.705 + <td>as <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a> 10.706 </table> 10.707 <dl> 10.708 <dt>auto 10.709 @@ -1357,7 +1324,7 @@ 10.710 <p>The caret is a visible indicator of the insertion point in an element where text (and potentially other content) is inserted by the user. This property controls the color of that visible indicator.</p> 10.711 <p class="note" role="note">Note: caret shape and blinking is outside the scope of this feature and thus unspecified.</p> 10.712 <div class="example" id="example-24147f22"> 10.713 - <a class="self-link" href="#example-24147f22"></a> Example: a textarea with <code class="lang-css highlight"><span class="nt">caret-color</span><span class="o">:</span><span class="nf">#00aacc</span><span class="o">;</span></code> 10.714 + <a class="self-link" href="#example-24147f22"></a> Example: a textarea with <code class="lang-css highlight"><span class="err">caret-color:#00aacc;</span></code> 10.715 <textarea style="caret-color:#00aacc;">caret-color:#00aacc </textarea> 10.716 </div> 10.717 <p class="note" role="note">Note: The caret-color property is at risk.</p> 10.718 @@ -1439,31 +1406,31 @@ 10.719 whose directional focus navigation is set in such a way 10.720 to navigate the focus clockwise (or counter-clockwise) around the diamond shape 10.721 when the user chooses to navigate directionally.</p> 10.722 -<pre><code class="lang-css highlight"><span class="nt">button</span> <span class="p">{</span> <span class="k">position</span><span class="o">:</span><span class="k">absolute</span> <span class="p">}</span> 10.723 +<pre><code class="lang-css highlight"><span class="nt">button </span><span class="p">{</span> <span class="k">position</span><span class="p">:</span>absolute <span class="p">}</span> 10.724 10.725 -<span class="nt">button</span><span class="nf">#b1</span> <span class="p">{</span> 10.726 - <span class="k">top</span><span class="o">:</span><span class="m">0</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span><span class="m">50%</span><span class="p">;</span> 10.727 - <span class="n">nav</span><span class="o">-</span><span class="k">right</span><span class="o">:</span><span class="m">#b2</span><span class="p">;</span> <span class="n">nav</span><span class="o">-</span><span class="k">left</span><span class="o">:</span><span class="m">#b4</span><span class="p">;</span> 10.728 - <span class="n">nav</span><span class="o">-</span><span class="n">down</span><span class="o">:</span><span class="m">#b2</span><span class="p">;</span> <span class="n">nav</span><span class="o">-</span><span class="n">up</span><span class="o">:</span><span class="m">#b4</span><span class="p">;</span> 10.729 -<span class="p">}</span> 10.730 +<span class="nt">button#b1 </span><span class="p">{</span> 10.731 + <span class="k">top</span><span class="p">:</span><span class="m">0</span><span class="p">;</span> <span class="k">left</span><span class="p">:</span><span class="m">5</span><span class="l">0</span>%; 10.732 + nav-right:#b2; nav-left:#b4; 10.733 + nav-down:#b2; nav-up:#b4; 10.734 +} 10.735 10.736 -<span class="nt">button</span><span class="nf">#b2</span> <span class="p">{</span> 10.737 - <span class="k">top</span><span class="o">:</span><span class="m">50%</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span><span class="m">100%</span><span class="p">;</span> 10.738 - <span class="n">nav</span><span class="o">-</span><span class="k">right</span><span class="o">:</span><span class="m">#b3</span><span class="p">;</span> <span class="n">nav</span><span class="o">-</span><span class="k">left</span><span class="o">:</span><span class="m">#b1</span><span class="p">;</span> 10.739 - <span class="n">nav</span><span class="o">-</span><span class="n">down</span><span class="o">:</span><span class="m">#b3</span><span class="p">;</span> <span class="n">nav</span><span class="o">-</span><span class="n">up</span><span class="o">:</span><span class="m">#b1</span><span class="p">;</span> 10.740 -<span class="p">}</span> 10.741 +button#b2 { 10.742 + top:50%; left:100%; 10.743 + nav-right:#b3; nav-left:#b1; 10.744 + nav-down:#b3; nav-up:#b1; 10.745 +} 10.746 10.747 -<span class="nt">button</span><span class="nf">#b3</span> <span class="p">{</span> 10.748 - <span class="k">top</span><span class="o">:</span><span class="m">100%</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span><span class="m">50%</span><span class="p">;</span> 10.749 - <span class="n">nav</span><span class="o">-</span><span class="k">right</span><span class="o">:</span><span class="m">#b4</span><span class="p">;</span> <span class="n">nav</span><span class="o">-</span><span class="k">left</span><span class="o">:</span><span class="m">#b2</span><span class="p">;</span> 10.750 - <span class="n">nav</span><span class="o">-</span><span class="n">down</span><span class="o">:</span><span class="m">#b4</span><span class="p">;</span> <span class="n">nav</span><span class="o">-</span><span class="n">up</span><span class="o">:</span><span class="m">#b2</span><span class="p">;</span> 10.751 -<span class="p">}</span> 10.752 +button#b3 { 10.753 + top:100%; left:50%; 10.754 + nav-right:#b4; nav-left:#b2; 10.755 + nav-down:#b4; nav-up:#b2; 10.756 +} 10.757 10.758 -<span class="nt">button</span><span class="nf">#b4</span> <span class="p">{</span> 10.759 - <span class="k">top</span><span class="o">:</span><span class="m">50%</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span><span class="m">0</span><span class="p">;</span> 10.760 - <span class="n">nav</span><span class="o">-</span><span class="k">right</span><span class="o">:</span><span class="m">#b1</span><span class="p">;</span> <span class="n">nav</span><span class="o">-</span><span class="k">left</span><span class="o">:</span><span class="m">#b3</span><span class="p">;</span> 10.761 - <span class="n">nav</span><span class="o">-</span><span class="n">down</span><span class="o">:</span><span class="m">#b1</span><span class="p">;</span> <span class="n">nav</span><span class="o">-</span><span class="n">up</span><span class="o">:</span><span class="m">#b3</span><span class="p">;</span> 10.762 -<span class="p">}</span></code></pre> 10.763 +button#b4 { 10.764 + top:50%; left:0; 10.765 + nav-right:#b1; nav-left:#b3; 10.766 + nav-down:#b1; nav-up:#b3; 10.767 +}</code></pre> 10.768 <p>Whatever markup sequence the buttons may have 10.769 (which is not specified in this example) 10.770 is irrelevant in this case because they are positioned, and yet, 10.771 @@ -1474,7 +1441,7 @@ 10.772 <h5 class="heading settled" data-level="6.3.1.2" id="example-moving-focus-to-inside-a-frame"><span class="secno">6.3.1.2. </span><span class="content">Example: moving focus to inside a frame</span><a class="self-link" href="#example-moving-focus-to-inside-a-frame"></a></h5> 10.773 <p>Moving the focus to an element in a specific frame requires both the element’s id and the frame’s name.</p> 10.774 <p>This example shows how to make navigating left from the button with id "foo" move the focus to the element with id "bar" within the frame named "sidebar".</p> 10.775 -<pre><code class="lang-css highlight"><span class="nt">button</span><span class="nf">#foo</span> <span class="p">{</span> <span class="n">nav</span><span class="o">-</span><span class="k">left</span><span class="o">:</span> <span class="m">#bar</span> <span class="s2">"sidebar"</span><span class="p">;</span> <span class="p">}</span></code></pre> 10.776 +<pre><code class="lang-css highlight"><span class="nt">button#foo </span><span class="p">{</span> <span class="k">nav-left</span><span class="p">:</span> #bar <span class="s">"sidebar"</span><span class="p">;</span> <span class="p">}</span></code></pre> 10.777 </div> 10.778 <h4 class="heading settled" data-level="6.3.2" id="input-method-editor"><span class="secno">6.3.2. </span><span class="content">Obsolete: the ime-mode property</span><a class="self-link" href="#input-method-editor"></a></h4> 10.779 <p>"ime-mode" is a property somewhat implemented in some browsers, that is problematic and officially obsoleted by this specification.</p> 10.780 @@ -1485,8 +1452,8 @@ 10.781 <div class="example" id="example-8592b31b"> 10.782 <a class="self-link" href="#example-8592b31b"></a> 10.783 <p>Example: user preference </p> 10.784 -<pre><code class="lang-css highlight"><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">password</span><span class="o">]</span> <span class="p">{</span> <span class="n">ime</span><span class="o">-</span><span class="n">mode</span><span class="o">:</span> <span class="k">auto</span><span class="err"> </span><span class="cp">!important</span><span class="p">;</span> 10.785 -<span class="p">}</span></code></pre> 10.786 +<pre><code class="lang-css highlight"><span class="nt">input[type=password] </span><span class="p">{</span> <span class="k">ime-mode</span><span class="p">:</span> auto !important; 10.787 +}</code></pre> 10.788 </div> 10.789 <p>This example CSS may be placed into a user style sheet file to force password input fields to behave in a default manner.</p> 10.790 <p>This specification deliberately does not attempt to document the functionality of legacy ime-mode implementations nor what they specifically support because it does not make sense to pursue or recommend any such path.</p> 10.791 @@ -1514,12 +1481,12 @@ 10.792 and <span class="h-card">Domel</span>.</p> 10.793 <h2 class="no-num heading settled" id="changes"><span class="content">Appendix B. Changes</span><a class="self-link" href="#changes"></a></h2> 10.794 <p>This appendix is <em>informative</em>.</p> 10.795 - <p>This appendix describes changes from the <a href="http://www.w3.org/TR/2015/CR-css-ui-3-20150707/">Candidate Recommendation (CR) of 7 Jul 2015</a>.</p> 10.796 + <p>This appendix describes changes from the <a href="https://www.w3.org/TR/2015/CR-css-ui-3-20150707/">Candidate Recommendation (CR) of 7 Jul 2015</a>.</p> 10.797 <ul> 10.798 <li>Editorial and markup tweaks 10.799 <li>Clarify that cursor selection is based on hit testing 10.800 <li>Clean-up default style sheet additions for HTML 10.801 - <li>Optionally allowed the <span class="css">resize</span> property to apply to 10.802 + <li>Optionally allow the <span class="css">resize</span> property to apply to 10.803 replaced elements representing images or videos 10.804 and to iframes, 10.805 for compatibility with level 4. 10.806 @@ -1584,132 +1551,132 @@ 10.807 <h2 class="no-num heading settled" id="default-style-sheet"><span class="content">Appendix D. Default style sheet additions for HTML</span><a class="self-link" href="#default-style-sheet"></a></h2> 10.808 <p>This appendix is <em>informative</em>.</p> 10.809 <p>Potential additions to the base style sheet to express HTML form controls, and a few dynamic presentation attributes:</p> 10.810 -<pre class="lang-css highlight"><span class="nd">:enabled:focus</span> <span class="p">{</span> 10.811 - <span class="k">outline</span><span class="o">:</span> <span class="m">2px</span> <span class="k">inset</span><span class="p">;</span> 10.812 +<pre class="lang-css highlight"><span class="nt">:enabled:focus </span><span class="p">{</span> 10.813 + <span class="k">outline</span><span class="p">:</span> <span class="m">2</span><span class="l">px</span> inset<span class="p">;</span> 10.814 <span class="p">}</span> 10.815 10.816 -<span class="nt">button</span><span class="o">,</span> 10.817 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">button</span><span class="o">],</span> 10.818 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">reset</span><span class="o">],</span> 10.819 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">submit</span><span class="o">],</span> 10.820 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">],</span> 10.821 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">radio</span><span class="o">],</span> 10.822 -<span class="nt">textarea</span><span class="o">,</span> 10.823 -<span class="nt">input</span><span class="o">,</span> 10.824 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">text</span><span class="o">],</span> 10.825 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">password</span><span class="o">],</span> 10.826 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">image</span><span class="o">]</span> 10.827 +<span class="nt">button,</span> 10.828 +<span class="nt">input[type=button],</span> 10.829 +<span class="nt">input[type=reset],</span> 10.830 +<span class="nt">input[type=submit],</span> 10.831 +<span class="nt">input[type=checkbox],</span> 10.832 +<span class="nt">input[type=radio],</span> 10.833 +<span class="nt">textarea,</span> 10.834 +<span class="nt">input,</span> 10.835 +<span class="nt">input[type=text],</span> 10.836 +<span class="nt">input[type=password],</span> 10.837 +<span class="nt">input[type=image]</span> 10.838 <span class="p">{</span> 10.839 - <span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span> 10.840 + <span class="k">display</span><span class="p">:</span> inline-block<span class="p">;</span> 10.841 <span class="p">}</span> 10.842 10.843 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">button</span><span class="o">],</span> 10.844 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">reset</span><span class="o">],</span> 10.845 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">submit</span><span class="o">],</span> 10.846 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">],</span> 10.847 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">radio</span><span class="o">],</span> 10.848 -<span class="nt">input</span><span class="o">,</span> 10.849 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">text</span><span class="o">],</span> 10.850 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">password</span><span class="o">],</span> 10.851 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">image</span><span class="o">]</span> 10.852 +<span class="nt">input[type=button],</span> 10.853 +<span class="nt">input[type=reset],</span> 10.854 +<span class="nt">input[type=submit],</span> 10.855 +<span class="nt">input[type=checkbox],</span> 10.856 +<span class="nt">input[type=radio],</span> 10.857 +<span class="nt">input,</span> 10.858 +<span class="nt">input[type=text],</span> 10.859 +<span class="nt">input[type=password],</span> 10.860 +<span class="nt">input[type=image]</span> 10.861 <span class="p">{</span> 10.862 - <span class="k">white-space</span><span class="o">:</span> <span class="k">nowrap</span><span class="p">;</span> 10.863 + <span class="k">white-space</span><span class="p">:</span> nowrap<span class="p">;</span> 10.864 <span class="p">}</span> 10.865 10.866 <span class="nt">button</span> 10.867 <span class="p">{</span> 10.868 -<span class="c">/* white space handling of BUTTON tags in particular */</span> 10.869 - <span class="k">white-space</span><span class="o">:</span><span class="k">normal</span><span class="p">;</span> 10.870 -<span class="p">}</span> 10.871 +<span class="p">/</span>* white space handling of BUTTON tags in particular */ 10.872 + white-space:normal; 10.873 +} 10.874 10.875 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">reset</span><span class="o">]</span><span class="nd">:lang</span><span class="o">(</span><span class="nt">en</span><span class="o">)</span> 10.876 -<span class="p">{</span> 10.877 -<span class="c">/* default content of HTML input type=reset button, per language */</span> 10.878 - <span class="k">content</span><span class="o">:</span> <span class="s2">"Reset"</span><span class="p">;</span> 10.879 -<span class="p">}</span> 10.880 +input[type=reset]:lang(en) 10.881 +{ 10.882 +/* default content of HTML input type=reset button, per language */ 10.883 + content: "Reset"; 10.884 +} 10.885 10.886 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">submit</span><span class="o">]</span><span class="nd">:lang</span><span class="o">(</span><span class="nt">en</span><span class="o">)</span> 10.887 -<span class="p">{</span> 10.888 -<span class="c">/* default content of HTML input type=submit button, per language */</span> 10.889 - <span class="k">content</span><span class="o">:</span> <span class="s2">"Submit"</span><span class="p">;</span> 10.890 -<span class="p">}</span> 10.891 +input[type=submit]:lang(en) 10.892 +{ 10.893 +/* default content of HTML input type=submit button, per language */ 10.894 + content: "Submit"; 10.895 +} 10.896 10.897 -<span class="c">/* UAs should use language-specific Reset/Submit rules for others. */</span> 10.898 +/* UAs should use language-specific Reset/Submit rules for others. */ 10.899 10.900 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">button</span><span class="o">],</span> 10.901 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">reset</span><span class="o">][</span><span class="nt">value</span><span class="o">],</span> 10.902 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">submit</span><span class="o">][</span><span class="nt">value</span><span class="o">]</span> 10.903 -<span class="p">{</span> 10.904 -<span class="c">/* text content/labels of HTML "input" buttons */</span> 10.905 - <span class="k">content</span><span class="o">:</span> <span class="n">attr</span><span class="p">(</span><span class="n">value</span><span class="p">);</span> 10.906 -<span class="p">}</span> 10.907 +input[type=button], 10.908 +input[type=reset][value], 10.909 +input[type=submit][value] 10.910 +{ 10.911 +/* text content/labels of HTML "input" buttons */ 10.912 + content: attr(value); 10.913 +} 10.914 10.915 -<span class="nt">textarea</span> 10.916 -<span class="p">{</span> 10.917 -<span class="c">/* white space handling of TEXTAREA tags in particular */</span> 10.918 - <span class="k">white-space</span><span class="o">:</span><span class="n">pre</span><span class="o">-</span><span class="n">wrap</span><span class="p">;</span> 10.919 - <span class="n">resize</span><span class="o">:</span> <span class="k">both</span><span class="p">;</span> 10.920 -<span class="p">}</span> 10.921 +textarea 10.922 +{ 10.923 +/* white space handling of TEXTAREA tags in particular */ 10.924 + white-space:pre-wrap; 10.925 + resize: both; 10.926 +} 10.927 10.928 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">hidden</span><span class="o">]</span> 10.929 -<span class="p">{</span> 10.930 -<span class="c">/* appearance of the HTML hidden text field in particular */</span> 10.931 - <span class="k">display</span><span class="o">:</span> <span class="k">none</span> <span class="cp">!important</span><span class="p">;</span> 10.932 -<span class="p">}</span> 10.933 +input[type=hidden] 10.934 +{ 10.935 +/* appearance of the HTML hidden text field in particular */ 10.936 + display: none !important; 10.937 +} 10.938 10.939 -<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">image</span><span class="o">]</span> 10.940 -<span class="p">{</span> 10.941 - <span class="k">content</span><span class="o">:</span> <span class="n">attr</span><span class="p">(</span><span class="n">src</span><span class="o">,</span><span class="k">url</span><span class="p">);</span> 10.942 - <span class="k">border</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> 10.943 -<span class="p">}</span> 10.944 +input[type=image] 10.945 +{ 10.946 + content: attr(src,url); 10.947 + border: none; 10.948 +} 10.949 10.950 -<span class="nt">select</span><span class="o">[</span><span class="nt">size</span><span class="o">]</span> 10.951 -<span class="p">{</span> 10.952 -<span class="c">/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */</span> 10.953 - <span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span> 10.954 - <span class="k">height</span><span class="o">:</span> <span class="n">attr</span><span class="p">(</span><span class="k">size</span><span class="o">,</span><span class="n">em</span><span class="p">);</span> 10.955 -<span class="p">}</span> 10.956 +select[size] 10.957 +{ 10.958 +/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */ 10.959 + display: inline-block; 10.960 + height: attr(size,em); 10.961 +} 10.962 10.963 -<span class="nt">select</span><span class="o">,</span><span class="nt">select</span><span class="o">[</span><span class="nt">size</span><span class="o">=</span><span class="nt">1</span><span class="o">]</span> 10.964 -<span class="p">{</span> 10.965 -<span class="c">/* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */</span> 10.966 - <span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span> 10.967 - <span class="k">height</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span> 10.968 - <span class="k">overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span> 10.969 -<span class="p">}</span> 10.970 +select,select[size=1] 10.971 +{ 10.972 +/* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */ 10.973 + display: inline-block; 10.974 + height: 1em; 10.975 + overflow: hidden; 10.976 +} 10.977 10.978 -<span class="nt">select</span><span class="o">[</span><span class="nt">size</span><span class="o">]</span><span class="nd">:active</span> 10.979 -<span class="p">{</span> 10.980 -<span class="c">/* active HTML <select> w/ size more than 1 - appearance of active list */</span> 10.981 - <span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span> 10.982 -<span class="p">}</span> 10.983 +select[size]:active 10.984 +{ 10.985 +/* active HTML <select> w/ size more than 1 - appearance of active list */ 10.986 + display: inline-block; 10.987 +} 10.988 10.989 -<span class="nt">optgroup</span><span class="o">,</span><span class="nt">option</span> 10.990 -<span class="p">{</span> 10.991 - <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span> 10.992 - <span class="k">white-space</span><span class="o">:</span> <span class="k">nowrap</span><span class="p">;</span> 10.993 -<span class="p">}</span> 10.994 +optgroup,option 10.995 +{ 10.996 + display: block; 10.997 + white-space: nowrap; 10.998 +} 10.999 10.1000 -<span class="nt">optgroup</span><span class="o">[</span><span class="nt">label</span><span class="o">],</span><span class="nt">option</span><span class="o">[</span><span class="nt">label</span><span class="o">]</span> 10.1001 -<span class="p">{</span> 10.1002 - <span class="k">content</span><span class="o">:</span> <span class="n">attr</span><span class="p">(</span><span class="n">label</span><span class="p">);</span> 10.1003 -<span class="p">}</span> 10.1004 +optgroup[label],option[label] 10.1005 +{ 10.1006 + content: attr(label); 10.1007 +} 10.1008 10.1009 -<span class="nt">option</span><span class="o">[</span><span class="nt">selected</span><span class="o">]:</span><span class="nd">:before</span> 10.1010 -<span class="p">{</span> 10.1011 - <span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="p">;</span> 10.1012 - <span class="k">content</span><span class="o">:</span> <span class="n">check</span><span class="p">;</span> 10.1013 -<span class="p">}</span> 10.1014 +option[selected]::before 10.1015 +{ 10.1016 + display: inline; 10.1017 + content: check; 10.1018 +} 10.1019 10.1020 -<span class="c">/* Though FRAME resizing is not directly addressed by this specification,</span> 10.1021 -<span class="c"> the following rules may provide an approximation of reasonable behavior. */</span> 10.1022 +/* Though FRAME resizing is not directly addressed by this specification, 10.1023 + the following rules may provide an approximation of reasonable behavior. */ 10.1024 10.1025 -<span class="c">/*</span> 10.1026 +/* 10.1027 10.1028 -<span class="c">frame { resize:both }</span> 10.1029 -<span class="c">frame[noresize] { resize:none }</span> 10.1030 +frame { resize:both } 10.1031 +frame[noresize] { resize:none } 10.1032 10.1033 -<span class="c">*/</span></pre> 10.1034 +*/</pre> 10.1035 <h2 class="no-num heading settled" id="test-suite"><span class="content">Appendix E: Test Suite</span><a class="self-link" href="#test-suite"></a></h2> 10.1036 <p>This appendix is <em>informative</em>.</p> 10.1037 <p>There is a partial test suite 10.1038 @@ -1719,104 +1686,101 @@ 10.1039 These tests will be made available from the <a href="http://www.w3.org/Style/CSS/Test/">CSS Test Suites</a> home page.</p> 10.1040 </main> 10.1041 <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2> 10.1042 - <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3> 10.1043 + <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3> 10.1044 <p>Conformance requirements are expressed with a combination of 10.1045 - descriptive assertions and RFC 2119 terminology. The key words "MUST", 10.1046 - "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", 10.1047 - "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this 10.1048 - document are to be interpreted as described in RFC 2119. 10.1049 - However, for readability, these words do not appear in all uppercase 10.1050 - letters in this specification. </p> 10.1051 + descriptive assertions and RFC 2119 terminology. The key words “MUST”, 10.1052 + “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 10.1053 + “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 10.1054 + document are to be interpreted as described in RFC 2119. 10.1055 + However, for readability, these words do not appear in all uppercase 10.1056 + letters in this specification. </p> 10.1057 <p>All of the text of this specification is normative except sections 10.1058 - explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p> 10.1059 - <p>Examples in this specification are introduced with the words "for example" 10.1060 - or are set apart from the normative text with <code>class="example"</code>, 10.1061 - like this: </p> 10.1062 - <div class="example" id="example-f839f6c8"> 10.1063 - <a class="self-link" href="#example-f839f6c8"></a> 10.1064 - <p>This is an example of an informative example.</p> 10.1065 + explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p> 10.1066 + <p>Examples in this specification are introduced with the words “for example” 10.1067 + or are set apart from the normative text with <code>class="example"</code>, 10.1068 + like this: </p> 10.1069 + <div class="example" id="example-52448c84"> 10.1070 + <a class="self-link" href="#example-52448c84"></a> 10.1071 + <p>This is an example of an informative example. </p> 10.1072 </div> 10.1073 - <p>Informative notes begin with the word "Note" and are set apart from the 10.1074 - normative text with <code>class="note"</code>, like this: </p> 10.1075 - <p class="note" role="note">Note, this is an informative note.</p> 10.1076 + <p>Informative notes begin with the word “Note” and are set apart from the 10.1077 + normative text with <code>class="note"</code>, like this: </p> 10.1078 + <p class="note" role="note">Note, this is an informative note. </p> 10.1079 <p>Advisements are normative sections styled to evoke special attention and are 10.1080 - set apart from other normative text with <code><strong class="advisement"></code>, like 10.1081 - this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p> 10.1082 - <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3> 10.1083 + set apart from other normative text with <code><strong class="advisement"></code>, like 10.1084 + this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p> 10.1085 + <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3> 10.1086 <p>Conformance to this specification 10.1087 - is defined for three conformance classes: </p> 10.1088 + is defined for three conformance classes: </p> 10.1089 <dl> 10.1090 <dt>style sheet 10.1091 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 10.1092 - style sheet</a>. 10.1093 + <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS 10.1094 + style sheet</a>. 10.1095 <dt>renderer 10.1096 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders 10.1097 - documents that use them. 10.1098 + <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders 10.1099 + documents that use them. 10.1100 <dt>authoring tool 10.1101 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 10.1102 + <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 10.1103 </dl> 10.1104 <p>A style sheet is conformant to this specification 10.1105 - if all of its statements that use syntax defined in this module are valid 10.1106 - according to the generic CSS grammar and the individual grammars of each 10.1107 - feature defined in this module. </p> 10.1108 + if all of its statements that use syntax defined in this module are valid 10.1109 + according to the generic CSS grammar and the individual grammars of each 10.1110 + feature defined in this module. </p> 10.1111 <p>A renderer is conformant to this specification 10.1112 - if, in addition to interpreting the style sheet as defined by the 10.1113 - appropriate specifications, it supports all the features defined 10.1114 - by this specification by parsing them correctly 10.1115 - and rendering the document accordingly. However, the inability of a 10.1116 - UA to correctly render a document due to limitations of the device 10.1117 - does not make the UA non-conformant. (For example, a UA is not 10.1118 - required to render color on a monochrome monitor.) </p> 10.1119 + if, in addition to interpreting the style sheet as defined by the 10.1120 + appropriate specifications, it supports all the features defined 10.1121 + by this specification by parsing them correctly 10.1122 + and rendering the document accordingly. However, the inability of a 10.1123 + UA to correctly render a document due to limitations of the device 10.1124 + does not make the UA non-conformant. (For example, a UA is not 10.1125 + required to render color on a monochrome monitor.) </p> 10.1126 <p>An authoring tool is conformant to this specification 10.1127 - if it writes style sheets that are syntactically correct according to the 10.1128 - generic CSS grammar and the individual grammars of each feature in 10.1129 - this module, and meet all other conformance requirements of style sheets 10.1130 - as described in this module. </p> 10.1131 - <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3> 10.1132 - <p>So that authors can exploit the forward-compatible parsing rules to 10.1133 - assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 10.1134 - as appropriate</a>) any at-rules, properties, property values, keywords, 10.1135 - and other syntactic constructs for which they have no usable level of 10.1136 - support. In particular, user agents <strong>must not</strong> selectively 10.1137 - ignore unsupported component values and honor supported values in a single 10.1138 - multi-value property declaration: if any value is considered invalid 10.1139 - (as unsupported values must be), CSS requires that the entire declaration 10.1140 - be ignored.</p> 10.1141 - <h3 class="no-ref heading settled" id="experimental"><span class="content"> Experimental implementations</span><a class="self-link" href="#experimental"></a></h3> 10.1142 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 10.1143 - reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 10.1144 - syntax</a> for proprietary and experimental extensions to CSS. </p> 10.1145 - <p>Prior to a specification reaching the Candidate Recommendation stage 10.1146 - in the W3C process, all implementations of a CSS feature are considered 10.1147 - experimental. The CSS Working Group recommends that implementations 10.1148 - use a vendor-prefixed syntax for such features, including those in 10.1149 - W3C Working Drafts. This avoids incompatibilities with future changes 10.1150 - in the draft. </p> 10.1151 - <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3> 10.1152 + if it writes style sheets that are syntactically correct according to the 10.1153 + generic CSS grammar and the individual grammars of each feature in 10.1154 + this module, and meet all other conformance requirements of style sheets 10.1155 + as described in this module. </p> 10.1156 + <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3> 10.1157 + <p>The following sections define several conformance requirements 10.1158 + for implementing CSS responsibly, 10.1159 + in a way that promotes interoperability in the present and future. </p> 10.1160 + <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4> 10.1161 + <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid 10.1162 + (and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>) 10.1163 + any at-rules, properties, property values, keywords, and other syntactic constructs 10.1164 + for which they have no usable level of support</strong>. 10.1165 + In particular, user agents <em>must not</em> selectively ignore 10.1166 + unsupported property values and honor supported values in a single multi-value property declaration: 10.1167 + if any value is considered invalid (as unsupported values must be), 10.1168 + CSS requires that the entire declaration be ignored. </p> 10.1169 + <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4> 10.1170 + <p>To avoid clashes with future stable CSS features, 10.1171 + the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p> 10.1172 + <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4> 10.1173 <p>Once a specification reaches the Candidate Recommendation stage, 10.1174 - non-experimental implementations are possible, and implementors should 10.1175 - release an unprefixed implementation of any CR-level feature they 10.1176 - can demonstrate to be correctly implemented according to spec. </p> 10.1177 + implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation 10.1178 + of any CR-level feature they can demonstrate 10.1179 + to be correctly implemented according to spec, 10.1180 + and should avoid exposing a prefixed variant of that feature. </p> 10.1181 <p>To establish and maintain the interoperability of CSS across 10.1182 - implementations, the CSS Working Group requests that non-experimental 10.1183 - CSS renderers submit an implementation report (and, if necessary, the 10.1184 - testcases used for that implementation report) to the W3C before 10.1185 - releasing an unprefixed implementation of any CSS features. Testcases 10.1186 - submitted to W3C are subject to review and correction by the CSS 10.1187 - Working Group. </p> 10.1188 + implementations, the CSS Working Group requests that non-experimental 10.1189 + CSS renderers submit an implementation report (and, if necessary, the 10.1190 + testcases used for that implementation report) to the W3C before 10.1191 + releasing an unprefixed implementation of any CSS features. Testcases 10.1192 + submitted to W3C are subject to review and correction by the CSS 10.1193 + Working Group. </p> 10.1194 <p>Further information on submitting testcases and implementation reports 10.1195 - can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 10.1196 - Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">[email protected]</a> mailing list. </p> 10.1197 + can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 10.1198 + Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">[email protected]</a> mailing list. </p> 10.1199 <h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> 10.1200 <h3 class="no-num heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> 10.1201 - <ul class="indexlist"> 10.1202 + <ul class="index"> 10.1203 <li><a href="#valdef-box-sizing-border-box">border-box</a><span>, in §3.1</span> 10.1204 <li><a href="#propdef-box-sizing">box-sizing</a><span>, in §3.1</span> 10.1205 <li><a href="#propdef-caret-color">caret-color</a><span>, in §6.2.1</span> 10.1206 - <li><a href="#clip">clip</a><span>, in §5.2</span> 10.1207 + <li><a href="#overflow-clip0">clip</a><span>, in §5.2</span> 10.1208 <li><a href="#valdef-box-sizing-content-box">content-box</a><span>, in §3.1</span> 10.1209 <li><a href="#propdef-cursor">cursor</a><span>, in §6.1.1</span> 10.1210 - <li><a href="#ellipsis">ellipsis</a><span>, in §5.2</span> 10.1211 + <li><a href="#overflow-ellipsis0">ellipsis</a><span>, in §5.2</span> 10.1212 <li><a href="#invert">invert</a><span>, in §4.4</span> 10.1213 <li><a href="#max-inner-height">max inner height</a><span>, in §3.1</span> 10.1214 <li><a href="#max-inner-width">max inner width</a><span>, in §3.1</span> 10.1215 @@ -1835,17 +1799,17 @@ 10.1216 <li><a href="#propdef-text-overflow">text-overflow</a><span>, in §5.2</span> 10.1217 </ul> 10.1218 <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> 10.1219 - <ul class="indexlist"> 10.1220 + <ul class="index"> 10.1221 <li> 10.1222 <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> defines the following terms: 10.1223 <ul> 10.1224 - <li><a href="http://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a> 10.1225 - <li><a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">bottom</a> 10.1226 - <li><a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">left</a> 10.1227 - <li><a href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> 10.1228 - <li><a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">right</a> 10.1229 - <li><a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">top</a> 10.1230 - <li><a href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">visible</a> 10.1231 + <li><a href="https://www.w3.org/TR/CSS21/box.html#border-edge">border edge</a> 10.1232 + <li><a href="https://www.w3.org/TR/CSS21/visuren.html#position-props">bottom</a> 10.1233 + <li><a href="https://www.w3.org/TR/CSS21/visuren.html#position-props">left</a> 10.1234 + <li><a href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> 10.1235 + <li><a href="https://www.w3.org/TR/CSS21/visuren.html#position-props">right</a> 10.1236 + <li><a href="https://www.w3.org/TR/CSS21/visuren.html#position-props">top</a> 10.1237 + <li><a href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">visible</a> 10.1238 </ul> 10.1239 <li> 10.1240 <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> defines the following terms: 10.1241 @@ -1875,9 +1839,9 @@ 10.1242 <li><a href="https://drafts.csswg.org/css-images-3/#default-sizing-algorithm">default sizing algorithm</a> 10.1243 </ul> 10.1244 <li> 10.1245 - <a data-link-type="biblio" href="#biblio-css-overflow-3">[css-overflow-3]</a> defines the following terms: 10.1246 + <a data-link-type="biblio" href="#biblio-css-overflow-4">[css-overflow-4]</a> defines the following terms: 10.1247 <ul> 10.1248 - <li><a href="https://drafts.csswg.org/css-overflow-3/#valdef-continue-overflow">overflow</a> 10.1249 + <li><a href="https://drafts.csswg.org/css-overflow-4/#valdef-continue-overflow">overflow</a> 10.1250 </ul> 10.1251 <li> 10.1252 <a data-link-type="biblio" href="#biblio-css-values-3">[css-values]</a> defines the following terms: 10.1253 @@ -1954,19 +1918,19 @@ 10.1254 <dt id="biblio-uax29"><a class="self-link" href="#biblio-uax29"></a>[UAX29] 10.1255 <dd>Mark Davis. <a href="http://www.unicode.org/unicode/reports/tr29/tr29-9.html">Text Boundaries</a>. 25 March 2005. Unicode Standard Annex #29. URL: <a href="http://www.unicode.org/unicode/reports/tr29/tr29-9.html">http://www.unicode.org/unicode/reports/tr29/tr29-9.html</a> 10.1256 <dt id="biblio-css-backgrounds-3"><a class="self-link" href="#biblio-css-backgrounds-3"></a>[CSS-BACKGROUNDS-3] 10.1257 - <dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a> 10.1258 + <dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="https://www.w3.org/TR/css3-background/">https://www.w3.org/TR/css3-background/</a> 10.1259 <dt id="biblio-css-color-3"><a class="self-link" href="#biblio-css-color-3"></a>[CSS-COLOR-3] 10.1260 - <dd>CSS Color Module Level 3 URL: <a href="http://www.w3.org/TR/css3-color/">http://www.w3.org/TR/css3-color/</a> 10.1261 + <dd>CSS Color Module Level 3 URL: <a href="https://www.w3.org/TR/css3-color/">https://www.w3.org/TR/css3-color/</a> 10.1262 <dt id="biblio-css-images-3"><a class="self-link" href="#biblio-css-images-3"></a>[CSS-IMAGES-3] 10.1263 - <dd>CSS Image Values and Replaced Content Module Level 3 URL: <a href="http://www.w3.org/TR/css3-images/">http://www.w3.org/TR/css3-images/</a> 10.1264 - <dt id="biblio-css-overflow-3"><a class="self-link" href="#biblio-css-overflow-3"></a>[CSS-OVERFLOW-3] 10.1265 - <dd>David Baron. <a href="http://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 18 April 2013. WD. URL: <a href="http://www.w3.org/TR/css-overflow-3/">http://www.w3.org/TR/css-overflow-3/</a> 10.1266 + <dd>CSS Image Values and Replaced Content Module Level 3 URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a> 10.1267 + <dt id="biblio-css-overflow-4"><a class="self-link" href="#biblio-css-overflow-4"></a>[CSS-OVERFLOW-4] 10.1268 + <dd>CSS Overflow Module Level 4 URL: <a href="https://drafts.csswg.org/css-overflow-4/">https://drafts.csswg.org/css-overflow-4/</a> 10.1269 <dt id="biblio-css-values"><a class="self-link" href="#biblio-css-values"></a>[CSS-VALUES] 10.1270 <dd>Tab Atkins Jr.; Elika Etemad. <a href="http://www.w3.org/TR/css-values/">CSS Values and Units Module Level 3</a>. 11 June 2015. CR. URL: <a href="http://www.w3.org/TR/css-values/">http://www.w3.org/TR/css-values/</a> 10.1271 <dt id="biblio-css-writing-modes-3"><a class="self-link" href="#biblio-css-writing-modes-3"></a>[CSS-WRITING-MODES-3] 10.1272 - <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 20 March 2014. CR. URL: <a href="http://www.w3.org/TR/css-writing-modes-3/">http://www.w3.org/TR/css-writing-modes-3/</a> 10.1273 + <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 15 December 2015. CR. URL: <a href="http://www.w3.org/TR/css-writing-modes-3/">http://www.w3.org/TR/css-writing-modes-3/</a> 10.1274 <dt id="biblio-css3-writing-modes"><a class="self-link" href="#biblio-css3-writing-modes"></a>[CSS3-WRITING-MODES] 10.1275 - <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 20 March 2014. CR. URL: <a href="http://www.w3.org/TR/css-writing-modes-3/">http://www.w3.org/TR/css-writing-modes-3/</a> 10.1276 + <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 15 December 2015. CR. URL: <a href="http://www.w3.org/TR/css-writing-modes-3/">http://www.w3.org/TR/css-writing-modes-3/</a> 10.1277 <dt id="biblio-rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[RFC2119] 10.1278 <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a> 10.1279 <dt id="biblio-svg-integration"><a class="self-link" href="#biblio-svg-integration"></a>[SVG-INTEGRATION] 10.1280 @@ -1992,109 +1956,110 @@ 10.1281 <dd>Ian Hickson; et al. <a href="http://www.w3.org/TR/html5/">HTML5</a>. 28 October 2014. REC. URL: <a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a> 10.1282 </dl> 10.1283 <h2 class="no-num heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> 10.1284 - <table class="proptable data"> 10.1285 - <thead> 10.1286 - <tr> 10.1287 - <th scope="col">Name 10.1288 - <th scope="col">Value 10.1289 - <th scope="col">Initial 10.1290 - <th scope="col">Applies to 10.1291 - <th scope="col">Inh. 10.1292 - <th scope="col">%ages 10.1293 - <th scope="col">Media 10.1294 - <th scope="col">Animatable 10.1295 - <th scope="col">Computed value 10.1296 - <tbody> 10.1297 - <tr> 10.1298 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-box-sizing">box-sizing</a> 10.1299 - <td>content-box | 10.1300 + <div class="big-element-wrapper"> 10.1301 + <table class="index"> 10.1302 + <thead> 10.1303 + <tr> 10.1304 + <th scope="col">Name 10.1305 + <th scope="col">Value 10.1306 + <th scope="col">Initial 10.1307 + <th scope="col">Applies to 10.1308 + <th scope="col">Inh. 10.1309 + <th scope="col">%ages 10.1310 + <th scope="col">Media 10.1311 + <th scope="col">Animatable 10.1312 + <th scope="col">Computed value 10.1313 + <tbody> 10.1314 + <tr> 10.1315 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-box-sizing">box-sizing</a> 10.1316 + <td>content-box | 10.1317 border-box 10.1318 - <td>content-box 10.1319 - <td>all elements that accept width or height 10.1320 - <td>no 10.1321 - <td>N/A 10.1322 - <td>visual 10.1323 - <td>no 10.1324 - <td>specified value 10.1325 - <tr> 10.1326 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline">outline</a> 10.1327 - <td>[ <outline-color> || <outline-style> || 10.1328 + <td>content-box 10.1329 + <td>all elements that accept width or height 10.1330 + <td>no 10.1331 + <td>N/A 10.1332 + <td>visual 10.1333 + <td>no 10.1334 + <td>specified value 10.1335 + <tr> 10.1336 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline">outline</a> 10.1337 + <td>[ <outline-color> || <outline-style> || 10.1338 <outline-width> ] 10.1339 - <td>see individual properties 10.1340 - <td>all elements 10.1341 - <td>no 10.1342 - <td>N/A 10.1343 - <td>visual 10.1344 - <td>see individual properties 10.1345 - <td>see individual properties 10.1346 - <tr> 10.1347 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-width">outline-width</a> 10.1348 - <td><‘border-width’> 10.1349 - <td>medium 10.1350 - <td>all elements 10.1351 - <td>no 10.1352 - <td>N/A 10.1353 - <td>visual 10.1354 - <td>as length 10.1355 - <td>absolute length; 0 if the outline style is none. 10.1356 - <tr> 10.1357 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-style">outline-style</a> 10.1358 - <td>auto | <‘border-style’> 10.1359 - <td>none 10.1360 - <td>all elements 10.1361 - <td>no 10.1362 - <td>N/A 10.1363 - <td>visual 10.1364 - <td>no 10.1365 - <td>specified value 10.1366 - <tr> 10.1367 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-color">outline-color</a> 10.1368 - <td><color> | invert 10.1369 - <td>invert 10.1370 - <td>all elements 10.1371 - <td>no 10.1372 - <td>N/A 10.1373 - <td>visual 10.1374 - <td>as color 10.1375 - <td>The computed value for invert is invert. For <color> values, the computed value is as defined for the [CSS3COLOR] color property. 10.1376 - <tr> 10.1377 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-offset">outline-offset</a> 10.1378 - <td><length> 10.1379 - <td>0 10.1380 - <td>all elements 10.1381 - <td>no 10.1382 - <td>N/A 10.1383 - <td>visual 10.1384 - <td>as length 10.1385 - <td><length> value in absolute units (px or physical). 10.1386 - <tr> 10.1387 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-resize">resize</a> 10.1388 - <td>none | both | horizontal | vertical 10.1389 - <td>none 10.1390 - <td>elements with overflow other than visible, 10.1391 + <td>see individual properties 10.1392 + <td>all elements 10.1393 + <td>no 10.1394 + <td>N/A 10.1395 + <td>visual 10.1396 + <td>see individual properties 10.1397 + <td>see individual properties 10.1398 + <tr> 10.1399 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-width">outline-width</a> 10.1400 + <td><‘border-width’> 10.1401 + <td>medium 10.1402 + <td>all elements 10.1403 + <td>no 10.1404 + <td>N/A 10.1405 + <td>visual 10.1406 + <td>as length 10.1407 + <td>absolute length; 0 if the outline style is none. 10.1408 + <tr> 10.1409 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-style">outline-style</a> 10.1410 + <td>auto | <‘border-style’> 10.1411 + <td>none 10.1412 + <td>all elements 10.1413 + <td>no 10.1414 + <td>N/A 10.1415 + <td>visual 10.1416 + <td>no 10.1417 + <td>specified value 10.1418 + <tr> 10.1419 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-color">outline-color</a> 10.1420 + <td><color> | invert 10.1421 + <td>invert 10.1422 + <td>all elements 10.1423 + <td>no 10.1424 + <td>N/A 10.1425 + <td>visual 10.1426 + <td>as color 10.1427 + <td>The computed value for invert is invert. For <color> values, the computed value is as defined for the [CSS3COLOR] color property. 10.1428 + <tr> 10.1429 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-offset">outline-offset</a> 10.1430 + <td><length> 10.1431 + <td>0 10.1432 + <td>all elements 10.1433 + <td>no 10.1434 + <td>N/A 10.1435 + <td>visual 10.1436 + <td>as length 10.1437 + <td><length> value in absolute units (px or physical). 10.1438 + <tr> 10.1439 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-resize">resize</a> 10.1440 + <td>none | both | horizontal | vertical 10.1441 + <td>none 10.1442 + <td>elements with overflow other than visible, 10.1443 and optionally replaced elements representing images or videos, and iframes 10.1444 - <td>no 10.1445 - <td>N/A 10.1446 - <td>visual 10.1447 - <td>no 10.1448 - <td>specified value. 10.1449 - <tr> 10.1450 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-overflow">text-overflow</a> 10.1451 - <td>[ 10.1452 + <td>no 10.1453 + <td>N/A 10.1454 + <td>visual 10.1455 + <td>no 10.1456 + <td>specified value. 10.1457 + <tr> 10.1458 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-overflow">text-overflow</a> 10.1459 + <td>[ 10.1460 clip | 10.1461 ellipsis | 10.1462 <string> 10.1463 ]{1,2} 10.1464 - <td>clip 10.1465 - <td>block containers 10.1466 - <td>no 10.1467 - <td>N/A 10.1468 - <td>visual 10.1469 - <td>no 10.1470 - <td>as specified 10.1471 - <tr> 10.1472 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-cursor">cursor</a> 10.1473 - <td>[ [<url> [<x> <y>]?,]* 10.1474 + <td>clip 10.1475 + <td>block containers 10.1476 + <td>no 10.1477 + <td>N/A 10.1478 + <td>visual 10.1479 + <td>no 10.1480 + <td>as specified 10.1481 + <tr> 10.1482 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-cursor">cursor</a> 10.1483 + <td>[ [<url> [<x> <y>]?,]* 10.1484 [ auto | default | none | 10.1485 context-menu | help | pointer | progress | wait | 10.1486 cell | crosshair | text | vertical-text | 10.1487 @@ -2106,63 +2071,64 @@ 10.1488 | zoom-in | zoom-out 10.1489 10.1490 ] ] 10.1491 - <td>auto 10.1492 - <td>all elements 10.1493 - <td>yes 10.1494 - <td>N/A 10.1495 - <td>visual, interactive 10.1496 - <td>no 10.1497 - <td>as specified, except with any relative URLs converted to absolute 10.1498 - <tr> 10.1499 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-caret-color">caret-color</a> 10.1500 - <td>auto | <color> 10.1501 - <td>auto 10.1502 - <td>elements that accept input 10.1503 - <td>yes 10.1504 - <td>N/A 10.1505 - <td>interactive 10.1506 - <td>as color 10.1507 - <td>The computed value for auto is auto. For <color> values, the computed value is as defined for the [CSS3COLOR] color property. 10.1508 - <tr> 10.1509 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-up">nav-up</a> 10.1510 - <td>auto | <id> [ current | root | <target-name> ]? 10.1511 - <td>auto 10.1512 - <td>all enabled elements 10.1513 - <td>no 10.1514 - <td>N/A 10.1515 - <td>interactive 10.1516 - <td>no 10.1517 - <td>as specified 10.1518 - <tr> 10.1519 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-right">nav-right</a> 10.1520 - <td>auto | <id> [ current | root | <target-name> ]? 10.1521 - <td>auto 10.1522 - <td>all enabled elements 10.1523 - <td>no 10.1524 - <td>N/A 10.1525 - <td>interactive 10.1526 - <td>no 10.1527 - <td>as specified 10.1528 - <tr> 10.1529 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-down">nav-down</a> 10.1530 - <td>auto | <id> [ current | root | <target-name> ]? 10.1531 - <td>auto 10.1532 - <td>all enabled elements 10.1533 - <td>no 10.1534 - <td>N/A 10.1535 - <td>interactive 10.1536 - <td>no 10.1537 - <td>as specified 10.1538 - <tr> 10.1539 - <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-left">nav-left</a> 10.1540 - <td>auto | <id> [ current | root | <target-name> ]? 10.1541 - <td>auto 10.1542 - <td>all enabled elements 10.1543 - <td>no 10.1544 - <td>N/A 10.1545 - <td>interactive 10.1546 - <td>no 10.1547 - <td>as specified 10.1548 - </table> 10.1549 + <td>auto 10.1550 + <td>all elements 10.1551 + <td>yes 10.1552 + <td>N/A 10.1553 + <td>visual, interactive 10.1554 + <td>no 10.1555 + <td>as specified, except with any relative URLs converted to absolute 10.1556 + <tr> 10.1557 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-caret-color">caret-color</a> 10.1558 + <td>auto | <color> 10.1559 + <td>auto 10.1560 + <td>elements that accept input 10.1561 + <td>yes 10.1562 + <td>N/A 10.1563 + <td>interactive 10.1564 + <td>as color 10.1565 + <td>The computed value for auto is auto. For <color> values, the computed value is as defined for the [CSS3COLOR] color property. 10.1566 + <tr> 10.1567 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-up">nav-up</a> 10.1568 + <td>auto | <id> [ current | root | <target-name> ]? 10.1569 + <td>auto 10.1570 + <td>all enabled elements 10.1571 + <td>no 10.1572 + <td>N/A 10.1573 + <td>interactive 10.1574 + <td>no 10.1575 + <td>as specified 10.1576 + <tr> 10.1577 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-right">nav-right</a> 10.1578 + <td>auto | <id> [ current | root | <target-name> ]? 10.1579 + <td>auto 10.1580 + <td>all enabled elements 10.1581 + <td>no 10.1582 + <td>N/A 10.1583 + <td>interactive 10.1584 + <td>no 10.1585 + <td>as specified 10.1586 + <tr> 10.1587 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-down">nav-down</a> 10.1588 + <td>auto | <id> [ current | root | <target-name> ]? 10.1589 + <td>auto 10.1590 + <td>all enabled elements 10.1591 + <td>no 10.1592 + <td>N/A 10.1593 + <td>interactive 10.1594 + <td>no 10.1595 + <td>as specified 10.1596 + <tr> 10.1597 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-left">nav-left</a> 10.1598 + <td>auto | <id> [ current | root | <target-name> ]? 10.1599 + <td>auto 10.1600 + <td>all enabled elements 10.1601 + <td>no 10.1602 + <td>N/A 10.1603 + <td>interactive 10.1604 + <td>no 10.1605 + <td>as specified 10.1606 + </table> 10.1607 + </div> 10.1608 </body> 10.1609 </html> 10.1610 \ No newline at end of file
11.1 --- a/mediaqueries/Overview.bs Wed Feb 03 19:18:59 2016 +1100 11.2 +++ b/mediaqueries/Overview.bs Thu Feb 04 09:45:32 2016 +1100 11.3 @@ -9,7 +9,7 @@ 11.4 ED: https://drafts.csswg.org/mediaqueries4/ 11.5 TR: https://www.w3.org/TR/mediaqueries-4/ 11.6 Previous Version: https://www.w3.org/TR/2014/WD-mediaqueries-4-20140605/ 11.7 -Editor: Florian Rivoal, Vivliostyle, [email protected], http://www.vivliostyle.com 11.8 +Editor: Florian Rivoal, Vivliostyle, [email protected], http://vivliostyle.com 11.9 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/ 11.10 Former Editor: Håkon Wium Lie, Opera, [email protected] 11.11 Former Editor: Tantek Çelik, Mozilla, [email protected]
12.1 --- a/mediaqueries/Overview.html Wed Feb 03 19:18:59 2016 +1100 12.2 +++ b/mediaqueries/Overview.html Thu Feb 04 09:45:32 2016 +1100 12.3 @@ -79,7 +79,7 @@ 12.4 <dt>Issue Tracking: 12.5 <dd><a href="#issues-index">Inline In Spec</a> 12.6 <dt class="editor">Editors: 12.7 - <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://www.vivliostyle.com">Florian Rivoal</a> (<span class="p-org org">Vivliostyle</span>) <a class="u-email email" href="mailto:[email protected]">[email protected]</a> 12.8 + <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://vivliostyle.com">Florian Rivoal</a> (<span class="p-org org">Vivliostyle</span>) <a class="u-email email" href="mailto:[email protected]">[email protected]</a> 12.9 <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>) 12.10 <dt class="editor">Former Editors: 12.11 <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:[email protected]">Håkon Wium Lie</a> (<span class="p-org org">Opera</span>) 12.12 @@ -2740,4 +2740,4 @@ 12.13 </div> 12.14 </div> 12.15 </body> 12.16 -</html> 12.17 \ No newline at end of file 12.18 +</html>
