changeset
[css-overflow] Flesh out the overflow values, and include clipped
Thu, 30 Apr 2015 00:19:39 +0200
- author
- Florian Rivoal <[email protected]>
- date
- Thu, 30 Apr 2015 00:19:39 +0200
- changeset 15496
- 49f014586321
- parent 15495
- e87a8516021d
- child 15497
- cc8044604ac7
[css-overflow] Flesh out the overflow values, and include clipped
| css-overflow/Overview.bs | file | annotate | diff | comparison | revisions | |
| css-overflow/Overview.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-overflow/Overview.bs Wed Apr 29 21:56:47 2015 +0200 1.2 +++ b/css-overflow/Overview.bs Thu Apr 30 00:19:39 2015 +0200 1.3 @@ -377,7 +377,7 @@ 1.4 1.5 <pre class=propdef> 1.6 Name: overflow-x, overflow-y 1.7 - Value: ''visible'' | ''hidden'' | ''scroll'' | ''auto'' 1.8 + Value: ''visible'' | ''hidden'' | ''clipped'' | ''scroll'' | ''auto'' 1.9 Initial: ''visible'' 1.10 Applies to: block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]] 1.11 Inherited: no 1.12 @@ -396,7 +396,7 @@ 1.13 1.14 <pre class=propdef> 1.15 Name: overflow 1.16 - Value: ''visible'' | ''hidden'' | ''scroll'' | ''auto'' 1.17 + Value: ''visible'' | ''hidden'' | ''clipped'' | ''scroll'' | ''auto'' 1.18 Initial: see individual properties 1.19 Applies to: block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]] 1.20 Inherited: no 1.21 @@ -434,15 +434,66 @@ 1.22 may be rendered outside the block container. 1.23 </dd> 1.24 <dt><dfn>hidden</dfn> 1.25 + <dd>This value indicates that 1.26 + the content is clipped and that no scrolling user interface should be provided by the UA 1.27 + to view the content outside the clipping region. 1.28 + However, the content may still be scrolled programatically, 1.29 + for example using the mechanisms defined in [[CSSOM-VIEW]]. 1.30 + <dt><dfn>clipped</dfn> 1.31 + <dd>Like ''hidden'', 1.32 + this value indicates that 1.33 + the content is clipped 1.34 + and that no scrolling user interface should be provided by the UA 1.35 + to view the content outside the clipping region. 1.36 + In addition, unlike ''overflow: hidden'' 1.37 + which still allows programmatic scrolling, 1.38 + ''overflow: clipped'' forbids scrolling entirely, 1.39 + through any mechanism. 1.40 + 1.41 + Issue: Mozilla implements -moz-hidden-unscrollable, 1.42 + which is similar to ''clipped'', 1.43 + except that it does not cause the element to establish a BFC. 1.44 + Should we match that? 1.45 <dt><dfn>scroll</dfn> 1.46 + <dd>This value indicates that the content is clipped 1.47 + and that if the user agent uses a scrolling mechanism 1.48 + that is visible on the screen (such as a scroll bar or a panner), 1.49 + that mechanism should be displayed for a box 1.50 + whether or not any of its content is clipped. 1.51 + This avoids any problem with scrollbars appearing 1.52 + and disappearing in a dynamic environment. 1.53 + When this value is specified and the target medium is ''print'', 1.54 + overflowing content may be printed. 1.55 <dt><dfn>auto</dfn> 1.56 - <dd> 1.57 - <p class="issue"> 1.58 - Move material from [[CSS21]] and [[CSS3BOX]] here. 1.59 - </p> 1.60 - </dd> 1.61 + <dd>The behavior of the ''overflow/auto'' value is user agent-dependent, 1.62 + but should cause a scrolling mechanism to be provided for overflowing boxes. 1.63 </dl> 1.64 1.65 + Even if 'overflow' is set to ''overflow/visible'', 1.66 + content may be clipped to a UA's document window by the native operating environment. 1.67 + 1.68 + If the computed value of 'overflow' is not ''overflow/visible'', 1.69 + the element creates a block formatting context. 1.70 + 1.71 + UAs must apply the 'overflow' property 1.72 + set on the root element to the viewport. 1.73 + HTML UAs must instead apply the ‘overflow’ property 1.74 + from the <{body}> element to the viewport 1.75 + if the value on the root element is ''visible''. 1.76 + The ''visible'' value when used for the viewport 1.77 + must be interpreted as ''overflow/auto''. 1.78 + The element from which the value is propagated 1.79 + must have a used value for 'overflow' of ''visible''. 1.80 + 1.81 + In the case of a scrollbar being placed on an edge of the element's box, 1.82 + it should be inserted between the inner border edge 1.83 + and the outer padding edge. 1.84 + Any space taken up by the scrollbars should be 1.85 + taken out of (subtracted from the dimensions of) 1.86 + the containing block formed by the element with the scrollbars. 1.87 + 1.88 + Issue: import examples from [[CSS3-BOX]]. 1.89 + 1.90 <p class="issue"> 1.91 Explain which directions allow scrolling and which don't, 1.92 as a function of 'direction'
2.1 --- a/css-overflow/Overview.html Wed Apr 29 21:56:47 2015 +0200 2.2 +++ b/css-overflow/Overview.html Thu Apr 30 00:19:39 2015 +0200 2.3 @@ -160,465 +160,6 @@ 2.4 2.5 2.6 2.7 - <script>self = (typeof window !== 'undefined') 2.8 - ? window // if in browser 2.9 - : ( 2.10 - (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) 2.11 - ? self // if in worker 2.12 - : {} // if in node js 2.13 - ); 2.14 - 2.15 -/** 2.16 - * Prism: Lightweight, robust, elegant syntax highlighting 2.17 - * MIT license http://www.opensource.org/licenses/mit-license.php/ 2.18 - * @author Lea Verou http://lea.verou.me 2.19 - */ 2.20 - 2.21 -var Prism = (function(){ 2.22 - 2.23 -// Private helper vars 2.24 -var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i; 2.25 - 2.26 -var _ = self.Prism = { 2.27 - util: { 2.28 - encode: function (tokens) { 2.29 - if (tokens instanceof Token) { 2.30 - return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias); 2.31 - } else if (_.util.type(tokens) === 'Array') { 2.32 - return tokens.map(_.util.encode); 2.33 - } else { 2.34 - return tokens.replace(/&/g, '&').replace(/</g, '<').replace(/\u00a0/g, ' '); 2.35 - } 2.36 - }, 2.37 - 2.38 - type: function (o) { 2.39 - return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1]; 2.40 - }, 2.41 - 2.42 - // Deep clone a language definition (e.g. to extend it) 2.43 - clone: function (o) { 2.44 - var type = _.util.type(o); 2.45 - 2.46 - switch (type) { 2.47 - case 'Object': 2.48 - var clone = {}; 2.49 - 2.50 - for (var key in o) { 2.51 - if (o.hasOwnProperty(key)) { 2.52 - clone[key] = _.util.clone(o[key]); 2.53 - } 2.54 - } 2.55 - 2.56 - return clone; 2.57 - 2.58 - case 'Array': 2.59 - return o.slice(); 2.60 - } 2.61 - 2.62 - return o; 2.63 - } 2.64 - }, 2.65 - 2.66 - languages: { 2.67 - extend: function (id, redef) { 2.68 - var lang = _.util.clone(_.languages[id]); 2.69 - 2.70 - for (var key in redef) { 2.71 - lang[key] = redef[key]; 2.72 - } 2.73 - 2.74 - return lang; 2.75 - }, 2.76 - 2.77 - // Insert a token before another token in a language literal 2.78 - insertBefore: function (inside, before, insert, root) { 2.79 - root = root || _.languages; 2.80 - var grammar = root[inside]; 2.81 - var ret = {}; 2.82 - 2.83 - for (var token in grammar) { 2.84 - 2.85 - if (grammar.hasOwnProperty(token)) { 2.86 - 2.87 - if (token == before) { 2.88 - 2.89 - for (var newToken in insert) { 2.90 - 2.91 - if (insert.hasOwnProperty(newToken)) { 2.92 - ret[newToken] = insert[newToken]; 2.93 - } 2.94 - } 2.95 - } 2.96 - 2.97 - ret[token] = grammar[token]; 2.98 - } 2.99 - } 2.100 - 2.101 - return root[inside] = ret; 2.102 - }, 2.103 - 2.104 - // Traverse a language definition with Depth First Search 2.105 - DFS: function(o, callback, type) { 2.106 - for (var i in o) { 2.107 - if (o.hasOwnProperty(i)) { 2.108 - callback.call(o, i, o[i], type || i); 2.109 - 2.110 - if (_.util.type(o[i]) === 'Object') { 2.111 - _.languages.DFS(o[i], callback); 2.112 - } else if (_.util.type(o[i]) === 'Array') { 2.113 - _.languages.DFS(o[i], callback, i); 2.114 - } 2.115 - } 2.116 - } 2.117 - } 2.118 - }, 2.119 - 2.120 - highlightAll: function(async, callback) { 2.121 - var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'); 2.122 - for (var i=0, element; element = elements[i++];) { 2.123 - if (element.classList.contains("idl")) { 2.124 - // Bikeshed handles IDL blocks already. 2.125 - continue; 2.126 - } 2.127 - _.highlightElement(element, async === true, callback); 2.128 - } 2.129 - 2.130 - var elements = document.querySelectorAll('pre[class*="language-"], [class*="language-"] pre, pre[class*="lang-"], [class*="lang-"] pre'); 2.131 - for (var i=0, element; element = elements[i++];) { 2.132 - if (element.firstElementChild && element.firstElementChild.tagName.toLowerCase() == "code") { 2.133 - // Already handled by the previous loop 2.134 - continue; 2.135 - } 2.136 - if (element.classList.contains("idl")) { 2.137 - // Bikeshed handles IDL blocks already. 2.138 - continue; 2.139 - } 2.140 - _.highlightElement(element, async === true, callback); 2.141 - } 2.142 - }, 2.143 - 2.144 - highlightElement: function(element, async, callback) { 2.145 - // Find language 2.146 - var language, grammar, parent = element; 2.147 - 2.148 - while (parent && !lang.test(parent.className)) { 2.149 - parent = parent.parentNode; 2.150 - } 2.151 - 2.152 - if (parent) { 2.153 - language = (parent.className.match(lang) || [,''])[1]; 2.154 - grammar = _.languages[language]; 2.155 - } 2.156 - 2.157 - if (!grammar) { 2.158 - return; 2.159 - } 2.160 - 2.161 - // Set language on the element, if not present 2.162 - element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; 2.163 - 2.164 - // Set language on the parent, for styling 2.165 - parent = element.parentNode; 2.166 - 2.167 - if (/pre/i.test(parent.nodeName)) { 2.168 - parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; 2.169 - } 2.170 - 2.171 - var code = element.textContent; 2.172 - 2.173 - if(!code) { 2.174 - return; 2.175 - } 2.176 - 2.177 - var env = { 2.178 - element: element, 2.179 - language: language, 2.180 - grammar: grammar, 2.181 - code: code 2.182 - }; 2.183 - 2.184 - _.hooks.run('before-highlight', env); 2.185 - 2.186 - if (async && self.Worker) { 2.187 - var worker = new Worker(_.filename); 2.188 - 2.189 - worker.onmessage = function(evt) { 2.190 - env.highlightedCode = Token.stringify(JSON.parse(evt.data), language); 2.191 - 2.192 - _.hooks.run('before-insert', env); 2.193 - 2.194 - env.element.innerHTML = env.highlightedCode; 2.195 - 2.196 - callback && callback.call(env.element); 2.197 - _.hooks.run('after-highlight', env); 2.198 - }; 2.199 - 2.200 - worker.postMessage(JSON.stringify({ 2.201 - language: env.language, 2.202 - code: env.code 2.203 - })); 2.204 - } 2.205 - else { 2.206 - env.highlightedCode = _.highlight(env.code, env.grammar, env.language) 2.207 - 2.208 - _.hooks.run('before-insert', env); 2.209 - 2.210 - env.element.innerHTML = env.highlightedCode; 2.211 - 2.212 - callback && callback.call(element); 2.213 - 2.214 - _.hooks.run('after-highlight', env); 2.215 - } 2.216 - }, 2.217 - 2.218 - highlight: function (text, grammar, language) { 2.219 - var tokens = _.tokenize(text, grammar); 2.220 - return Token.stringify(_.util.encode(tokens), language); 2.221 - }, 2.222 - 2.223 - tokenize: function(text, grammar, language) { 2.224 - var Token = _.Token; 2.225 - 2.226 - var strarr = [text]; 2.227 - 2.228 - var rest = grammar.rest; 2.229 - 2.230 - if (rest) { 2.231 - for (var token in rest) { 2.232 - grammar[token] = rest[token]; 2.233 - } 2.234 - 2.235 - delete grammar.rest; 2.236 - } 2.237 - 2.238 - tokenloop: for (var token in grammar) { 2.239 - if(!grammar.hasOwnProperty(token) || !grammar[token]) { 2.240 - continue; 2.241 - } 2.242 - 2.243 - var patterns = grammar[token]; 2.244 - patterns = (_.util.type(patterns) === "Array") ? patterns : [patterns]; 2.245 - 2.246 - for (var j = 0; j < patterns.length; ++j) { 2.247 - var pattern = patterns[j], 2.248 - inside = pattern.inside, 2.249 - lookbehind = !!pattern.lookbehind, 2.250 - lookbehindLength = 0, 2.251 - alias = pattern.alias; 2.252 - 2.253 - pattern = pattern.pattern || pattern; 2.254 - 2.255 - for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop 2.256 - 2.257 - var str = strarr[i]; 2.258 - 2.259 - if (strarr.length > text.length) { 2.260 - // Something went terribly wrong, ABORT, ABORT! 2.261 - break tokenloop; 2.262 - } 2.263 - 2.264 - if (str instanceof Token) { 2.265 - continue; 2.266 - } 2.267 - 2.268 - pattern.lastIndex = 0; 2.269 - 2.270 - var match = pattern.exec(str); 2.271 - 2.272 - if (match) { 2.273 - if(lookbehind) { 2.274 - lookbehindLength = match[1].length; 2.275 - } 2.276 - 2.277 - var from = match.index - 1 + lookbehindLength, 2.278 - match = match[0].slice(lookbehindLength), 2.279 - len = match.length, 2.280 - to = from + len, 2.281 - before = str.slice(0, from + 1), 2.282 - after = str.slice(to + 1); 2.283 - 2.284 - var args = [i, 1]; 2.285 - 2.286 - if (before) { 2.287 - args.push(before); 2.288 - } 2.289 - 2.290 - var wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias); 2.291 - 2.292 - args.push(wrapped); 2.293 - 2.294 - if (after) { 2.295 - args.push(after); 2.296 - } 2.297 - 2.298 - Array.prototype.splice.apply(strarr, args); 2.299 - } 2.300 - } 2.301 - } 2.302 - } 2.303 - 2.304 - return strarr; 2.305 - }, 2.306 - 2.307 - hooks: { 2.308 - all: {}, 2.309 - 2.310 - add: function (name, callback) { 2.311 - var hooks = _.hooks.all; 2.312 - 2.313 - hooks[name] = hooks[name] || []; 2.314 - 2.315 - hooks[name].push(callback); 2.316 - }, 2.317 - 2.318 - run: function (name, env) { 2.319 - var callbacks = _.hooks.all[name]; 2.320 - 2.321 - if (!callbacks || !callbacks.length) { 2.322 - return; 2.323 - } 2.324 - 2.325 - for (var i=0, callback; callback = callbacks[i++];) { 2.326 - callback(env); 2.327 - } 2.328 - } 2.329 - } 2.330 -}; 2.331 - 2.332 -var Token = _.Token = function(type, content, alias) { 2.333 - this.type = type; 2.334 - this.content = content; 2.335 - this.alias = alias; 2.336 -}; 2.337 - 2.338 -Token.stringify = function(o, language, parent) { 2.339 - if (typeof o == 'string') { 2.340 - return o; 2.341 - } 2.342 - 2.343 - if (Object.prototype.toString.call(o) == '[object Array]') { 2.344 - return o.map(function(element) { 2.345 - return Token.stringify(element, language, o); 2.346 - }).join(''); 2.347 - } 2.348 - 2.349 - var env = { 2.350 - type: o.type, 2.351 - content: Token.stringify(o.content, language, parent), 2.352 - tag: 'span', 2.353 - classes: ['token', o.type], 2.354 - attributes: {}, 2.355 - language: language, 2.356 - parent: parent 2.357 - }; 2.358 - 2.359 - if (env.type == 'comment') { 2.360 - env.attributes['spellcheck'] = 'true'; 2.361 - } 2.362 - 2.363 - if (o.alias) { 2.364 - var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias]; 2.365 - Array.prototype.push.apply(env.classes, aliases); 2.366 - } 2.367 - 2.368 - _.hooks.run('wrap', env); 2.369 - 2.370 - var attributes = ''; 2.371 - 2.372 - for (var name in env.attributes) { 2.373 - attributes += name + '="' + (env.attributes[name] || '') + '"'; 2.374 - } 2.375 - 2.376 - return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>'; 2.377 - 2.378 -}; 2.379 - 2.380 -if (!self.document) { 2.381 - if (!self.addEventListener) { 2.382 - // in Node.js 2.383 - return self.Prism; 2.384 - } 2.385 - // In worker 2.386 - self.addEventListener('message', function(evt) { 2.387 - var message = JSON.parse(evt.data), 2.388 - lang = message.language, 2.389 - code = message.code; 2.390 - 2.391 - self.postMessage(JSON.stringify(_.util.encode(_.tokenize(code, _.languages[lang])))); 2.392 - self.close(); 2.393 - }, false); 2.394 - 2.395 - return self.Prism; 2.396 -} 2.397 - 2.398 -// Get current script and highlight 2.399 -var script = document.getElementsByTagName('script'); 2.400 - 2.401 -script = script[script.length - 1]; 2.402 - 2.403 -if (script) { 2.404 - _.filename = script.src; 2.405 - 2.406 - if (document.addEventListener && !script.hasAttribute('data-manual')) { 2.407 - document.addEventListener('DOMContentLoaded', _.highlightAll); 2.408 - } 2.409 -} 2.410 - 2.411 -return self.Prism; 2.412 - 2.413 -})(); 2.414 - 2.415 -if (typeof module !== 'undefined' && module.exports) { 2.416 - module.exports = Prism; 2.417 -} 2.418 -; 2.419 -Prism.languages.css = { 2.420 - 'comment': /\/\*[\w\W]*?\*\//g, 2.421 - 'atrule': { 2.422 - pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi, 2.423 - inside: { 2.424 - 'punctuation': /[;:]/g 2.425 - } 2.426 - }, 2.427 - 'url': /url\((["']?).*?\1\)/gi, 2.428 - 'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g, 2.429 - 'property': /(\b|\B)[\w-]+(?=\s*:)/ig, 2.430 - 'string': /("|')(\\?.)*?\1/g, 2.431 - 'important': /\B!important\b/gi, 2.432 - 'punctuation': /[\{\};:]/g, 2.433 - 'function': /[-a-z0-9]+(?=\()/ig 2.434 -}; 2.435 - 2.436 -if (Prism.languages.markup) { 2.437 - Prism.languages.insertBefore('markup', 'tag', { 2.438 - 'style': { 2.439 - pattern: /<style[\w\W]*?>[\w\W]*?<\/style>/ig, 2.440 - inside: { 2.441 - 'tag': { 2.442 - pattern: /<style[\w\W]*?>|<\/style>/ig, 2.443 - inside: Prism.languages.markup.tag.inside 2.444 - }, 2.445 - rest: Prism.languages.css 2.446 - } 2.447 - } 2.448 - }); 2.449 -}; 2.450 -Prism.languages.css.selector = { 2.451 - pattern: /[^\{\}\s][^\{\}]*(?=\s*\{)/g, 2.452 - inside: { 2.453 - 'pseudo-element': /:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g, 2.454 - 'pseudo-class': /:[-\w]+(?:\(.*\))?/g, 2.455 - 'class': /\.[-:\.\w]+/g, 2.456 - 'id': /#[-:\.\w]+/g 2.457 - } 2.458 -}; 2.459 - 2.460 -Prism.languages.insertBefore('css', 'ignore', { 2.461 - 'hexcode': /#[\da-f]{3,6}/gi, 2.462 - 'entity': /\\[\da-f]{1,8}/gi, 2.463 - 'number': /[\d%\.]+/g 2.464 -});; 2.465 -</script> 2.466 <style>/* http://prismjs.com/download.html?themes=prism&languages=clike */ 2.467 /** 2.468 * prism.js default theme for JavaScript, CSS and HTML 2.469 @@ -767,7 +308,7 @@ 2.470 <h1 class="p-name no-ref" id="title">CSS Overflow Module Level 3</h1> 2.471 2.472 <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, 2.473 - <time class="dt-updated" datetime="2015-04-14">14 April 2015</time></span></h2> 2.474 + <time class="dt-updated" datetime="2015-04-30">30 April 2015</time></span></h2> 2.475 2.476 <div data-fill-with="spec-metadata"> 2.477 <dl> 2.478 @@ -1238,7 +779,7 @@ 2.479 <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> 2.480 <tr class="value"> 2.481 <th>Value: 2.482 - <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-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> 2.483 + <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-clipped">clipped</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> 2.484 <tr> 2.485 <th>Initial: 2.486 <td><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> 2.487 @@ -1279,7 +820,7 @@ 2.488 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-overflow">overflow<a class="self-link" href="#propdef-overflow"></a></dfn> 2.489 <tr class="value"> 2.490 <th>Value: 2.491 - <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-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> 2.492 + <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-clipped">clipped</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> 2.493 <tr> 2.494 <th>Initial: 2.495 <td>see individual properties 2.496 @@ -1350,21 +891,80 @@ 2.497 2.498 <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> 2.499 2.500 + <dd>This value indicates that 2.501 + the content is clipped and that no scrolling user interface should be provided by the UA 2.502 + to view the content outside the clipping region. 2.503 + However, the content may still be scrolled programatically, 2.504 + for example using the mechanisms defined in <a data-link-type="biblio" href="#biblio-cssom-view">[CSSOM-VIEW]</a>. 2.505 + 2.506 + <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-clipped">clipped<a class="self-link" href="#valdef-overflow-clipped"></a></dfn> 2.507 + 2.508 + <dd>Like <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a>, 2.509 + this value indicates that 2.510 + the content is clipped 2.511 + and that no scrolling user interface should be provided by the UA 2.512 + to view the content outside the clipping region. 2.513 + In addition, unlike <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: hidden</a> 2.514 + which still allows programmatic scrolling, 2.515 + <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: clipped</a> forbids scrolling entirely, 2.516 + through any mechanism. 2.517 + 2.518 + 2.519 + <p class="issue" id="issue-84aec26b"><a class="self-link" href="#issue-84aec26b"></a>Mozilla implements -moz-hidden-unscrollable, 2.520 + which is similar to <a class="css" data-link-type="maybe" href="#valdef-overflow-clipped">clipped</a>, 2.521 + except that it does not cause the element to establish a BFC. 2.522 + Should we match that?</p> 2.523 + 2.524 + 2.525 <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> 2.526 2.527 + <dd>This value indicates that the content is clipped 2.528 + and that if the user agent uses a scrolling mechanism 2.529 + that is visible on the screen (such as a scroll bar or a panner), 2.530 + that mechanism should be displayed for a box 2.531 + whether or not any of its content is clipped. 2.532 + This avoids any problem with scrollbars appearing 2.533 + and disappearing in a dynamic environment. 2.534 + 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>, 2.535 + overflowing content may be printed. 2.536 + 2.537 <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> 2.538 2.539 - <dd> 2.540 - 2.541 - <p class="issue" id="issue-75945e26"><a class="self-link" href="#issue-75945e26"></a> 2.542 - Move material from <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> and <a data-link-type="biblio" href="#biblio-css3box">[CSS3BOX]</a> here. 2.543 - </p> 2.544 - 2.545 - 2.546 - 2.547 + <dd>The behavior of the <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a> value is user agent-dependent, 2.548 + but should cause a scrolling mechanism to be provided for overflowing boxes. 2.549 2.550 </dl> 2.551 2.552 + 2.553 + <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>, 2.554 + content may be clipped to a UA’s document window by the native operating environment.</p> 2.555 + 2.556 + 2.557 + <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>, 2.558 + the element creates a block formatting context.</p> 2.559 + 2.560 + 2.561 + <p>UAs must apply the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property 2.562 + set on the root element to the viewport. 2.563 + HTML UAs must instead apply the ‘overflow’ property 2.564 + from the <code><a data-link-type="element" href="https://html.spec.whatwg.org/#the-body-element">body</a></code> element to the viewport 2.565 + if the value on the root element is <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>. 2.566 + The <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> value when used for the viewport 2.567 + must be interpreted as <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>. 2.568 + The element from which the value is propagated 2.569 + 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> 2.570 + 2.571 + 2.572 + <p>In the case of a scrollbar being placed on an edge of the element’s box, 2.573 + it should be inserted between the inner border edge 2.574 + and the outer padding edge. 2.575 + Any space taken up by the scrollbars should be 2.576 + taken out of (subtracted from the dimensions of) 2.577 + the containing block formed by the element with the scrollbars.</p> 2.578 + 2.579 + 2.580 + <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> 2.581 + 2.582 2.583 <p class="issue" id="issue-c318b1c1"><a class="self-link" href="#issue-c318b1c1"></a> 2.584 Explain which directions allow scrolling and which don’t, 2.585 @@ -1913,7 +1513,7 @@ 2.586 2.587 <p> 2.588 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>, 2.589 - or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-page-floats/#propdef-float">float</a> is permitted, but is not allowed to change 2.590 + 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 2.591 the computed value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-display-3/#propdef-display-inside">display-inside</a>. 2.592 (Since <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> only 2.593 applies to block containers, flex containers, and grid containers 2.594 @@ -2489,6 +2089,7 @@ 2.595 <li>border-box overflow, <a href="#border_box-overflow">2.3</a> 2.596 <li>border-box overflow rectangle, <a href="#border_box-overflow-rectangle">2.3</a> 2.597 <li>border-box overflow region, <a href="#border_box-overflow-region">2.3</a> 2.598 + <li>clipped, <a href="#valdef-overflow-clipped">3</a> 2.599 <li>continue, <a href="#propdef-continue">4</a> 2.600 <li>discard, <a href="#valdef-continue-discard">4</a> 2.601 <li>fragment box, <a href="#fragment-box">6</a> 2.602 @@ -2547,10 +2148,6 @@ 2.603 <ul> 2.604 <li><a href="http://dev.w3.org/csswg/css-multicol-1/#overflow-columns">overflow columns</a> 2.605 </ul> 2.606 - <li><a data-link-type="biblio" href="#biblio-css-page-floats-3">[css-page-floats-3]</a> defines the following terms: 2.607 - <ul> 2.608 - <li><a href="http://dev.w3.org/csswg/css-page-floats/#propdef-float">float</a> 2.609 - </ul> 2.610 <li><a data-link-type="biblio" href="#biblio-css-position-3">[css-position-3]</a> defines the following terms: 2.611 <ul> 2.612 <li><a href="http://dev.w3.org/csswg/css-position-3/#propdef-position">position</a> 2.613 @@ -2586,11 +2183,20 @@ 2.614 <ul> 2.615 <li><a href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> 2.616 </ul> 2.617 - <li><a data-link-type="biblio" href="#biblio-css21">[css21]</a> defines the following terms: 2.618 + <li><a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> defines the following terms: 2.619 <ul> 2.620 <li><a href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> 2.621 + <li><a href="http://dev.w3.org/csswg/css2/visuren.html#propdef-float">float</a> 2.622 <li><a href="http://dev.w3.org/csswg/css2/visudet.html#propdef-height">height</a> 2.623 </ul> 2.624 + <li><a data-link-type="biblio" href="#biblio-html">[HTML]</a> defines the following terms: 2.625 + <ul> 2.626 + <li><a href="https://html.spec.whatwg.org/#the-body-element">body</a> 2.627 + </ul> 2.628 + <li><a data-link-type="biblio" href="#biblio-mediaqueries-4">[mediaqueries-4]</a> defines the following terms: 2.629 + <ul> 2.630 + <li><a href="http://dev.w3.org/csswg/mediaqueries-4/#valdef-media-print">print</a> 2.631 + </ul> 2.632 </ul> 2.633 <h2 class="no-num heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> 2.634 <h3 class="no-num heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> 2.635 @@ -2607,6 +2213,8 @@ 2.636 <dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/">CSS Cascading and Inheritance Level 3</a>. 3 October 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href="http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/">http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/</a> 2.637 <dt id="biblio-css3col"><a class="self-link" href="#biblio-css3col"></a>[CSS3COL] 2.638 <dd>Håkon Wium Lie. <a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">CSS Multi-column Layout Module</a>. 12 April 2011. W3C Candidate Recommendation. (Work in progress.) URL: <a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a> 2.639 + <dt id="biblio-html"><a class="self-link" href="#biblio-html"></a>[HTML] 2.640 + <dd>Ian Hickson. <a href="https://html.spec.whatwg.org/">HTML</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/">https://html.spec.whatwg.org/</a> 2.641 <dt id="biblio-select"><a class="self-link" href="#biblio-select"></a>[SELECT] 2.642 <dd>Tantek Çelik; et al. <a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a> 2.643 <dt id="biblio-css-backgrounds-3"><a class="self-link" href="#biblio-css-backgrounds-3"></a>[CSS-BACKGROUNDS-3] 2.644 @@ -2621,8 +2229,6 @@ 2.645 <dd>Tab Atkins Jr.; Elika Etemad. <a href="http://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 11 September 2014. WD. URL: <a href="http://www.w3.org/TR/css-display-3/">http://www.w3.org/TR/css-display-3/</a> 2.646 <dt id="biblio-css-multicol-1"><a class="self-link" href="#biblio-css-multicol-1"></a>[CSS-MULTICOL-1] 2.647 <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> 2.648 - <dt id="biblio-css-page-floats-3"><a class="self-link" href="#biblio-css-page-floats-3"></a>[CSS-PAGE-FLOATS-3] 2.649 - <dd>CSS Page Floats Module Level 3 URL: <a href="http://dev.w3.org/csswg/css-page-floats/">http://dev.w3.org/csswg/css-page-floats/</a> 2.650 <dt id="biblio-css-position-3"><a class="self-link" href="#biblio-css-position-3"></a>[CSS-POSITION-3] 2.651 <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> 2.652 <dt id="biblio-css-pseudo-4"><a class="self-link" href="#biblio-css-pseudo-4"></a>[CSS-PSEUDO-4] 2.653 @@ -2641,6 +2247,8 @@ 2.654 <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> 2.655 <dt id="biblio-css3-break"><a class="self-link" href="#biblio-css3-break"></a>[CSS3-BREAK] 2.656 <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> 2.657 + <dt id="biblio-mediaqueries-4"><a class="self-link" href="#biblio-mediaqueries-4"></a>[MEDIAQUERIES-4] 2.658 + <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> 2.659 <dt id="biblio-rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[RFC2119] 2.660 <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> 2.661 </dl> 2.662 @@ -2652,14 +2260,16 @@ 2.663 <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href="http://www.w3.org/TR/2013/WD-css3-regions-20130528/">CSS Regions Module Level 1</a>. 28 May 2013. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2013/WD-css3-regions-20130528/">http://www.w3.org/TR/2013/WD-css3-regions-20130528/</a> 2.664 <dt id="biblio-css3bg"><a class="self-link" href="#biblio-css3bg"></a>[CSS3BG] 2.665 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">CSS Backgrounds and Borders Module Level 3</a>. 24 July 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 2.666 - <dt id="biblio-css3box"><a class="self-link" href="#biblio-css3box"></a>[CSS3BOX] 2.667 - <dd>Bert Bos. <a href="http://www.w3.org/TR/2007/WD-css3-box-20070809">CSS basic box model</a>. 9 August 2007. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2007/WD-css3-box-20070809">http://www.w3.org/TR/2007/WD-css3-box-20070809</a> 2.668 <dt id="biblio-css3gcpm"><a class="self-link" href="#biblio-css3gcpm"></a>[CSS3GCPM] 2.669 <dd>Håkon Wium Lie. <a href="http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/">CSS Generated Content for Paged Media Module</a>. 29 November 2011. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/">http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/</a> 2.670 <dt id="biblio-css3text"><a class="self-link" href="#biblio-css3text"></a>[CSS3TEXT] 2.671 <dd>Elika J. Etemad; Koji Ishii. <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">CSS Text Module Level 3</a>. 13 November 2012. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a> 2.672 + <dt id="biblio-css3-box"><a class="self-link" href="#biblio-css3-box"></a>[CSS3-BOX] 2.673 + <dd>Bert Bos. <a href="http://www.w3.org/TR/css3-box">CSS basic box model</a>. 9 August 2007. WD. URL: <a href="http://www.w3.org/TR/css3-box">http://www.w3.org/TR/css3-box</a> 2.674 <dt id="biblio-css3-marquee"><a class="self-link" href="#biblio-css3-marquee"></a>[CSS3-MARQUEE] 2.675 <dd>Bert Bos. <a href="http://www.w3.org/TR/css3-marquee">CSS Marquee Module Level 3</a>. 14 October 2014. NOTE. URL: <a href="http://www.w3.org/TR/css3-marquee">http://www.w3.org/TR/css3-marquee</a> 2.676 + <dt id="biblio-cssom-view"><a class="self-link" href="#biblio-cssom-view"></a>[CSSOM-VIEW] 2.677 + <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> 2.678 </dl> 2.679 <h2 class="no-num heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> 2.680 <table class="proptable data"> 2.681 @@ -2678,7 +2288,7 @@ 2.682 <tbody> 2.683 <tr> 2.684 <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-x">overflow-x</a> 2.685 - <td>visible | hidden | scroll | auto 2.686 + <td>visible | hidden | clipped | scroll | auto 2.687 <td>visible 2.688 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 2.689 <td>no 2.690 @@ -2689,7 +2299,7 @@ 2.691 <td>see below 2.692 <tr> 2.693 <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-y">overflow-y</a> 2.694 - <td>visible | hidden | scroll | auto 2.695 + <td>visible | hidden | clipped | scroll | auto 2.696 <td>visible 2.697 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 2.698 <td>no 2.699 @@ -2700,7 +2310,7 @@ 2.700 <td>see below 2.701 <tr> 2.702 <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow">overflow</a> 2.703 - <td>visible | hidden | scroll | auto 2.704 + <td>visible | hidden | clipped | scroll | auto 2.705 <td>see individual properties 2.706 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT] 2.707 <td>no 2.708 @@ -2769,9 +2379,11 @@ 2.709 If needed, define more formally, as for scrollable overflow above. 2.710 (Maybe even share the definitions in an appropriate way!) 2.711 <a href="#issue-42ea3c29"> ↵ </a></div> 2.712 - <div class="issue"> 2.713 - Move material from <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> and <a data-link-type="biblio" href="#biblio-css3box">[CSS3BOX]</a> here. 2.714 - <a href="#issue-75945e26"> ↵ </a></div> 2.715 + <div class="issue">Mozilla implements -moz-hidden-unscrollable, 2.716 + which is similar to <a class="css" data-link-type="maybe" href="#valdef-overflow-clipped">clipped</a>, 2.717 + except that it does not cause the element to establish a BFC. 2.718 + Should we match that?<a href="#issue-84aec26b"> ↵ </a></div> 2.719 + <div class="issue">import examples from <a data-link-type="biblio" href="#biblio-css3-box">[CSS3-BOX]</a>.<a href="#issue-402eb70c"> ↵ </a></div> 2.720 <div class="issue"> 2.721 Explain which directions allow scrolling and which don’t, 2.722 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> 2.723 @@ -2941,5 +2553,464 @@ 2.724 the content they produce for interactive media 2.725 is printed. 2.726 <a href="#issue-de91ba9b"> ↵ </a></div> 2.727 - </div></body> 2.728 + </div> 2.729 + <script>self = (typeof window !== 'undefined') 2.730 + ? window // if in browser 2.731 + : ( 2.732 + (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) 2.733 + ? self // if in worker 2.734 + : {} // if in node js 2.735 + ); 2.736 + 2.737 +/** 2.738 + * Prism: Lightweight, robust, elegant syntax highlighting 2.739 + * MIT license http://www.opensource.org/licenses/mit-license.php/ 2.740 + * @author Lea Verou http://lea.verou.me 2.741 + */ 2.742 + 2.743 +var Prism = (function(){ 2.744 + 2.745 +// Private helper vars 2.746 +var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i; 2.747 + 2.748 +var _ = self.Prism = { 2.749 + util: { 2.750 + encode: function (tokens) { 2.751 + if (tokens instanceof Token) { 2.752 + return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias); 2.753 + } else if (_.util.type(tokens) === 'Array') { 2.754 + return tokens.map(_.util.encode); 2.755 + } else { 2.756 + return tokens.replace(/&/g, '&').replace(/</g, '<').replace(/\u00a0/g, ' '); 2.757 + } 2.758 + }, 2.759 + 2.760 + type: function (o) { 2.761 + return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1]; 2.762 + }, 2.763 + 2.764 + // Deep clone a language definition (e.g. to extend it) 2.765 + clone: function (o) { 2.766 + var type = _.util.type(o); 2.767 + 2.768 + switch (type) { 2.769 + case 'Object': 2.770 + var clone = {}; 2.771 + 2.772 + for (var key in o) { 2.773 + if (o.hasOwnProperty(key)) { 2.774 + clone[key] = _.util.clone(o[key]); 2.775 + } 2.776 + } 2.777 + 2.778 + return clone; 2.779 + 2.780 + case 'Array': 2.781 + return o.slice(); 2.782 + } 2.783 + 2.784 + return o; 2.785 + } 2.786 + }, 2.787 + 2.788 + languages: { 2.789 + extend: function (id, redef) { 2.790 + var lang = _.util.clone(_.languages[id]); 2.791 + 2.792 + for (var key in redef) { 2.793 + lang[key] = redef[key]; 2.794 + } 2.795 + 2.796 + return lang; 2.797 + }, 2.798 + 2.799 + // Insert a token before another token in a language literal 2.800 + insertBefore: function (inside, before, insert, root) { 2.801 + root = root || _.languages; 2.802 + var grammar = root[inside]; 2.803 + var ret = {}; 2.804 + 2.805 + for (var token in grammar) { 2.806 + 2.807 + if (grammar.hasOwnProperty(token)) { 2.808 + 2.809 + if (token == before) { 2.810 + 2.811 + for (var newToken in insert) { 2.812 + 2.813 + if (insert.hasOwnProperty(newToken)) { 2.814 + ret[newToken] = insert[newToken]; 2.815 + } 2.816 + } 2.817 + } 2.818 + 2.819 + ret[token] = grammar[token]; 2.820 + } 2.821 + } 2.822 + 2.823 + return root[inside] = ret; 2.824 + }, 2.825 + 2.826 + // Traverse a language definition with Depth First Search 2.827 + DFS: function(o, callback, type) { 2.828 + for (var i in o) { 2.829 + if (o.hasOwnProperty(i)) { 2.830 + callback.call(o, i, o[i], type || i); 2.831 + 2.832 + if (_.util.type(o[i]) === 'Object') { 2.833 + _.languages.DFS(o[i], callback); 2.834 + } else if (_.util.type(o[i]) === 'Array') { 2.835 + _.languages.DFS(o[i], callback, i); 2.836 + } 2.837 + } 2.838 + } 2.839 + } 2.840 + }, 2.841 + 2.842 + highlightAll: function(async, callback) { 2.843 + var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'); 2.844 + for (var i=0, element; element = elements[i++];) { 2.845 + if (element.classList.contains("idl")) { 2.846 + // Bikeshed handles IDL blocks already. 2.847 + continue; 2.848 + } 2.849 + _.highlightElement(element, async === true, callback); 2.850 + } 2.851 + 2.852 + var elements = document.querySelectorAll('pre[class*="language-"], [class*="language-"] pre, pre[class*="lang-"], [class*="lang-"] pre'); 2.853 + for (var i=0, element; element = elements[i++];) { 2.854 + if (element.firstElementChild && element.firstElementChild.tagName.toLowerCase() == "code") { 2.855 + // Already handled by the previous loop 2.856 + continue; 2.857 + } 2.858 + if (element.classList.contains("idl")) { 2.859 + // Bikeshed handles IDL blocks already. 2.860 + continue; 2.861 + } 2.862 + _.highlightElement(element, async === true, callback); 2.863 + } 2.864 + }, 2.865 + 2.866 + highlightElement: function(element, async, callback) { 2.867 + // Find language 2.868 + var language, grammar, parent = element; 2.869 + 2.870 + while (parent && !lang.test(parent.className)) { 2.871 + parent = parent.parentNode; 2.872 + } 2.873 + 2.874 + if (parent) { 2.875 + language = (parent.className.match(lang) || [,''])[1]; 2.876 + grammar = _.languages[language]; 2.877 + } 2.878 + 2.879 + if (!grammar) { 2.880 + return; 2.881 + } 2.882 + 2.883 + // Set language on the element, if not present 2.884 + element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; 2.885 + 2.886 + // Set language on the parent, for styling 2.887 + parent = element.parentNode; 2.888 + 2.889 + if (/pre/i.test(parent.nodeName)) { 2.890 + parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; 2.891 + } 2.892 + 2.893 + var code = element.textContent; 2.894 + 2.895 + if(!code) { 2.896 + return; 2.897 + } 2.898 + 2.899 + var env = { 2.900 + element: element, 2.901 + language: language, 2.902 + grammar: grammar, 2.903 + code: code 2.904 + }; 2.905 + 2.906 + _.hooks.run('before-highlight', env); 2.907 + 2.908 + if (async && self.Worker) { 2.909 + var worker = new Worker(_.filename); 2.910 + 2.911 + worker.onmessage = function(evt) { 2.912 + env.highlightedCode = Token.stringify(JSON.parse(evt.data), language); 2.913 + 2.914 + _.hooks.run('before-insert', env); 2.915 + 2.916 + env.element.innerHTML = env.highlightedCode; 2.917 + 2.918 + callback && callback.call(env.element); 2.919 + _.hooks.run('after-highlight', env); 2.920 + }; 2.921 + 2.922 + worker.postMessage(JSON.stringify({ 2.923 + language: env.language, 2.924 + code: env.code 2.925 + })); 2.926 + } 2.927 + else { 2.928 + env.highlightedCode = _.highlight(env.code, env.grammar, env.language) 2.929 + 2.930 + _.hooks.run('before-insert', env); 2.931 + 2.932 + env.element.innerHTML = env.highlightedCode; 2.933 + 2.934 + callback && callback.call(element); 2.935 + 2.936 + _.hooks.run('after-highlight', env); 2.937 + } 2.938 + }, 2.939 + 2.940 + highlight: function (text, grammar, language) { 2.941 + var tokens = _.tokenize(text, grammar); 2.942 + return Token.stringify(_.util.encode(tokens), language); 2.943 + }, 2.944 + 2.945 + tokenize: function(text, grammar, language) { 2.946 + var Token = _.Token; 2.947 + 2.948 + var strarr = [text]; 2.949 + 2.950 + var rest = grammar.rest; 2.951 + 2.952 + if (rest) { 2.953 + for (var token in rest) { 2.954 + grammar[token] = rest[token]; 2.955 + } 2.956 + 2.957 + delete grammar.rest; 2.958 + } 2.959 + 2.960 + tokenloop: for (var token in grammar) { 2.961 + if(!grammar.hasOwnProperty(token) || !grammar[token]) { 2.962 + continue; 2.963 + } 2.964 + 2.965 + var patterns = grammar[token]; 2.966 + patterns = (_.util.type(patterns) === "Array") ? patterns : [patterns]; 2.967 + 2.968 + for (var j = 0; j < patterns.length; ++j) { 2.969 + var pattern = patterns[j], 2.970 + inside = pattern.inside, 2.971 + lookbehind = !!pattern.lookbehind, 2.972 + lookbehindLength = 0, 2.973 + alias = pattern.alias; 2.974 + 2.975 + pattern = pattern.pattern || pattern; 2.976 + 2.977 + for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop 2.978 + 2.979 + var str = strarr[i]; 2.980 + 2.981 + if (strarr.length > text.length) { 2.982 + // Something went terribly wrong, ABORT, ABORT! 2.983 + break tokenloop; 2.984 + } 2.985 + 2.986 + if (str instanceof Token) { 2.987 + continue; 2.988 + } 2.989 + 2.990 + pattern.lastIndex = 0; 2.991 + 2.992 + var match = pattern.exec(str); 2.993 + 2.994 + if (match) { 2.995 + if(lookbehind) { 2.996 + lookbehindLength = match[1].length; 2.997 + } 2.998 + 2.999 + var from = match.index - 1 + lookbehindLength, 2.1000 + match = match[0].slice(lookbehindLength), 2.1001 + len = match.length, 2.1002 + to = from + len, 2.1003 + before = str.slice(0, from + 1), 2.1004 + after = str.slice(to + 1); 2.1005 + 2.1006 + var args = [i, 1]; 2.1007 + 2.1008 + if (before) { 2.1009 + args.push(before); 2.1010 + } 2.1011 + 2.1012 + var wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias); 2.1013 + 2.1014 + args.push(wrapped); 2.1015 + 2.1016 + if (after) { 2.1017 + args.push(after); 2.1018 + } 2.1019 + 2.1020 + Array.prototype.splice.apply(strarr, args); 2.1021 + } 2.1022 + } 2.1023 + } 2.1024 + } 2.1025 + 2.1026 + return strarr; 2.1027 + }, 2.1028 + 2.1029 + hooks: { 2.1030 + all: {}, 2.1031 + 2.1032 + add: function (name, callback) { 2.1033 + var hooks = _.hooks.all; 2.1034 + 2.1035 + hooks[name] = hooks[name] || []; 2.1036 + 2.1037 + hooks[name].push(callback); 2.1038 + }, 2.1039 + 2.1040 + run: function (name, env) { 2.1041 + var callbacks = _.hooks.all[name]; 2.1042 + 2.1043 + if (!callbacks || !callbacks.length) { 2.1044 + return; 2.1045 + } 2.1046 + 2.1047 + for (var i=0, callback; callback = callbacks[i++];) { 2.1048 + callback(env); 2.1049 + } 2.1050 + } 2.1051 + } 2.1052 +}; 2.1053 + 2.1054 +var Token = _.Token = function(type, content, alias) { 2.1055 + this.type = type; 2.1056 + this.content = content; 2.1057 + this.alias = alias; 2.1058 +}; 2.1059 + 2.1060 +Token.stringify = function(o, language, parent) { 2.1061 + if (typeof o == 'string') { 2.1062 + return o; 2.1063 + } 2.1064 + 2.1065 + if (Object.prototype.toString.call(o) == '[object Array]') { 2.1066 + return o.map(function(element) { 2.1067 + return Token.stringify(element, language, o); 2.1068 + }).join(''); 2.1069 + } 2.1070 + 2.1071 + var env = { 2.1072 + type: o.type, 2.1073 + content: Token.stringify(o.content, language, parent), 2.1074 + tag: 'span', 2.1075 + classes: ['token', o.type], 2.1076 + attributes: {}, 2.1077 + language: language, 2.1078 + parent: parent 2.1079 + }; 2.1080 + 2.1081 + if (env.type == 'comment') { 2.1082 + env.attributes['spellcheck'] = 'true'; 2.1083 + } 2.1084 + 2.1085 + if (o.alias) { 2.1086 + var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias]; 2.1087 + Array.prototype.push.apply(env.classes, aliases); 2.1088 + } 2.1089 + 2.1090 + _.hooks.run('wrap', env); 2.1091 + 2.1092 + var attributes = ''; 2.1093 + 2.1094 + for (var name in env.attributes) { 2.1095 + attributes += name + '="' + (env.attributes[name] || '') + '"'; 2.1096 + } 2.1097 + 2.1098 + return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>'; 2.1099 + 2.1100 +}; 2.1101 + 2.1102 +if (!self.document) { 2.1103 + if (!self.addEventListener) { 2.1104 + // in Node.js 2.1105 + return self.Prism; 2.1106 + } 2.1107 + // In worker 2.1108 + self.addEventListener('message', function(evt) { 2.1109 + var message = JSON.parse(evt.data), 2.1110 + lang = message.language, 2.1111 + code = message.code; 2.1112 + 2.1113 + self.postMessage(JSON.stringify(_.util.encode(_.tokenize(code, _.languages[lang])))); 2.1114 + self.close(); 2.1115 + }, false); 2.1116 + 2.1117 + return self.Prism; 2.1118 +} 2.1119 + 2.1120 +// Get current script and highlight 2.1121 +var script = document.getElementsByTagName('script'); 2.1122 + 2.1123 +script = script[script.length - 1]; 2.1124 + 2.1125 +if (script) { 2.1126 + _.filename = script.src; 2.1127 + 2.1128 + if (document.addEventListener && !script.hasAttribute('data-manual')) { 2.1129 + document.addEventListener('DOMContentLoaded', _.highlightAll); 2.1130 + } 2.1131 +} 2.1132 + 2.1133 +return self.Prism; 2.1134 + 2.1135 +})(); 2.1136 + 2.1137 +if (typeof module !== 'undefined' && module.exports) { 2.1138 + module.exports = Prism; 2.1139 +} 2.1140 +; 2.1141 +Prism.languages.css = { 2.1142 + 'comment': /\/\*[\w\W]*?\*\//g, 2.1143 + 'atrule': { 2.1144 + pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi, 2.1145 + inside: { 2.1146 + 'punctuation': /[;:]/g 2.1147 + } 2.1148 + }, 2.1149 + 'url': /url\((["']?).*?\1\)/gi, 2.1150 + 'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g, 2.1151 + 'property': /(\b|\B)[\w-]+(?=\s*:)/ig, 2.1152 + 'string': /("|')(\\?.)*?\1/g, 2.1153 + 'important': /\B!important\b/gi, 2.1154 + 'punctuation': /[\{\};:]/g, 2.1155 + 'function': /[-a-z0-9]+(?=\()/ig 2.1156 +}; 2.1157 + 2.1158 +if (Prism.languages.markup) { 2.1159 + Prism.languages.insertBefore('markup', 'tag', { 2.1160 + 'style': { 2.1161 + pattern: /<style[\w\W]*?>[\w\W]*?<\/style>/ig, 2.1162 + inside: { 2.1163 + 'tag': { 2.1164 + pattern: /<style[\w\W]*?>|<\/style>/ig, 2.1165 + inside: Prism.languages.markup.tag.inside 2.1166 + }, 2.1167 + rest: Prism.languages.css 2.1168 + } 2.1169 + } 2.1170 + }); 2.1171 +}; 2.1172 +Prism.languages.css.selector = { 2.1173 + pattern: /[^\{\}\s][^\{\}]*(?=\s*\{)/g, 2.1174 + inside: { 2.1175 + 'pseudo-element': /:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g, 2.1176 + 'pseudo-class': /:[-\w]+(?:\(.*\))?/g, 2.1177 + 'class': /\.[-:\.\w]+/g, 2.1178 + 'id': /#[-:\.\w]+/g 2.1179 + } 2.1180 +}; 2.1181 + 2.1182 +Prism.languages.insertBefore('css', 'ignore', { 2.1183 + 'hexcode': /#[\da-f]{3,6}/gi, 2.1184 + 'entity': /\\[\da-f]{1,8}/gi, 2.1185 + 'number': /[\d%\.]+/g 2.1186 +});; 2.1187 +</script></body> 2.1188 </html> 2.1189 \ No newline at end of file
