31:T29c5, /** * Srcset Parser * * By Alex Bell | MIT License * * JS Parser for the string value that appears in markup

* * @returns Array [{url: _, d: _, w: _, h:_}, ...] * * Based super duper closely on the reference algorithm at: * https://html.spec.whatwg.org/multipage/embedded-content.html#parse-a-srcset-attribute * * Most comments are copied in directly from the spec * (except for comments in parens). */ function parseSrcset(input) { // UTILITY FUNCTIONS // Manual is faster than RegEx // http://bjorn.tipling.com/state-and-regular-expressions-in-javascript // http://jsperf.com/whitespace-character/5 function isSpace(c) { return (c === "\u0020" || // space c === "\u0009" || // horizontal tab c === "\u000A" || // new line c === "\u000C" || // form feed c === "\u000D"); // carriage return } function collectCharacters(regEx) { var chars, match = regEx.exec(input.substring(pos)); if (match) { chars = match[ 0 ]; pos += chars.length; return chars; } } var inputLength = input.length, // (Don't use \s, to avoid matching non-breaking space) regexLeadingSpaces = /^[ \t\n\r\u000c]+/, regexLeadingCommasOrSpaces = /^[, \t\n\r\u000c]+/, regexLeadingNotSpaces = /^[^ \t\n\r\u000c]+/, regexTrailingCommas = /[,]+$/, regexNonNegativeInteger = /^\d+$/, // ( Positive or negative or unsigned integers or decimals, without or without exponents. // Must include at least one digit. // According to spec tests any decimal point must be followed by a digit. // No leading plus sign is allowed.) // https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number regexFloatingPoint = /^-?(?:[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?$/, url, descriptors, currentDescriptor, state, c, // 2. Let position be a pointer into input, initially pointing at the start // of the string. pos = 0, // 3. Let candidates be an initially empty source set. candidates = []; // eric added this let parseError = false; // 4. Splitting loop: Collect a sequence of characters that are space // characters or U+002C COMMA characters. If any U+002C COMMA characters // were collected, that is a parse error. while (true) { collectCharacters(regexLeadingCommasOrSpaces); // 5. If position is past the end of input, return candidates and abort these steps. if (pos >= inputLength) { return { candidates, parseError }; // (we're done, this is the sole return path) } // 6. Collect a sequence of characters that are not space characters, // and let that be url. url = collectCharacters(regexLeadingNotSpaces); // 7. Let descriptors be a new empty list. descriptors = []; // 8. If url ends with a U+002C COMMA character (,), follow these substeps: // (1). Remove all trailing U+002C COMMA characters from url. If this removed // more than one character, that is a parse error. if (url.slice(-1) === ",") { url = url.replace(regexTrailingCommas, ""); // (Jump ahead to step 9 to skip tokenization and just push the candidate). parseDescriptors(); // Otherwise, follow these substeps: } else { tokenize(); } // (close else of step 8) // 16. Return to the step labeled splitting loop. } // (Close of big while loop.) /** * Tokenizes descriptor properties prior to parsing * Returns undefined. */ function tokenize() { // 8.1. Descriptor tokeniser: Skip whitespace collectCharacters(regexLeadingSpaces); // 8.2. Let current descriptor be the empty string. currentDescriptor = ""; // 8.3. Let state be in descriptor. state = "in descriptor"; while (true) { // 8.4. Let c be the character at position. c = input.charAt(pos); // Do the following depending on the value of state. // For the purpose of this step, "EOF" is a special character representing // that position is past the end of input. // In descriptor if (state === "in descriptor") { // Do the following, depending on the value of c: // Space character // If current descriptor is not empty, append current descriptor to // descriptors and let current descriptor be the empty string. // Set state to after descriptor. if (isSpace(c)) { if (currentDescriptor) { descriptors.push(currentDescriptor); currentDescriptor = ""; state = "after descriptor"; } // U+002C COMMA (,) // Advance position to the next character in input. If current descriptor // is not empty, append current descriptor to descriptors. Jump to the step // labeled descriptor parser. } else if (c === ",") { pos += 1; if (currentDescriptor) { descriptors.push(currentDescriptor); } parseDescriptors(); return; // U+0028 LEFT PARENTHESIS (() // Append c to current descriptor. Set state to in parens. } else if (c === "\u0028") { currentDescriptor = currentDescriptor + c; state = "in parens"; // EOF // If current descriptor is not empty, append current descriptor to // descriptors. Jump to the step labeled descriptor parser. } else if (c === "") { if (currentDescriptor) { descriptors.push(currentDescriptor); } parseDescriptors(); return; // Anything else // Append c to current descriptor. } else { currentDescriptor = currentDescriptor + c; } // (end "in descriptor" // In parens } else if (state === "in parens") { // U+0029 RIGHT PARENTHESIS ()) // Append c to current descriptor. Set state to in descriptor. if (c === ")") { currentDescriptor = currentDescriptor + c; state = "in descriptor"; // EOF // Append current descriptor to descriptors. Jump to the step labeled // descriptor parser. } else if (c === "") { descriptors.push(currentDescriptor); parseDescriptors(); return; // Anything else // Append c to current descriptor. } else { currentDescriptor = currentDescriptor + c; } // After descriptor } else if (state === "after descriptor") { // Do the following, depending on the value of c: // Space character: Stay in this state. if (isSpace(c)) { // EOF: Jump to the step labeled descriptor parser. } else if (c === "") { parseDescriptors(); return; // Anything else // Set state to in descriptor. Set position to the previous character in input. } else { state = "in descriptor"; pos -= 1; } } // Advance position to the next character in input. pos += 1; // Repeat this step. } // (close while true loop) } /** * Adds descriptor properties to a candidate, pushes to the candidates array * @return undefined */ // Declared outside of the while loop so that it's only created once. function parseDescriptors() { // 9. Descriptor parser: Let error be no. var pError = false, // 10. Let width be absent. // 11. Let density be absent. // 12. Let future-compat-h be absent. (We're implementing it now as h) w, d, h, i, candidate = {}, desc, lastChar, value, intVal, floatVal; // 13. For each descriptor in descriptors, run the appropriate set of steps // from the following list: for (i = 0 ; i < descriptors.length; i++) { desc = descriptors[ i ]; lastChar = desc[ desc.length - 1 ]; value = desc.substring(0, desc.length - 1); intVal = parseInt(value, 10); floatVal = parseFloat(value); // If the descriptor consists of a valid non-negative integer followed by // a U+0077 LATIN SMALL LETTER W character if (regexNonNegativeInteger.test(value) && (lastChar === "w")) { // If width and density are not both absent, then let error be yes. if (w || d) {pError = true;} // Apply the rules for parsing non-negative integers to the descriptor. // If the result is zero, let error be yes. // Otherwise, let width be the result. if (intVal === 0) {pError = true;} else {w = intVal;} // If the descriptor consists of a valid floating-point number followed by // a U+0078 LATIN SMALL LETTER X character } else if (regexFloatingPoint.test(value) && (lastChar === "x")) { // If width, density and future-compat-h are not all absent, then let error // be yes. if (w || d || h) {pError = true;} // Apply the rules for parsing floating-point number values to the descriptor. // If the result is less than zero, let error be yes. Otherwise, let density // be the result. if (floatVal < 0) {pError = true;} else {d = floatVal;} // If the descriptor consists of a valid non-negative integer followed by // a U+0068 LATIN SMALL LETTER H character } else if (regexNonNegativeInteger.test(value) && (lastChar === "h")) { // If height and density are not both absent, then let error be yes. if (h || d) {pError = true;} // Apply the rules for parsing non-negative integers to the descriptor. // If the result is zero, let error be yes. Otherwise, let future-compat-h // be the result. if (intVal === 0) {pError = true;} else {h = intVal;} // Anything else, Let error be yes. } else {pError = true;} } // (close step 13 for loop) // 15. If error is still no, then append a new image source to candidates whose // URL is url, associated with a width width if not absent and a pixel // density density if not absent. Otherwise, there is a parse error. if (!pError) { candidate.url = url; if (w) { candidate.w = w;} if (d) { candidate.d = d;} if (h) { candidate.h = h;} candidates.push(candidate); } else { parseError = true; // eric's global parserror, not just candidate specific if (console && console.log) { // console.log("Invalid srcset descriptor found in '" + // input + "' at '" + desc + "'."); } } } // (close parseDescriptors fn) }32:T1fd1, /* * Sizes Parser * * By Alex Bell | MIT License * * Non-strict but accurate and lightweight JS Parser for the string value * * Reference algorithm at: * https://html.spec.whatwg.org/multipage/embedded-content.html#parse-a-sizes-attribute * * Most comments are copied in directly from the spec * (except for comments in parens). * * Grammar is: * = # [ , ]? | * =

* = * http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-sizes * * E.g. "(max-width: 30em) 100vw, (max-width: 50em) 70vw, 100vw" * or "(min-width: 30em), calc(30em - 15px)" or just "30vw" * * Returns the first valid with a media condition that evaluates to true, * or "100vw" if all valid media conditions evaluate to false. * */ function parseSizes(strValue) { let parseError = false; // (Percentage CSS lengths are not allowed in this case, to avoid confusion: // https://html.spec.whatwg.org/multipage/embedded-content.html#valid-source-size-list // CSS allows a single optional plus or minus sign: // http://www.w3.org/TR/CSS2/syndata.html#numbers // CSS is ASCII case-insensitive: // http://www.w3.org/TR/CSS2/syndata.html#characters ) // Spec allows exponential notation for type: // http://dev.w3.org/csswg/css-values/#numbers var regexCssLengthWithUnits = /^(?:[+-]?[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?(?:ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmin|vmax|vw)$/i, // (This is a quick and lenient test. Because of optional unlimited-depth internal // grouping parens and strict spacing rules, this could get very complicated.) regexCssCalc = /^calc$(?:[0-9a-z \.\+\-\*\/\($]+)\)$/i, i, unparsedSizesList, unparsedSizesListLength, unparsedSize, lastComponentValue, size; // UTILITY FUNCTIONS // ( Manual is faster than RegEx.) // http://jsperf.com/whitespace-character/5 function isSpace(c) { return (c === "\u0020" || // space c === "\u0009" || // horizontal tab c === "\u000A" || // new line c === "\u000C" || // form feed c === "\u000D"); // carriage return } // (Toy CSS parser. The goals here are: // 1) expansive test coverage without the weight of a full CSS parser. // 2) Avoiding regex wherever convenient. // Quick tests: http://jsfiddle.net/gtntL4gr/3/ // Returns an array of arrays.) function parseComponentValues(str) { var chrctr, component = "", componentArray = [], listArray = [], parenDepth = 0, pos = 0, inComment = false; function pushComponent() { if (component) { componentArray.push(component); component = ""; } } function pushComponentArray() { if (componentArray[ 0 ]) { listArray.push(componentArray); componentArray = []; } } // (Loop forwards from the beginning of the string.) while (true) { chrctr = str.charAt(pos); if (chrctr === "") { // ( End of string reached.) pushComponent(); pushComponentArray(); return listArray; } else if (inComment) { if ( (chrctr === "*") && (str.charAt(pos + 1) === "/") ) { // (At end of a comment.) inComment = false; pos += 2; pushComponent(); continue; } else { pos += 1; // (Skip all characters inside comments.) continue; } } else if (isSpace(chrctr)) { // (If previous character in loop was also a space, or if // at the beginning of the string, do not add space char to // component.) if ((str.charAt(pos - 1) && isSpace(str.charAt(pos - 1) ) ) || (!component)) { pos += 1; continue; } else if (parenDepth === 0) { pushComponent(); pos += 1; continue; } else { // (Replace any space character with a plain space for legibility.) chrctr = " "; } } else if (chrctr === "(") { parenDepth += 1; } else if (chrctr === ")") { parenDepth -= 1; } else if (chrctr === ",") { pushComponent() pushComponentArray(); pos += 1; continue; } else if ( (chrctr === "/") && (str.charAt( pos + 1 ) === "*") ) { inComment = true; pos += 2; continue; } component = component + chrctr; pos += 1; } } function isValidNonNegativeSourceSizeValue(s) { if (regexCssLengthWithUnits.test(s) && (parseFloat(s) >= 0)) {return true;} if (regexCssCalc.test(s)) {return true;} // ( http://www.w3.org/TR/CSS2/syndata.html#numbers says: // "-0 is equivalent to 0 and is not a negative number." which means that // unitless zero and unitless negative zero must be accepted as special cases.) if ((s === "0") || (s === "-0") || (s === "+0")) {return true;} return false; } // When asked to parse a sizes attribute from an element, parse a // comma-separated list of component values from the value of the element's // sizes attribute (or the empty string, if the attribute is absent), and let // unparsed sizes list be the result. // http://dev.w3.org/csswg/css-syntax/#parse-comma-separated-list-of-component-values unparsedSizesList = parseComponentValues(strValue); unparsedSizesListLength = unparsedSizesList.length; // For each unparsed size in unparsed sizes list: for (i = 0; i < unparsedSizesListLength; i++) { unparsedSize = unparsedSizesList[ i ]; // 1. Remove all consecutive s from the end of unparsed size. // ( parseComponentValues() already omits spaces outside of parens. ) // If unparsed size is now empty, that is a parse error; continue to the next // iteration of this algorithm. // ( parseComponentValues() won't push an empty array. ) // 2. If the last component value in unparsed size is a valid non-negative // , let size be its value and remove the component value // from unparsed size. Any CSS function other than the calc() function is // invalid. Otherwise, there is a parse error; continue to the next iteration // of this algorithm. // http://dev.w3.org/csswg/css-syntax/#parse-component-value lastComponentValue = unparsedSize[ unparsedSize.length - 1 ]; if (isValidNonNegativeSourceSizeValue(lastComponentValue)) { size = lastComponentValue; unparsedSize.pop(); } else { parseError = true; if (window.console && console.log) { // console.log("Parse error: " + strValue); continue; } } // 3. Remove all consecutive s from the end of unparsed // size. If unparsed size is now empty, return size and exit this algorithm. // If this was not the last item in unparsed sizes list, that is a parse error. if (unparsedSize.length === 0) { if (i !== unparsedSizesListLength - 1) { parseError = true; if (window.console && console.log) { // console.log("Parse error: " + strValue); } } return { size, parseError }; } // 4. Parse the remaining component values in unparsed size as a // . If it does not parse correctly, or it does parse // correctly but the evaluates to false, continue to the // next iteration of this algorithm. // (Parsing all possible compound media conditions in JS is heavy, complicated, // and the payoff is unclear. Is there ever an situation where the // media condition parses incorrectly but still somehow evaluates to true? // Can we just rely on the browser/polyfill to do it?) unparsedSize = unparsedSize.join(" "); if (!(window.matchMedia(unparsedSize).matches) ) { continue; } // 5. Return size and exit this algorithm. return { size, parseError }; } // If the above algorithm exhausts unparsed sizes list without returning a // size value, return 100vw. return { size: "100vw", parseError }; }33:[] 2f:{"title":"chrome srcset selection","cells":[{"id":0,"value":"# chrome srcset selection\n\n[source](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/parser/html_srcset_parser.cc;l=381?q=srcset%20geometric%20mean&ss=chromium)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"viewof srcset = Inputs.textarea({label: \"srcset\", value: `https://o.img.rodeo/w_500,b_tomato/t_WxH/_.png 500w,\nhttps://o.img.rodeo/w_1000,b_goldenrod/t_WxH/_.png 1000w,\nhttps://o.img.rodeo/w_1500,b_forestgreen/t_WxH/_.png 1500w,\nhttps://o.img.rodeo/w_2000,b_dodgerblue/t_WxH/_.png 2000w`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"candidates = addDensitiesAndDistances( parseSrcset( srcset ), resolveLength( parseSizes( sizes ) ), dpr ).candidates","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof sizes = Inputs.text({label: \"sizes\", value: \"100vw\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"resolveLength(parseSizes(sizes))","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof dpr = Inputs.text({label: \"DPR\", value: window.devicePixelRatio})","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"img.currentSrc === selectedResource.url","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"selectedResource = selectSrcset( candidates, dpr )","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"selectSmallestOverOrLargest( candidates )","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"selectClosest( candidates )","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"img = new Promise( ( resolve, reject ) => {\n const i = new Image();\n i.crossOrigin = \"anonymous\";\n i.style.width = '100px';\n i.addEventListener( 'load', () => resolve( i ) );\n i.setAttribute('sizes', sizes);\n i.setAttribute('srcset', srcset);\n} );","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"img.currentSrc","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"selectSrcset = function( annotatedCandidates, dpr ) {\n if ( dpr > 1 ) {\n return selectClosest( annotatedCandidates );\n } else {\n return selectSmallestOverOrLargest( annotatedCandidates );\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"selectClosest = function( annotatedCandidates ) {\n const distances = annotatedCandidates.map( c => c.geometricDistance );\n const minDistance = Math.min( ...distances );\n return annotatedCandidates.find( c => c.geometricDistance === minDistance );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"selectSmallestOverOrLargest = function( annotatedCandidates ) {\n const distances = annotatedCandidates.map( c => c.linearDistance );\n const larger = distances.filter( (d) => { return d >= 0 } );\n let selectedDistance;\n if ( larger.length === 0 ) {\n selectedDistance = Math.max( ...distances );\n } else {\n selectedDistance = Math.min( ...larger );\n }\n return annotatedCandidates.find( c => c.linearDistance === selectedDistance );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"addDensitiesAndDistances = function( parsedSrcset, sizesLengthInPx, dpr ) {\n parsedSrcset.candidates.forEach( i => {\n if ( i.hasOwnProperty( 'd' ) ) {\n i.density = i.d;\n } else if ( i.hasOwnProperty( 'w' ) && sizesLengthInPx ) {\n i.density = i.w / sizesLengthInPx;\n } else {\n i.density = 1;\n }\n i.geometricDistance = geometricDistance( i.density, dpr );\n i.linearDistance = i.density - dpr;\n } );\n return parsedSrcset;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"\n// take a CSS length (as a String)\n// return a Number of CSS pixels\n//\nfunction resolveLength( cssLengthString ) {\n\n let cleanup = false,\n myHTML;\n\n if ( !document.documentElement ) {\n myHTML = document.createElement( 'html' );\n document.appendChild( myHTML );\n cleanup = true;\n }\n\n const testDiv = document.createElement( 'div' );\n testDiv.style.fontSize = 'initial';\n testDiv.style.boxSizing = 'border-box';\n document.documentElement.appendChild( testDiv );\n testDiv.style.width = cssLengthString;\n const width = testDiv.getBoundingClientRect().width;\n\n testDiv.remove();\n if ( cleanup ) {\n myHTML.remove();\n }\n\n return width;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"function geometricDistance(a, b) {\n if (a > b) {\n return a / b;\n } else {\n return b / a;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}