Created
May 18, 2020 18:58
-
-
Save elf-pavlik/408e2909670b623f9341cdf83a71a95f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html><html lang="en"> | |
| <head> | |
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> | |
| <title>Solid Use Cases and Requirements</title> | |
| <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> | |
| <style data-fill-with="stylesheet">/****************************************************************************** | |
| * Style sheet for the W3C specifications * | |
| * | |
| * Special classes handled by this style sheet include: | |
| * | |
| * Indices | |
| * - .toc for the Table of Contents (<ol class="toc">) | |
| * + <span class="secno"> for the section numbers | |
| * - #toc for the Table of Contents (<nav id="toc">) | |
| * - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>) | |
| * - table.index for Index Tables (e.g. for properties or elements) | |
| * | |
| * Structural Markup | |
| * - table.data for general data tables | |
| * -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results ! | |
| * -> use <table class='complex data'> for extra-complex tables | |
| * -> use <td class='long'> for paragraph-length cell content | |
| * -> use <td class='pre'> when manual line breaks/indentation would help readability | |
| * - dl.switch for switch statements | |
| * - ol.algorithm for algorithms (helps to visualize nesting) | |
| * - .figure and .caption (HTML4) and figure and figcaption (HTML5) | |
| * -> .sidefigure for right-floated figures | |
| * - ins/del | |
| * | |
| * Code | |
| * - pre and code | |
| * | |
| * Special Sections | |
| * - .note for informative notes (div, p, span, aside, details) | |
| * - .example for informative examples (div, p, pre, span) | |
| * - .issue for issues (div, p, span) | |
| * - .assertion for assertions (div, p, span) | |
| * - .advisement for loud normative statements (div, p, strong) | |
| * - .annoying-warning for spec obsoletion notices (div, aside, details) | |
| * | |
| * Definition Boxes | |
| * - pre.def for WebIDL definitions | |
| * - table.def for tables that define other entities (e.g. CSS properties) | |
| * - dl.def for definition lists that define other entitles (e.g. HTML elements) | |
| * | |
| * Numbering | |
| * - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>) | |
| * - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>) | |
| * - ::before styled for CSS-generated issue/example/figure numbers: | |
| * -> Documents wishing to use this only need to add | |
| * figcaption::before, | |
| * .caption::before { content: "Figure " counter(figure) " "; } | |
| * .example::before { content: "Example " counter(example) " "; } | |
| * .issue::before { content: "Issue " counter(issue) " "; } | |
| * | |
| * Header Stuff (ignore, just don't conflict with these classes) | |
| * - .head for the header | |
| * - .copyright for the copyright | |
| * | |
| * Miscellaneous | |
| * - .overlarge for things that should be as wide as possible, even if | |
| * that overflows the body text area. This can be used on an item or | |
| * on its container, depending on the effect desired. | |
| * Note that this styling basically doesn't help at all when printing, | |
| * since A4 paper isn't much wider than the max-width here. | |
| * It's better to design things to fit into a narrower measure if possible. | |
| * - js-added ToC jump links (see fixup.js) | |
| * | |
| ******************************************************************************/ | |
| /******************************************************************************/ | |
| /* Body */ | |
| /******************************************************************************/ | |
| body { | |
| counter-reset: example figure issue; | |
| /* Layout */ | |
| max-width: 50em; /* limit line length to 50em for readability */ | |
| margin: 0 auto; /* center text within page */ | |
| padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */ | |
| padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag */ | |
| /* Typography */ | |
| line-height: 1.5; | |
| font-family: sans-serif; | |
| widows: 2; | |
| orphans: 2; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| hyphens: auto; | |
| /* Colors */ | |
| color: black; | |
| background: white top left fixed no-repeat; | |
| background-size: 25px auto; | |
| } | |
| /******************************************************************************/ | |
| /* Front Matter & Navigation */ | |
| /******************************************************************************/ | |
| /** Header ********************************************************************/ | |
| div.head { margin-bottom: 1em } | |
| div.head hr { border-style: solid; } | |
| div.head h1 { | |
| font-weight: bold; | |
| margin: 0 0 .1em; | |
| font-size: 220%; | |
| } | |
| div.head h2 { margin-bottom: 1.5em;} | |
| /** W3C Logo ******************************************************************/ | |
| .head .logo { | |
| float: right; | |
| margin: 0.4rem 0 0.2rem .4rem; | |
| } | |
| .head img[src*="logos/W3C"] { | |
| display: block; | |
| border: solid #1a5e9a; | |
| border-width: .65rem .7rem .6rem; | |
| border-radius: .4rem; | |
| background: #1a5e9a; | |
| color: white; | |
| font-weight: bold; | |
| } | |
| .head a:hover > img[src*="logos/W3C"], | |
| .head a:focus > img[src*="logos/W3C"] { | |
| opacity: .8; | |
| } | |
| .head a:active > img[src*="logos/W3C"] { | |
| background: #c00; | |
| border-color: #c00; | |
| } | |
| /* see also additional rules in Link Styling section */ | |
| /** Copyright *****************************************************************/ | |
| p.copyright, | |
| p.copyright small { font-size: small } | |
| /** Back to Top / ToC Toggle **************************************************/ | |
| @media print { | |
| #toc-nav { | |
| display: none; | |
| } | |
| } | |
| @media not print { | |
| #toc-nav { | |
| position: fixed; | |
| z-index: 2; | |
| bottom: 0; left: 0; | |
| margin: 0; | |
| min-width: 1.33em; | |
| border-top-right-radius: 2rem; | |
| box-shadow: 0 0 2px; | |
| font-size: 1.5em; | |
| color: black; | |
| } | |
| #toc-nav > a { | |
| display: block; | |
| white-space: nowrap; | |
| height: 1.33em; | |
| padding: .1em 0.3em; | |
| margin: 0; | |
| background: white; | |
| box-shadow: 0 0 2px; | |
| border: none; | |
| border-top-right-radius: 1.33em; | |
| background: white; | |
| } | |
| #toc-nav > #toc-jump { | |
| padding-bottom: 2em; | |
| margin-bottom: -1.9em; | |
| } | |
| #toc-nav > a:hover, | |
| #toc-nav > a:focus { | |
| background: #f8f8f8; | |
| } | |
| #toc-nav > a:not(:hover):not(:focus) { | |
| color: #707070; | |
| } | |
| /* statusbar gets in the way on keyboard focus; remove once browsers fix */ | |
| #toc-nav > a[href="#toc"]:not(:hover):focus:last-child { | |
| padding-bottom: 1.5rem; | |
| } | |
| #toc-nav:not(:hover) > a:not(:focus) > span + span { | |
| /* Ideally this uses :focus-within on #toc-nav */ | |
| display: none; | |
| } | |
| #toc-nav > a > span + span { | |
| padding-right: 0.2em; | |
| } | |
| #toc-toggle-inline { | |
| vertical-align: 0.05em; | |
| font-size: 80%; | |
| color: gray; | |
| color: hsla(203,20%,40%,.7); | |
| border-style: none; | |
| background: transparent; | |
| position: relative; | |
| } | |
| #toc-toggle-inline:hover:not(:active), | |
| #toc-toggle-inline:focus:not(:active) { | |
| text-shadow: 1px 1px silver; | |
| top: -1px; | |
| left: -1px; | |
| } | |
| #toc-nav :active { | |
| color: #C00; | |
| } | |
| } | |
| /** ToC Sidebar ***************************************************************/ | |
| /* Floating sidebar */ | |
| @media screen { | |
| body.toc-sidebar #toc { | |
| position: fixed; | |
| top: 0; bottom: 0; | |
| left: 0; | |
| width: 23.5em; | |
| max-width: 80%; | |
| max-width: calc(100% - 2em - 26px); | |
| overflow: auto; | |
| padding: 0 1em; | |
| padding-left: 42px; | |
| padding-left: calc(1em + 26px); | |
| background: inherit; | |
| background-color: #f7f8f9; | |
| z-index: 1; | |
| box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset; | |
| } | |
| body.toc-sidebar #toc h2 { | |
| margin-top: .8rem; | |
| font-variant: small-caps; | |
| font-variant: all-small-caps; | |
| text-transform: lowercase; | |
| font-weight: bold; | |
| color: gray; | |
| color: hsla(203,20%,40%,.7); | |
| } | |
| body.toc-sidebar #toc-jump:not(:focus) { | |
| width: 0; | |
| height: 0; | |
| padding: 0; | |
| position: absolute; | |
| overflow: hidden; | |
| } | |
| } | |
| /* Hide main scroller when only the ToC is visible anyway */ | |
| @media screen and (max-width: 28em) { | |
| body.toc-sidebar { | |
| overflow: hidden; | |
| } | |
| } | |
| /* Sidebar with its own space */ | |
| @media screen and (min-width: 78em) { | |
| body:not(.toc-inline) #toc { | |
| position: fixed; | |
| top: 0; bottom: 0; | |
| left: 0; | |
| width: 23.5em; | |
| overflow: auto; | |
| padding: 0 1em; | |
| padding-left: 42px; | |
| padding-left: calc(1em + 26px); | |
| background: inherit; | |
| background-color: #f7f8f9; | |
| z-index: 1; | |
| box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset; | |
| } | |
| body:not(.toc-inline) #toc h2 { | |
| margin-top: .8rem; | |
| font-variant: small-caps; | |
| font-variant: all-small-caps; | |
| text-transform: lowercase; | |
| font-weight: bold; | |
| color: gray; | |
| color: hsla(203,20%,40%,.7); | |
| } | |
| body:not(.toc-inline) { | |
| padding-left: 29em; | |
| } | |
| /* See also Overflow section at the bottom */ | |
| body:not(.toc-inline) #toc-jump:not(:focus) { | |
| width: 0; | |
| height: 0; | |
| padding: 0; | |
| position: absolute; | |
| overflow: hidden; | |
| } | |
| } | |
| @media screen and (min-width: 90em) { | |
| body:not(.toc-inline) { | |
| margin: 0 4em; | |
| } | |
| } | |
| /******************************************************************************/ | |
| /* Sectioning */ | |
| /******************************************************************************/ | |
| /** Headings ******************************************************************/ | |
| h1, h2, h3, h4, h5, h6, dt { | |
| page-break-after: avoid; | |
| page-break-inside: avoid; | |
| font: 100% sans-serif; /* Reset all font styling to clear out UA styles */ | |
| font-family: inherit; /* Inherit the font family. */ | |
| line-height: 1.2; /* Keep wrapped headings compact */ | |
| hyphens: manual; /* Hyphenated headings look weird */ | |
| } | |
| h2, h3, h4, h5, h6 { | |
| margin-top: 3rem; | |
| } | |
| h1, h2, h3 { | |
| color: #005A9C; | |
| background: transparent; | |
| } | |
| h1 { font-size: 170%; } | |
| h2 { font-size: 140%; } | |
| h3 { font-size: 120%; } | |
| h4 { font-weight: bold; } | |
| h5 { font-style: italic; } | |
| h6 { font-variant: small-caps; } | |
| dt { font-weight: bold; } | |
| /** Subheadings ***************************************************************/ | |
| h1 + h2, | |
| #subtitle { | |
| /* #subtitle is a subtitle in an H2 under the H1 */ | |
| margin-top: 0; | |
| } | |
| h2 + h3, | |
| h3 + h4, | |
| h4 + h5, | |
| h5 + h6 { | |
| margin-top: 1.2em; /* = 1 x line-height */ | |
| } | |
| /** Section divider ***********************************************************/ | |
| :not(.head) > hr { | |
| font-size: 1.5em; | |
| text-align: center; | |
| margin: 1em auto; | |
| height: auto; | |
| border: transparent solid 0; | |
| background: transparent; | |
| } | |
| :not(.head) > hr::before { | |
| content: "\2727\2003\2003\2727\2003\2003\2727"; | |
| } | |
| /******************************************************************************/ | |
| /* Paragraphs and Lists */ | |
| /******************************************************************************/ | |
| p { | |
| margin: 1em 0; | |
| } | |
| dd > p:first-child, | |
| li > p:first-child { | |
| margin-top: 0; | |
| } | |
| ul, ol { | |
| margin-left: 0; | |
| padding-left: 2em; | |
| } | |
| li { | |
| margin: 0.25em 0 0.5em; | |
| padding: 0; | |
| } | |
| dl dd { | |
| margin: 0 0 .5em 2em; | |
| } | |
| .head dd + dd { /* compact for header */ | |
| margin-top: -.5em; | |
| } | |
| /* Style for algorithms */ | |
| ol.algorithm ol:not(.algorithm), | |
| .algorithm > ol ol:not(.algorithm) { | |
| border-left: 0.5em solid #DEF; | |
| } | |
| /* Put nice boxes around each algorithm. */ | |
| [data-algorithm]:not(.heading) { | |
| padding: .5em; | |
| border: thin solid #ddd; border-radius: .5em; | |
| margin: .5em calc(-0.5em - 1px); | |
| } | |
| [data-algorithm]:not(.heading) > :first-child { | |
| margin-top: 0; | |
| } | |
| [data-algorithm]:not(.heading) > :last-child { | |
| margin-bottom: 0; | |
| } | |
| /* Style for switch/case <dl>s */ | |
| dl.switch > dd > ol.only, | |
| dl.switch > dd > .only > ol { | |
| margin-left: 0; | |
| } | |
| dl.switch > dd > ol.algorithm, | |
| dl.switch > dd > .algorithm > ol { | |
| margin-left: -2em; | |
| } | |
| dl.switch { | |
| padding-left: 2em; | |
| } | |
| dl.switch > dt { | |
| text-indent: -1.5em; | |
| margin-top: 1em; | |
| } | |
| dl.switch > dt + dt { | |
| margin-top: 0; | |
| } | |
| dl.switch > dt::before { | |
| content: '\21AA'; | |
| padding: 0 0.5em 0 0; | |
| display: inline-block; | |
| width: 1em; | |
| text-align: right; | |
| line-height: 0.5em; | |
| } | |
| /** Terminology Markup ********************************************************/ | |
| /******************************************************************************/ | |
| /* Inline Markup */ | |
| /******************************************************************************/ | |
| /** Terminology Markup ********************************************************/ | |
| dfn { /* Defining instance */ | |
| font-weight: bolder; | |
| } | |
| a > i { /* Instance of term */ | |
| font-style: normal; | |
| } | |
| dt dfn code, code.idl { | |
| font-size: medium; | |
| } | |
| dfn var { | |
| font-style: normal; | |
| } | |
| /** Change Marking ************************************************************/ | |
| del { color: red; text-decoration: line-through; } | |
| ins { color: #080; text-decoration: underline; } | |
| /** Miscellaneous improvements to inline formatting ***************************/ | |
| sup { | |
| vertical-align: super; | |
| font-size: 80% | |
| } | |
| /******************************************************************************/ | |
| /* Code */ | |
| /******************************************************************************/ | |
| /** General monospace/pre rules ***********************************************/ | |
| pre, code, samp { | |
| font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace; | |
| font-size: .9em; | |
| page-break-inside: avoid; | |
| hyphens: none; | |
| text-transform: none; | |
| } | |
| pre code, | |
| code code { | |
| font-size: 100%; | |
| } | |
| pre { | |
| margin-top: 1em; | |
| margin-bottom: 1em; | |
| overflow: auto; | |
| } | |
| /** Inline Code fragments *****************************************************/ | |
| /* Do something nice. */ | |
| /******************************************************************************/ | |
| /* Links */ | |
| /******************************************************************************/ | |
| /** General Hyperlinks ********************************************************/ | |
| /* We hyperlink a lot, so make it less intrusive */ | |
| a[href] { | |
| color: #034575; | |
| text-decoration: none; | |
| border-bottom: 1px solid #707070; | |
| /* Need a bit of extending for it to look okay */ | |
| padding: 0 1px 0; | |
| margin: 0 -1px 0; | |
| } | |
| a:visited { | |
| border-bottom-color: #BBB; | |
| } | |
| /* Use distinguishing colors when user is interacting with the link */ | |
| a[href]:focus, | |
| a[href]:hover { | |
| background: #f8f8f8; | |
| background: rgba(75%, 75%, 75%, .25); | |
| border-bottom-width: 3px; | |
| margin-bottom: -2px; | |
| } | |
| a[href]:active { | |
| color: #C00; | |
| border-color: #C00; | |
| } | |
| /* Backout above styling for W3C logo */ | |
| .head .logo, | |
| .head .logo a { | |
| border: none; | |
| text-decoration: none; | |
| background: transparent; | |
| } | |
| /******************************************************************************/ | |
| /* Images */ | |
| /******************************************************************************/ | |
| img { | |
| border-style: none; | |
| } | |
| /* For autogen numbers, add | |
| .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; } | |
| */ | |
| figure, .figure, .sidefigure { | |
| page-break-inside: avoid; | |
| text-align: center; | |
| margin: 2.5em 0; | |
| } | |
| .figure img, .sidefigure img, figure img, | |
| .figure object, .sidefigure object, figure object { | |
| max-width: 100%; | |
| margin: auto; | |
| } | |
| .figure pre, .sidefigure pre, figure pre { | |
| text-align: left; | |
| display: table; | |
| margin: 1em auto; | |
| } | |
| .figure table, figure table { | |
| margin: auto; | |
| } | |
| @media screen and (min-width: 20em) { | |
| .sidefigure { | |
| float: right; | |
| width: 50%; | |
| margin: 0 0 0.5em 0.5em | |
| } | |
| } | |
| .caption, figcaption, caption { | |
| font-style: italic; | |
| font-size: 90%; | |
| } | |
| .caption::before, figcaption::before, figcaption > .marker { | |
| font-weight: bold; | |
| } | |
| .caption, figcaption { | |
| counter-increment: figure; | |
| } | |
| /* DL list is indented 2em, but figure inside it is not */ | |
| dd > .figure, dd > figure { margin-left: -2em } | |
| /******************************************************************************/ | |
| /* Colored Boxes */ | |
| /******************************************************************************/ | |
| .issue, .note, .example, .assertion, .advisement, blockquote { | |
| padding: .5em; | |
| border: .5em; | |
| border-left-style: solid; | |
| page-break-inside: avoid; | |
| } | |
| span.issue, span.note { | |
| padding: .1em .5em .15em; | |
| border-right-style: solid; | |
| } | |
| .issue, | |
| .note, | |
| .example, | |
| .advisement, | |
| .assertion, | |
| blockquote { | |
| margin: 1em auto; | |
| } | |
| .note > p:first-child, | |
| .issue > p:first-child, | |
| blockquote > :first-child { | |
| margin-top: 0; | |
| } | |
| blockquote > :last-child { | |
| margin-bottom: 0; | |
| } | |
| /** Blockquotes ***************************************************************/ | |
| blockquote { | |
| border-color: silver; | |
| } | |
| /** Open issue ****************************************************************/ | |
| .issue { | |
| border-color: #E05252; | |
| background: #FBE9E9; | |
| counter-increment: issue; | |
| overflow: auto; | |
| } | |
| .issue::before, .issue > .marker { | |
| text-transform: uppercase; | |
| color: #AE1E1E; | |
| padding-right: 1em; | |
| text-transform: uppercase; | |
| } | |
| /* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers, | |
| or use class="marker" to mark up the issue number in source. */ | |
| /** Example *******************************************************************/ | |
| .example { | |
| border-color: #E0CB52; | |
| background: #FCFAEE; | |
| counter-increment: example; | |
| overflow: auto; | |
| clear: both; | |
| } | |
| .example::before, .example > .marker { | |
| text-transform: uppercase; | |
| color: #827017; | |
| min-width: 7.5em; | |
| display: block; | |
| } | |
| /* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers, | |
| or use class="marker" to mark up the example number in source. */ | |
| /** Non-normative Note ********************************************************/ | |
| .note { | |
| border-color: #52E052; | |
| background: #E9FBE9; | |
| overflow: auto; | |
| } | |
| .note::before, .note > .marker, | |
| details.note > summary::before, | |
| details.note > summary > .marker { | |
| text-transform: uppercase; | |
| display: block; | |
| color: hsl(120, 70%, 30%); | |
| } | |
| /* Add .note::before { content: "Note"; } for autogen label, | |
| or use class="marker" to mark up the label in source. */ | |
| details.note > summary { | |
| display: block; | |
| color: hsl(120, 70%, 30%); | |
| } | |
| details.note[open] > summary { | |
| border-bottom: 1px silver solid; | |
| } | |
| /** Assertion Box *************************************************************/ | |
| /* for assertions in algorithms */ | |
| .assertion { | |
| border-color: #AAA; | |
| background: #EEE; | |
| } | |
| /** Advisement Box ************************************************************/ | |
| /* for attention-grabbing normative statements */ | |
| .advisement { | |
| border-color: orange; | |
| border-style: none solid; | |
| background: #FFEECC; | |
| } | |
| strong.advisement { | |
| display: block; | |
| text-align: center; | |
| } | |
| .advisement > .marker { | |
| color: #B35F00; | |
| } | |
| /** Spec Obsoletion Notice ****************************************************/ | |
| /* obnoxious obsoletion notice for older/abandoned specs. */ | |
| details { | |
| display: block; | |
| } | |
| summary { | |
| font-weight: bolder; | |
| } | |
| .annoying-warning:not(details), | |
| details.annoying-warning:not([open]) > summary, | |
| details.annoying-warning[open] { | |
| background: #fdd; | |
| color: red; | |
| font-weight: bold; | |
| padding: .75em 1em; | |
| border: thick red; | |
| border-style: solid; | |
| border-radius: 1em; | |
| } | |
| .annoying-warning :last-child { | |
| margin-bottom: 0; | |
| } | |
| @media not print { | |
| details.annoying-warning[open] { | |
| position: fixed; | |
| left: 1em; | |
| right: 1em; | |
| bottom: 1em; | |
| z-index: 1000; | |
| } | |
| } | |
| details.annoying-warning:not([open]) > summary { | |
| text-align: center; | |
| } | |
| /** Entity Definition Boxes ***************************************************/ | |
| .def { | |
| padding: .5em 1em; | |
| background: #DEF; | |
| margin: 1.2em 0; | |
| border-left: 0.5em solid #8CCBF2; | |
| } | |
| /******************************************************************************/ | |
| /* Tables */ | |
| /******************************************************************************/ | |
| th, td { | |
| text-align: left; | |
| text-align: start; | |
| } | |
| /** Property/Descriptor Definition Tables *************************************/ | |
| table.def { | |
| /* inherits .def box styling, see above */ | |
| width: 100%; | |
| border-spacing: 0; | |
| } | |
| table.def td, | |
| table.def th { | |
| padding: 0.5em; | |
| vertical-align: baseline; | |
| border-bottom: 1px solid #bbd7e9; | |
| } | |
| table.def > tbody > tr:last-child th, | |
| table.def > tbody > tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| table.def th { | |
| font-style: italic; | |
| font-weight: normal; | |
| padding-left: 1em; | |
| width: 3em; | |
| } | |
| /* For when values are extra-complex and need formatting for readability */ | |
| table td.pre { | |
| white-space: pre-wrap; | |
| } | |
| /* A footnote at the bottom of a def table */ | |
| table.def td.footnote { | |
| padding-top: 0.6em; | |
| } | |
| table.def td.footnote::before { | |
| content: " "; | |
| display: block; | |
| height: 0.6em; | |
| width: 4em; | |
| border-top: thin solid; | |
| } | |
| /** Data tables (and properly marked-up index tables) *************************/ | |
| /* | |
| <table class="data"> highlights structural relationships in a table | |
| when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute) | |
| Use class="complex data" for particularly complicated tables -- | |
| (This will draw more lines: busier, but clearer.) | |
| Use class="long" on table cells with paragraph-like contents | |
| (This will adjust text alignment accordingly.) | |
| Alternately use class="longlastcol" on tables, to have the last column assume "long". | |
| */ | |
| table { | |
| word-wrap: normal; | |
| overflow-wrap: normal; | |
| hyphens: manual; | |
| } | |
| table.data, | |
| table.index { | |
| margin: 1em auto; | |
| border-collapse: collapse; | |
| border: hidden; | |
| width: 100%; | |
| } | |
| table.data caption, | |
| table.index caption { | |
| max-width: 50em; | |
| margin: 0 auto 1em; | |
| } | |
| table.data td, table.data th, | |
| table.index td, table.index th { | |
| padding: 0.5em 1em; | |
| border-width: 1px; | |
| border-color: silver; | |
| border-top-style: solid; | |
| } | |
| table.data thead td:empty { | |
| padding: 0; | |
| border: 0; | |
| } | |
| table.data thead, | |
| table.index thead, | |
| table.data tbody, | |
| table.index tbody { | |
| border-bottom: 2px solid; | |
| } | |
| table.data colgroup, | |
| table.index colgroup { | |
| border-left: 2px solid; | |
| } | |
| table.data tbody th:first-child, | |
| table.index tbody th:first-child { | |
| border-right: 2px solid; | |
| border-top: 1px solid silver; | |
| padding-right: 1em; | |
| } | |
| table.data th[colspan], | |
| table.data td[colspan] { | |
| text-align: center; | |
| } | |
| table.complex.data th, | |
| table.complex.data td { | |
| border: 1px solid silver; | |
| text-align: center; | |
| } | |
| table.data.longlastcol td:last-child, | |
| table.data td.long { | |
| vertical-align: baseline; | |
| text-align: left; | |
| } | |
| table.data img { | |
| vertical-align: middle; | |
| } | |
| /* | |
| Alternate table alignment rules | |
| table.data, | |
| table.index { | |
| text-align: center; | |
| } | |
| table.data thead th[scope="row"], | |
| table.index thead th[scope="row"] { | |
| text-align: right; | |
| } | |
| table.data tbody th:first-child, | |
| table.index tbody th:first-child { | |
| text-align: right; | |
| } | |
| Possible extra rowspan handling | |
| table.data tbody th[rowspan]:not([rowspan='1']), | |
| table.index tbody th[rowspan]:not([rowspan='1']), | |
| table.data tbody td[rowspan]:not([rowspan='1']), | |
| table.index tbody td[rowspan]:not([rowspan='1']) { | |
| border-left: 1px solid silver; | |
| } | |
| table.data tbody th[rowspan]:first-child, | |
| table.index tbody th[rowspan]:first-child, | |
| table.data tbody td[rowspan]:first-child, | |
| table.index tbody td[rowspan]:first-child{ | |
| border-left: 0; | |
| border-right: 1px solid silver; | |
| } | |
| */ | |
| /******************************************************************************/ | |
| /* Indices */ | |
| /******************************************************************************/ | |
| /** Table of Contents *********************************************************/ | |
| .toc a { | |
| /* More spacing; use padding to make it part of the click target. */ | |
| padding-top: 0.1rem; | |
| /* Larger, more consistently-sized click target */ | |
| display: block; | |
| /* Reverse color scheme */ | |
| color: black; | |
| border-color: #3980B5; | |
| border-bottom-width: 3px !important; | |
| margin-bottom: 0px !important; | |
| } | |
| .toc a:visited { | |
| border-color: #054572; | |
| } | |
| .toc a:not(:focus):not(:hover) { | |
| /* Allow colors to cascade through from link styling */ | |
| border-bottom-color: transparent; | |
| } | |
| .toc, .toc ol, .toc ul, .toc li { | |
| list-style: none; /* Numbers must be inlined into source */ | |
| /* because generated content isn't search/selectable and markers can't do multilevel yet */ | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1.1rem; /* consistent spacing */ | |
| } | |
| /* ToC not indented until third level, but font style & margins show hierarchy */ | |
| .toc > li { font-weight: bold; } | |
| .toc > li li { font-weight: normal; } | |
| .toc > li li li { font-size: 95%; } | |
| .toc > li li li li { font-size: 90%; } | |
| .toc > li li li li .secno { font-size: 85%; } | |
| .toc > li li li li li { font-size: 85%; } | |
| .toc > li li li li li .secno { font-size: 100%; } | |
| /* @supports not (display:grid) { */ | |
| .toc > li { margin: 1.5rem 0; } | |
| .toc > li li { margin: 0.3rem 0; } | |
| .toc > li li li { margin-left: 2rem; } | |
| /* Section numbers in a column of their own */ | |
| .toc .secno { | |
| float: left; | |
| width: 4rem; | |
| white-space: nowrap; | |
| } | |
| .toc li { | |
| clear: both; | |
| } | |
| :not(li) > .toc { margin-left: 5rem; } | |
| .toc .secno { margin-left: -5rem; } | |
| .toc > li li li .secno { margin-left: -7rem; } | |
| .toc > li li li li .secno { margin-left: -9rem; } | |
| .toc > li li li li li .secno { margin-left: -11rem; } | |
| /* Tighten up indentation in narrow ToCs */ | |
| @media (max-width: 30em) { | |
| :not(li) > .toc { margin-left: 4rem; } | |
| .toc .secno { margin-left: -4rem; } | |
| .toc > li li li { margin-left: 1rem; } | |
| .toc > li li li .secno { margin-left: -5rem; } | |
| .toc > li li li li .secno { margin-left: -6rem; } | |
| .toc > li li li li li .secno { margin-left: -7rem; } | |
| } | |
| /* } */ | |
| @supports (display:grid) and (display:contents) { | |
| /* Use #toc over .toc to override non-@supports rules. */ | |
| #toc { | |
| display: grid; | |
| align-content: start; | |
| grid-template-columns: auto 1fr; | |
| grid-column-gap: 1rem; | |
| column-gap: 1rem; | |
| grid-row-gap: .6rem; | |
| row-gap: .6rem; | |
| } | |
| #toc h2 { | |
| grid-column: 1 / -1; | |
| margin-bottom: 0; | |
| } | |
| #toc ol, | |
| #toc li, | |
| #toc a { | |
| display: contents; | |
| /* Switch <a> to subgrid when supported */ | |
| } | |
| #toc span { | |
| margin: 0; | |
| } | |
| #toc > .toc > li > a > span { | |
| /* The spans of the top-level list, | |
| comprising the first items of each top-level section. */ | |
| margin-top: 1.1rem; | |
| } | |
| #toc#toc .secno { /* Ugh, need more specificity to override base.css */ | |
| grid-column: 1; | |
| width: auto; | |
| margin-left: 0; | |
| } | |
| #toc .content { | |
| grid-column: 2; | |
| width: auto; | |
| margin-right: 1rem; | |
| } | |
| #toc .content:hover { | |
| background: rgba(75%, 75%, 75%, .25); | |
| border-bottom: 3px solid #054572; | |
| margin-bottom: -3px; | |
| } | |
| #toc li li li .content { | |
| margin-left: 1rem; | |
| } | |
| #toc li li li li .content { | |
| margin-left: 2rem; | |
| } | |
| } | |
| /** Index *********************************************************************/ | |
| /* Index Lists: Layout */ | |
| ul.index { margin-left: 0; columns: 15em; text-indent: 1em hanging; } | |
| ul.index li { margin-left: 0; list-style: none; break-inside: avoid; } | |
| ul.index li li { margin-left: 1em } | |
| ul.index dl { margin-top: 0; } | |
| ul.index dt { margin: .2em 0 .2em 20px;} | |
| ul.index dd { margin: .2em 0 .2em 40px;} | |
| /* Index Lists: Typography */ | |
| ul.index ul, | |
| ul.index dl { font-size: smaller; } | |
| @media not print { | |
| ul.index li span { | |
| white-space: nowrap; | |
| color: transparent; } | |
| ul.index li a:hover + span, | |
| ul.index li a:focus + span { | |
| color: #707070; | |
| } | |
| } | |
| /** Index Tables *****************************************************/ | |
| /* See also the data table styling section, which this effectively subclasses */ | |
| table.index { | |
| font-size: small; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| text-align: left; | |
| margin: 1em 0; | |
| } | |
| table.index td, | |
| table.index th { | |
| padding: 0.4em; | |
| } | |
| table.index tr:hover td:not([rowspan]), | |
| table.index tr:hover th:not([rowspan]) { | |
| background: #f7f8f9; | |
| } | |
| /* The link in the first column in the property table (formerly a TD) */ | |
| table.index th:first-child a { | |
| font-weight: bold; | |
| } | |
| /******************************************************************************/ | |
| /* Print */ | |
| /******************************************************************************/ | |
| @media print { | |
| /* Pages have their own margins. */ | |
| html { | |
| margin: 0; | |
| } | |
| /* Serif for print. */ | |
| body { | |
| font-family: serif; | |
| } | |
| } | |
| @page { | |
| margin: 1.5cm 1.1cm; | |
| } | |
| /******************************************************************************/ | |
| /* Legacy */ | |
| /******************************************************************************/ | |
| /* This rule is inherited from past style sheets. No idea what it's for. */ | |
| .hide { display: none } | |
| /******************************************************************************/ | |
| /* Overflow Control */ | |
| /******************************************************************************/ | |
| .figure .caption, .sidefigure .caption, figcaption { | |
| /* in case figure is overlarge, limit caption to 50em */ | |
| max-width: 50rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .overlarge { | |
| /* Magic to create good table positioning: | |
| "content column" is 50ems wide at max; less on smaller screens. | |
| Extra space (after ToC + content) is empty on the right. | |
| 1. When table < content column, centers table in column. | |
| 2. When content < table < available, left-aligns. | |
| 3. When table > available, fills available + scroll bar. | |
| */ | |
| display: grid; | |
| grid-template-columns: minmax(0, 50em); | |
| } | |
| .overlarge > table { | |
| /* limit preferred width of table */ | |
| max-width: 50em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| @media (min-width: 55em) { | |
| .overlarge { | |
| margin-right: calc(13px + 26.5rem - 50vw); | |
| max-width: none; | |
| } | |
| } | |
| @media screen and (min-width: 78em) { | |
| body:not(.toc-inline) .overlarge { | |
| /* 30.5em body padding 50em content area */ | |
| margin-right: calc(40em - 50vw) !important; | |
| } | |
| } | |
| @media screen and (min-width: 90em) { | |
| body:not(.toc-inline) .overlarge { | |
| /* 4em html margin 30.5em body padding 50em content area */ | |
| margin-right: calc(84.5em - 100vw) !important; | |
| } | |
| } | |
| @media not print { | |
| .overlarge { | |
| overflow-x: auto; | |
| /* See Lea Verou's explanation background-attachment: | |
| * http://lea.verou.me/2012/04/background-attachment-local/ | |
| * | |
| background: top left / 4em 100% linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)) local, | |
| top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local, | |
| top left / 1em 100% linear-gradient(to right, #c3c3c5, rgba(195, 195, 197, 0)) scroll, | |
| top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll, | |
| white; | |
| background-repeat: no-repeat; | |
| */ | |
| } | |
| } | |
| </style> | |
| <meta content="Bikeshed version 70ffa934, updated Fri May 1 10:12:04 2020 -0700" name="generator"> | |
| <link href="http://example.com/url-this-spec-will-live-at" rel="canonical"> | |
| <meta content="5660ed28cd25c829fd2281f399a62c809bc9aeab" name="document-revision"> | |
| <style>/* style-autolinks */ | |
| .css.css, .property.property, .descriptor.descriptor { | |
| color: #005a9c; | |
| font-size: inherit; | |
| font-family: inherit; | |
| } | |
| .css::before, .property::before, .descriptor::before { | |
| content: "‘"; | |
| } | |
| .css::after, .property::after, .descriptor::after { | |
| content: "’"; | |
| } | |
| .property, .descriptor { | |
| /* Don't wrap property and descriptor names */ | |
| white-space: nowrap; | |
| } | |
| .type { /* CSS value <type> */ | |
| font-style: italic; | |
| } | |
| pre .property::before, pre .property::after { | |
| content: ""; | |
| } | |
| [data-link-type="property"]::before, | |
| [data-link-type="propdesc"]::before, | |
| [data-link-type="descriptor"]::before, | |
| [data-link-type="value"]::before, | |
| [data-link-type="function"]::before, | |
| [data-link-type="at-rule"]::before, | |
| [data-link-type="selector"]::before, | |
| [data-link-type="maybe"]::before { | |
| content: "‘"; | |
| } | |
| [data-link-type="property"]::after, | |
| [data-link-type="propdesc"]::after, | |
| [data-link-type="descriptor"]::after, | |
| [data-link-type="value"]::after, | |
| [data-link-type="function"]::after, | |
| [data-link-type="at-rule"]::after, | |
| [data-link-type="selector"]::after, | |
| [data-link-type="maybe"]::after { | |
| content: "’"; | |
| } | |
| [data-link-type].production::before, | |
| [data-link-type].production::after, | |
| .prod [data-link-type]::before, | |
| .prod [data-link-type]::after { | |
| content: ""; | |
| } | |
| [data-link-type=element], | |
| [data-link-type=element-attr] { | |
| font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; | |
| font-size: .9em; | |
| } | |
| [data-link-type=element]::before { content: "<" } | |
| [data-link-type=element]::after { content: ">" } | |
| [data-link-type=biblio] { | |
| white-space: pre; | |
| }</style> | |
| <style>/* style-counters */ | |
| body { | |
| counter-reset: example figure issue; | |
| } | |
| .issue { | |
| counter-increment: issue; | |
| } | |
| .issue:not(.no-marker)::before { | |
| content: "Issue " counter(issue); | |
| } | |
| .example { | |
| counter-increment: example; | |
| } | |
| .example:not(.no-marker)::before { | |
| content: "Example " counter(example); | |
| } | |
| .invalid.example:not(.no-marker)::before, | |
| .illegal.example:not(.no-marker)::before { | |
| content: "Invalid Example" counter(example); | |
| } | |
| figcaption { | |
| counter-increment: figure; | |
| } | |
| figcaption:not(.no-marker)::before { | |
| content: "Figure " counter(figure) " "; | |
| }</style> | |
| <style>/* style-md-lists */ | |
| /* This is a weird hack for me not yet following the commonmark spec | |
| regarding paragraph and lists. */ | |
| [data-md] > :first-child { | |
| margin-top: 0; | |
| } | |
| [data-md] > :last-child { | |
| margin-bottom: 0; | |
| }</style> | |
| <style>/* style-selflinks */ | |
| .heading, .issue, .note, .example, li, dt { | |
| position: relative; | |
| } | |
| a.self-link { | |
| position: absolute; | |
| top: 0; | |
| left: calc(-1 * (3.5rem - 26px)); | |
| width: calc(3.5rem - 26px); | |
| height: 2em; | |
| text-align: center; | |
| border: none; | |
| transition: opacity .2s; | |
| opacity: .5; | |
| } | |
| a.self-link:hover { | |
| opacity: 1; | |
| } | |
| .heading > a.self-link { | |
| font-size: 83%; | |
| } | |
| li > a.self-link { | |
| left: calc(-1 * (3.5rem - 26px) - 2em); | |
| } | |
| dfn > a.self-link { | |
| top: auto; | |
| left: auto; | |
| opacity: 0; | |
| width: 1.5em; | |
| height: 1.5em; | |
| background: gray; | |
| color: white; | |
| font-style: normal; | |
| transition: opacity .2s, background-color .2s, color .2s; | |
| } | |
| dfn:hover > a.self-link { | |
| opacity: 1; | |
| } | |
| dfn > a.self-link:hover { | |
| color: black; | |
| } | |
| a.self-link::before { content: "¶"; } | |
| .heading > a.self-link::before { content: "§"; } | |
| dfn > a.self-link::before { content: "#"; }</style> | |
| <body class="h-entry"> | |
| <div class="head"> | |
| <p data-fill-with="logo"></p> | |
| <h1 class="p-name no-ref" id="title">Solid Use Cases and Requirements</h1> | |
| <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2020-05-18">18 May 2020</time></span></h2> | |
| <div data-fill-with="spec-metadata"> | |
| <dl> | |
| <dt>This version: | |
| <dd><a class="u-url" href="http://example.com/url-this-spec-will-live-at">http://example.com/url-this-spec-will-live-at</a> | |
| <dt>Issue Tracking: | |
| <dd><a href="https://github.com/solid/data-interoperability-panel/issues/">GitHub</a> | |
| <dd><a href="#issues-index">Inline In Spec</a> | |
| <dt class="editor">Editor: | |
| <dd class="editor p-author h-card vcard"><span class="p-name fn">elf Pavlik</span> | |
| </dl> | |
| </div> | |
| <div data-fill-with="warning"></div> | |
| <p class="copyright" data-fill-with="copyright"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="https://licensebuttons.net/p/zero/1.0/80x15.png"></a> To the extent possible under law, the editors have waived all copyright | |
| and related or neighboring rights to this work. | |
| In addition, as of 18 May 2020, | |
| the editors have made this specification available under the <a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>, | |
| which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0. | |
| Parts of this work may be from another specification document. If so, those parts are instead covered by the license of that specification document. </p> | |
| <hr title="Separator for header"> | |
| </div> | |
| <div class="p-summary" data-fill-with="abstract"> | |
| <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> | |
| <p>Use Cases and Requirements for Solid ecosystem.</p> | |
| </div> | |
| <div data-fill-with="at-risk"></div> | |
| <nav data-fill-with="table-of-contents" id="toc"> | |
| <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> | |
| <ol class="toc" role="directory"> | |
| <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a> | |
| <li> | |
| <a href="#requirements"><span class="secno">2</span> <span class="content">Requirements</span></a> | |
| <ol class="toc"> | |
| <li><a href="#the-system-is-not-abusable"><span class="secno">2.1</span> <span class="content">The system is not abusable</span></a> | |
| <li><a href="#an-app-can-request-access-to-a-specific-resource"><span class="secno">2.2</span> <span class="content">An app can request access to a specific resource</span></a> | |
| <li><a href="#an-app-can-request-access-to-a-specific-type-of-data-without-knowing-the-structure-of-resources-on-a-pod"><span class="secno">2.3</span> <span class="content">An app can request access to a specific type of data without knowing the structure of resources on a Pod</span></a> | |
| <li><a href="#access-requests-can-be-sent-when-the-resource-owner-is-not-present-to-be-approved-once-the-user-is-present"><span class="secno">2.4</span> <span class="content">Access requests can be sent when the resource owner is not present to be approved once the user is present</span></a> | |
| <li><a href="#apps-can-request-the-ability-to-write-a-specific-type-of-data-and-will-be-told-where-it-should-write-it"><span class="secno">2.5</span> <span class="content">Apps can request the ability to write a specific type of data and will be told where it should write it</span></a> | |
| <li><a href="#it-should-be-possible-for-an-agent-to-block-allow-certain-apps-from-accessing-a-specific-resource-as-that-agent"><span class="secno">2.6</span> <span class="content">It should be possible for an agent to block/allow certain apps from accessing a specific resource as that agent</span></a> | |
| <li><a href="#it-should-be-possible-for-an-agent-with-control-access-to-block-allow-certain-apps-from-accessing-a-specific-resource-as-any-agent"><span class="secno">2.7</span> <span class="content">It should be possible for an agent with Control access to block/allow certain apps from accessing a specific resource as any agent</span></a> | |
| <li><a href="#it-should-be-easy-to-allow-others-accessing-your-resources-to-use-apps-youre-okay-without-requiring-your-explicit-consent"><span class="secno">2.8</span> <span class="content">It should be easy to allow others accessing your resources to use apps you’re okay without requiring your explicit consent.</span></a> | |
| <li><a href="#access-to-specific-types-of-data-should-extend-to-new-resources-that-contain-that-data"><span class="secno">2.9</span> <span class="content">Access to specific types of data should extend to new resources that contain that data</span></a> | |
| <li><a href="#access-to-specific-types-of-data-should-not-expose-other-data-that-was-not-requested"><span class="secno">2.10</span> <span class="content">Access to specific types of data should not expose other data that was not requested</span></a> | |
| <li><a href="#data-should-have-different-levels-of-requirements-for-users-conciousness-in-consent"><span class="secno">2.11</span> <span class="content">Data should have different levels of requirements for user’s conciousness in consent</span></a> | |
| <li><a href="#the-authorization-data-is-easily-cachable"><span class="secno">2.12</span> <span class="content">The authorization data is easily cachable</span></a> | |
| <li><a href="#information-about-clients-apps-to-which-users-have-granted-access-and-what-specific-access-they-have-delegated-should-not-be-made-available-to-resource-servers-that-do-not-enforce-relevant-access-restrictions-on-those-clients"><span class="secno">2.13</span> <span class="content">Information about Clients (apps) to which users have granted access and what specific access they have delegated should not be made available to Resource Servers that do not enforce relevant access restrictions on those Clients.</span></a> | |
| </ol> | |
| <li> | |
| <a href="#use-cases"><span class="secno">3</span> <span class="content">Use Cases</span></a> | |
| <ol class="toc"> | |
| <li><a href="#simple-game"><span class="secno">3.1</span> <span class="content">Simple game</span></a> | |
| <li><a href="#chat-with-friends"><span class="secno">3.2</span> <span class="content">Chat with friends</span></a> | |
| <li><a href="#chat-with-doctor"><span class="secno">3.3</span> <span class="content">Chat with doctor</span></a> | |
| <li><a href="#discussion-boards"><span class="secno">3.4</span> <span class="content">Discussion boards</span></a> | |
| <li><a href="#rdf-editor"><span class="secno">3.5</span> <span class="content">RDF editor</span></a> | |
| <li><a href="#pod-administration"><span class="secno">3.6</span> <span class="content">Pod administration</span></a> | |
| <li><a href="#photos-viewer"><span class="secno">3.7</span> <span class="content">Photos viewer</span></a> | |
| <li><a href="#photos-organizer"><span class="secno">3.8</span> <span class="content">Photos organizer</span></a> | |
| <li><a href="#photos-processing"><span class="secno">3.9</span> <span class="content">Photos processing</span></a> | |
| <li><a href="#evil-fitness-tracker"><span class="secno">3.10</span> <span class="content">Evil fitness tracker</span></a> | |
| <li><a href="#finances-tracker"><span class="secno">3.11</span> <span class="content">Finances tracker</span></a> | |
| <li><a href="#restaurants-tracker"><span class="secno">3.12</span> <span class="content">Restaurants tracker</span></a> | |
| <li><a href="#blogs"><span class="secno">3.13</span> <span class="content">Blogs</span></a> | |
| <li><a href="#custom-tls-ca"><span class="secno">3.14</span> <span class="content">Custom TLS CA</span></a> | |
| </ol> | |
| <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> | |
| <li> | |
| <a href="#references"><span class="secno"></span> <span class="content">References</span></a> | |
| <ol class="toc"> | |
| <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> | |
| </ol> | |
| <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> | |
| </ol> | |
| </nav> | |
| <main> | |
| <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> | |
| <p class="issue" id="issue-c29b11aa"><a class="self-link" href="#issue-c29b11aa"></a> Needs explaination how proposals should clearly reference requirements which they satisfy. As well as requirements they do not satisfy due to some limitations.</p> | |
| <h2 class="heading settled" data-level="2" id="requirements"><span class="secno">2. </span><span class="content">Requirements</span><a class="self-link" href="#requirements"></a></h2> | |
| <h3 class="heading settled" data-level="2.1" id="the-system-is-not-abusable"><span class="secno">2.1. </span><span class="content">The system is not abusable</span><a class="self-link" href="#the-system-is-not-abusable"></a></h3> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Use cases</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#evil-fitness-tracker">§ 3.10 Evil fitness tracker</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="2.2" id="an-app-can-request-access-to-a-specific-resource"><span class="secno">2.2. </span><span class="content">An app can request access to a specific resource</span><a class="self-link" href="#an-app-can-request-access-to-a-specific-resource"></a></h3> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Use cases</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#simple-game">§ 3.1 Simple game</a></p> | |
| <li data-md> | |
| <p><a href="#rdf-editor">§ 3.5 RDF editor</a></p> | |
| <li data-md> | |
| <p><a href="#pod-administration">§ 3.6 Pod administration</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="2.3" id="an-app-can-request-access-to-a-specific-type-of-data-without-knowing-the-structure-of-resources-on-a-pod"><span class="secno">2.3. </span><span class="content">An app can request access to a specific type of data without knowing the structure of resources on a Pod</span><a class="self-link" href="#an-app-can-request-access-to-a-specific-type-of-data-without-knowing-the-structure-of-resources-on-a-pod"></a></h3> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Use cases</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#chat-with-friends">§ 3.2 Chat with friends</a></p> | |
| <li data-md> | |
| <p><a href="#discussion-boards">§ 3.4 Discussion boards</a></p> | |
| <li data-md> | |
| <p><a href="#photos-viewer">§ 3.7 Photos viewer</a></p> | |
| <li data-md> | |
| <p><a href="#photos-processing">§ 3.9 Photos processing</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="2.4" id="access-requests-can-be-sent-when-the-resource-owner-is-not-present-to-be-approved-once-the-user-is-present"><span class="secno">2.4. </span><span class="content">Access requests can be sent when the resource owner is not present to be approved once the user is present</span><a class="self-link" href="#access-requests-can-be-sent-when-the-resource-owner-is-not-present-to-be-approved-once-the-user-is-present"></a></h3> | |
| <h3 class="heading settled" data-level="2.5" id="apps-can-request-the-ability-to-write-a-specific-type-of-data-and-will-be-told-where-it-should-write-it"><span class="secno">2.5. </span><span class="content">Apps can request the ability to write a specific type of data and will be told where it should write it</span><a class="self-link" href="#apps-can-request-the-ability-to-write-a-specific-type-of-data-and-will-be-told-where-it-should-write-it"></a></h3> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Use cases</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#photos-processing">§ 3.9 Photos processing</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="2.6" id="it-should-be-possible-for-an-agent-to-block-allow-certain-apps-from-accessing-a-specific-resource-as-that-agent"><span class="secno">2.6. </span><span class="content">It should be possible for an agent to block/allow certain apps from accessing a specific resource as that agent</span><a class="self-link" href="#it-should-be-possible-for-an-agent-to-block-allow-certain-apps-from-accessing-a-specific-resource-as-that-agent"></a></h3> | |
| <h3 class="heading settled" data-level="2.7" id="it-should-be-possible-for-an-agent-with-control-access-to-block-allow-certain-apps-from-accessing-a-specific-resource-as-any-agent"><span class="secno">2.7. </span><span class="content">It should be possible for an agent with Control access to block/allow certain apps from accessing a specific resource as any agent</span><a class="self-link" href="#it-should-be-possible-for-an-agent-with-control-access-to-block-allow-certain-apps-from-accessing-a-specific-resource-as-any-agent"></a></h3> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Use cases</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#chat-with-doctor">§ 3.3 Chat with doctor</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="2.8" id="it-should-be-easy-to-allow-others-accessing-your-resources-to-use-apps-youre-okay-without-requiring-your-explicit-consent"><span class="secno">2.8. </span><span class="content">It should be easy to allow others accessing your resources to use apps you’re okay without requiring your explicit consent.</span><a class="self-link" href="#it-should-be-easy-to-allow-others-accessing-your-resources-to-use-apps-youre-okay-without-requiring-your-explicit-consent"></a></h3> | |
| <h3 class="heading settled" data-level="2.9" id="access-to-specific-types-of-data-should-extend-to-new-resources-that-contain-that-data"><span class="secno">2.9. </span><span class="content">Access to specific types of data should extend to new resources that contain that data</span><a class="self-link" href="#access-to-specific-types-of-data-should-extend-to-new-resources-that-contain-that-data"></a></h3> | |
| <h3 class="heading settled" data-level="2.10" id="access-to-specific-types-of-data-should-not-expose-other-data-that-was-not-requested"><span class="secno">2.10. </span><span class="content">Access to specific types of data should not expose other data that was not requested</span><a class="self-link" href="#access-to-specific-types-of-data-should-not-expose-other-data-that-was-not-requested"></a></h3> | |
| <h3 class="heading settled" data-level="2.11" id="data-should-have-different-levels-of-requirements-for-users-conciousness-in-consent"><span class="secno">2.11. </span><span class="content">Data should have different levels of requirements for user’s conciousness in consent</span><a class="self-link" href="#data-should-have-different-levels-of-requirements-for-users-conciousness-in-consent"></a></h3> | |
| <h3 class="heading settled" data-level="2.12" id="the-authorization-data-is-easily-cachable"><span class="secno">2.12. </span><span class="content">The authorization data is easily cachable</span><a class="self-link" href="#the-authorization-data-is-easily-cachable"></a></h3> | |
| <h3 class="heading settled" data-level="2.13" id="information-about-clients-apps-to-which-users-have-granted-access-and-what-specific-access-they-have-delegated-should-not-be-made-available-to-resource-servers-that-do-not-enforce-relevant-access-restrictions-on-those-clients"><span class="secno">2.13. </span><span class="content">Information about Clients (apps) to which users have granted access and what specific access they have delegated should not be made available to Resource Servers that do not enforce relevant access restrictions on those Clients.</span><a class="self-link" href="#information-about-clients-apps-to-which-users-have-granted-access-and-what-specific-access-they-have-delegated-should-not-be-made-available-to-resource-servers-that-do-not-enforce-relevant-access-restrictions-on-those-clients"></a></h3> | |
| <h2 class="heading settled" data-level="3" id="use-cases"><span class="secno">3. </span><span class="content">Use Cases</span><a class="self-link" href="#use-cases"></a></h2> | |
| <p class="issue" id="issue-5636bec6"><a class="self-link" href="#issue-5636bec6"></a> Each use case needs an author who can provide further clarifications as needed.</p> | |
| <h3 class="heading settled" data-level="3.1" id="simple-game"><span class="secno">3.1. </span><span class="content">Simple game</span><a class="self-link" href="#simple-game"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://simplegame.example to play a singleplayer game</p> | |
| <ul> | |
| <li data-md> | |
| <p>Simplegame only needs some file somewhere that it can write its own configuration to. It does not care where it is</p> | |
| <li data-md> | |
| <p>Simpleapp will also need to access this file again even if it’s being used on another machine</p> | |
| </ul> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#an-app-can-request-access-to-a-specific-resource">§ 2.2 An app can request access to a specific resource</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.2" id="chat-with-friends"><span class="secno">3.2. </span><span class="content">Chat with friends</span><a class="self-link" href="#chat-with-friends"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://chat.o.team to chat with her friends</p> | |
| <ul> | |
| <li data-md> | |
| <p>OChat wants to gain access to all chat related data</p> | |
| <li data-md> | |
| <p>Wants access to chat related data that was created after it asked for permission to read them</p> | |
| <li data-md> | |
| <p>Wants to be alerted when new chat related data has been added to the Pod</p> | |
| <li data-md> | |
| <p>Wants to create chat related data</p> | |
| </ul> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#an-app-can-request-access-to-a-specific-type-of-data-without-knowing-the-structure-of-resources-on-a-pod">§ 2.3 An app can request access to a specific type of data without knowing the structure of resources on a Pod</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.3" id="chat-with-doctor"><span class="secno">3.3. </span><span class="content">Chat with doctor</span><a class="self-link" href="#chat-with-doctor"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://doctorChat.example to chat with her doctor</p> | |
| <ul> | |
| <li data-md> | |
| <p>DoctorChat wants to create chat related data specifically about medical information</p> | |
| <li data-md> | |
| <p>DoctorChat wants to ensure Alice has given explicit consent to view the chats that it created before other apps can view this data</p> | |
| </ul> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#it-should-be-possible-for-an-agent-with-control-access-to-block-allow-certain-apps-from-accessing-a-specific-resource-as-any-agent">§ 2.7 It should be possible for an agent with Control access to block/allow certain apps from accessing a specific resource as any agent</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.4" id="discussion-boards"><span class="secno">3.4. </span><span class="content">Discussion boards</span><a class="self-link" href="#discussion-boards"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses iSay deployed on https://isay.alice.example/ to participate in discussion boards</p> | |
| <li data-md> | |
| <p>She wants to trust iSay to access any discussion boards, including</p> | |
| <ul> | |
| <li data-md> | |
| <p>Discussions on https://alice.example/</p> | |
| <li data-md> | |
| <p>Discussions on https://acme.example/</p> | |
| <li data-md> | |
| <p>Discussion on https://yoyodyne.example/</p> | |
| </ul> | |
| <li data-md> | |
| <p>She wants to receive push notifications on devices she uses when someone replies to discussion she participates in - iSay inculdes a remote client component which provides that feature.</p> | |
| <li data-md> | |
| <p>Alice, ACME and Yoyodyne want to allow each person with access to discussion boards on their resource servers to decide which applications they trust to participate in those discussions.</p> | |
| <li data-md> | |
| <p>Alice only wants to allow iSay to access discussions to avoid other apps (eg. games) she tries to have any way of posting spam messges in any of those discussions</p> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#the-system-is-not-abusable">§ 2.1 The system is not abusable</a></p> | |
| <li data-md> | |
| <p><a href="#an-app-can-request-access-to-a-specific-type-of-data-without-knowing-the-structure-of-resources-on-a-pod">§ 2.3 An app can request access to a specific type of data without knowing the structure of resources on a Pod</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.5" id="rdf-editor"><span class="secno">3.5. </span><span class="content">RDF editor</span><a class="self-link" href="#rdf-editor"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://edit.o.team to edit her raw RDF</p> | |
| <ul> | |
| <li data-md> | |
| <p>OEdit wants to be able to read and write to a file at a specific location</p> | |
| </ul> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#an-app-can-request-access-to-a-specific-resource">§ 2.2 An app can request access to a specific resource</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.6" id="pod-administration"><span class="secno">3.6. </span><span class="content">Pod administration</span><a class="self-link" href="#pod-administration"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://admin.example to control her pod</p> | |
| <ul> | |
| <li data-md> | |
| <p>Admin wants to be able to read and write to all files on a user’s Pod</p> | |
| </ul> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#an-app-can-request-access-to-a-specific-resource">§ 2.2 An app can request access to a specific resource</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.7" id="photos-viewer"><span class="secno">3.7. </span><span class="content">Photos viewer</span><a class="self-link" href="#photos-viewer"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://decentPhotos.example to view her photos and her friend Bob’s photos</p> | |
| <ul> | |
| <li data-md> | |
| <p>Decent photos wants to read to all photos on Alice’s Pod</p> | |
| <li data-md> | |
| <p>Wants to read all photos on Bob’s Pod that Alice has access to</p> | |
| </ul> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#an-app-can-request-access-to-a-specific-type-of-data-without-knowing-the-structure-of-resources-on-a-pod">§ 2.3 An app can request access to a specific type of data without knowing the structure of resources on a Pod</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.8" id="photos-organizer"><span class="secno">3.8. </span><span class="content">Photos organizer</span><a class="self-link" href="#photos-organizer"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://photoOrganizer.example to organize the photos on her Pod</p> | |
| <ul> | |
| <li data-md> | |
| <p>PhotoOrganizer wants to read and write only photos</p> | |
| <li data-md> | |
| <p>Wants to understand the folder structure of the Pod</p> | |
| <li data-md> | |
| <p>Wants to modify the folder structure of the Pod</p> | |
| </ul> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#an-app-can-request-access-to-a-specific-type-of-data-without-knowing-the-structure-of-resources-on-a-pod">§ 2.3 An app can request access to a specific type of data without knowing the structure of resources on a Pod</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.9" id="photos-processing"><span class="secno">3.9. </span><span class="content">Photos processing</span><a class="self-link" href="#photos-processing"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses FaceDetectionCronJob to crawl over her photos and Bob’s photos at night and produce facial recognition data</p> | |
| <ul> | |
| <li data-md> | |
| <p>FaceDetectionCronJob is not an application and will need access to photos even when Alice is not actively using it</p> | |
| <li data-md> | |
| <p>Wants to have read access to Alice’s photos</p> | |
| <li data-md> | |
| <p>Wants to know where it should put its facial detection data</p> | |
| <li data-md> | |
| <p>Wants to have read access to Bob’s photos that Alice has access to</p> | |
| </ul> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#an-app-can-request-access-to-a-specific-type-of-data-without-knowing-the-structure-of-resources-on-a-pod">§ 2.3 An app can request access to a specific type of data without knowing the structure of resources on a Pod</a></p> | |
| <li data-md> | |
| <p><a href="#apps-can-request-the-ability-to-write-a-specific-type-of-data-and-will-be-told-where-it-should-write-it">§ 2.5 Apps can request the ability to write a specific type of data and will be told where it should write it</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.10" id="evil-fitness-tracker"><span class="secno">3.10. </span><span class="content">Evil fitness tracker</span><a class="self-link" href="#evil-fitness-tracker"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice accidentally uses https://evilfitbit.example to track her fitness data</p> | |
| <ul> | |
| <li data-md> | |
| <p>Evilfitbit will try to do everything to get Alice’s financial data while pretending to just track her fitness data (This should not be allowed)</p> | |
| </ul> | |
| </ul> | |
| <div class="assertion no-marker"> | |
| <div class="marker">Requirements</div> | |
| <ul> | |
| <li data-md> | |
| <p><a href="#the-system-is-not-abusable">§ 2.1 The system is not abusable</a></p> | |
| </ul> | |
| </div> | |
| <h3 class="heading settled" data-level="3.11" id="finances-tracker"><span class="secno">3.11. </span><span class="content">Finances tracker</span><a class="self-link" href="#finances-tracker"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://financeTracker.example to view her current finances</p> | |
| <ul> | |
| <li data-md> | |
| <p>financeTracker wants to be able to read Alice’s Financial data</p> | |
| <li data-md> | |
| <p>financeTracker wants to be able to keep a backup of Alice’s data</p> | |
| <li data-md> | |
| <p>Alice wants to ensure that financeTracker isn’t legally allowed to save the data it receives</p> | |
| </ul> | |
| </ul> | |
| <h3 class="heading settled" data-level="3.12" id="restaurants-tracker"><span class="secno">3.12. </span><span class="content">Restaurants tracker</span><a class="self-link" href="#restaurants-tracker"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://favoriteRestaurants.example to track the restaurants she likes</p> | |
| <ul> | |
| <li data-md> | |
| <p>Favorite Restaurants wants to read and write data about restaurants and to get the Alice’s location</p> | |
| <li data-md> | |
| <p>Alice only wants to allow Favorite Restaurants to read and write restaurant data but not to get her location</p> | |
| </ul> | |
| </ul> | |
| <h3 class="heading settled" data-level="3.13" id="blogs"><span class="secno">3.13. </span><span class="content">Blogs</span><a class="self-link" href="#blogs"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://blogs.example to read and write blogs</p> | |
| <ul> | |
| <li data-md> | |
| <p>Blogs wants to be able to read public blog information and to write blog data to Alice’s Pod</p> | |
| <li data-md> | |
| <p>Blogs wants to read data about Alice’s interests</p> | |
| <li data-md> | |
| <p>Alice does not want Blogs to get data about her interests</p> | |
| <li data-md> | |
| <p>Blogs continually asks Alice to grant it access to her interests and Alice is annoyed with the incessant asking</p> | |
| </ul> | |
| <li data-md> | |
| <p>Alice uses, is developing, or is testing an app deployed to http://localhost:8080</p> | |
| <ul> | |
| <li data-md> | |
| <p>Note that Alice’s Identity Provider can’t reach Alice’s `localhost:8080`</p> | |
| <li data-md> | |
| <p>Note that Alice’s Pod can’t reach Alice’s `localhost:8080`</p> | |
| </ul> | |
| <li data-md> | |
| <p>Alice uses an app deployed behind a NAT or firewall (while her browser is also behind the same NAT or firewall) that accesses resources outside the NAT or firewall; for example, Alice uses https://coolcode.int.enterprise.example to edit code stored in Customer Bob’s Pod</p> | |
| <ul> | |
| <li data-md> | |
| <p>*CoolCode* is deployed behind Enterprise.Example’s company firewall and is not dereferenceable from the outside, for example because</p> | |
| <li data-md> | |
| <p>*CoolCode* is proprietary to Enterprise.Example; or</p> | |
| <li data-md> | |
| <p>*CoolCode* is a commercial product that is deployed on-premises at Enterprise.Example’s datacenter</p> | |
| <li data-md> | |
| <p>Note that Alice’s Identity Provider can’t reach https://coolcode.int.enterprise.example</p> | |
| <li data-md> | |
| <p>Note that Customer Bob’s Pod can’t reach https://coolcode.int.enterprise.example</p> | |
| </ul> | |
| </ul> | |
| <h3 class="heading settled" data-level="3.14" id="custom-tls-ca"><span class="secno">3.14. </span><span class="content">Custom TLS CA</span><a class="self-link" href="#custom-tls-ca"></a></h3> | |
| <ul> | |
| <li data-md> | |
| <p>Alice uses https://photoOrganizer.example to organize photos on her company’s private storage server https://storage.private.enterprise.example</p> | |
| <ul> | |
| <li data-md> | |
| <p>`storage.private.enterprise.example`'s TLS certificate is signed by Enterprise.Example’s private Certificate Authority</p> | |
| <li data-md> | |
| <p>Alice’s web browser is configured to trust Enterprise.Example’s private Certificate Authority</p> | |
| <li data-md> | |
| <p>`storage.private.enterprise.example` is reachable from the public Internet, so Alice’s Identity Provider and *photoOrganizer* could reach it; however, neither is configured to trust Enterprise.Example’s private Certificate Authority</p> | |
| </ul> | |
| </ul> | |
| </main> | |
| <div data-fill-with="conformance"> | |
| <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2> | |
| <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. | |
| The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” | |
| in the normative parts of this document | |
| are to be interpreted as described in RFC 2119. | |
| However, for readability, | |
| these words do not appear in all uppercase letters in this specification. </p> | |
| <p> All of the text of this specification is normative | |
| except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p> | |
| <p> Examples in this specification are introduced with the words “for example” | |
| or are set apart from the normative text with <code>class="example"</code>, like this: </p> | |
| <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div> | |
| <p> Informative notes begin with the word “Note” | |
| and are set apart from the normative text with <code>class="note"</code>, like this: </p> | |
| <p class="note" role="note"> Note, this is an informative note. </p> | |
| </div> | |
| <script> | |
| (function() { | |
| "use strict"; | |
| var collapseSidebarText = '<span aria-hidden="true">←</span> ' | |
| + '<span>Collapse Sidebar</span>'; | |
| var expandSidebarText = '<span aria-hidden="true">→</span> ' | |
| + '<span>Pop Out Sidebar</span>'; | |
| var tocJumpText = '<span aria-hidden="true">↑</span> ' | |
| + '<span>Jump to Table of Contents</span>'; | |
| var sidebarMedia = window.matchMedia('screen and (min-width: 78em)'); | |
| var autoToggle = function(e){ toggleSidebar(e.matches) }; | |
| if(sidebarMedia.addListener) { | |
| sidebarMedia.addListener(autoToggle); | |
| } | |
| function toggleSidebar(on) { | |
| if (on == undefined) { | |
| on = !document.body.classList.contains('toc-sidebar'); | |
| } | |
| /* Don’t scroll to compensate for the ToC if we’re above it already. */ | |
| var headY = 0; | |
| var head = document.querySelector('.head'); | |
| if (head) { | |
| // terrible approx of "top of ToC" | |
| headY += head.offsetTop + head.offsetHeight; | |
| } | |
| var skipScroll = window.scrollY < headY; | |
| var toggle = document.getElementById('toc-toggle'); | |
| var tocNav = document.getElementById('toc'); | |
| if (on) { | |
| var tocHeight = tocNav.offsetHeight; | |
| document.body.classList.add('toc-sidebar'); | |
| document.body.classList.remove('toc-inline'); | |
| toggle.innerHTML = collapseSidebarText; | |
| if (!skipScroll) { | |
| window.scrollBy(0, 0 - tocHeight); | |
| } | |
| tocNav.focus(); | |
| sidebarMedia.addListener(autoToggle); // auto-collapse when out of room | |
| } | |
| else { | |
| document.body.classList.add('toc-inline'); | |
| document.body.classList.remove('toc-sidebar'); | |
| toggle.innerHTML = expandSidebarText; | |
| if (!skipScroll) { | |
| window.scrollBy(0, tocNav.offsetHeight); | |
| } | |
| if (toggle.matches(':hover')) { | |
| /* Unfocus button when not using keyboard navigation, | |
| because I don’t know where else to send the focus. */ | |
| toggle.blur(); | |
| } | |
| } | |
| } | |
| function createSidebarToggle() { | |
| /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */ | |
| var toggle = document.createElement('a'); | |
| /* This should probably be a button, but appearance isn’t standards-track.*/ | |
| toggle.id = 'toc-toggle'; | |
| toggle.class = 'toc-toggle'; | |
| toggle.href = '#toc'; | |
| toggle.innerHTML = collapseSidebarText; | |
| sidebarMedia.addListener(autoToggle); | |
| var toggler = function(e) { | |
| e.preventDefault(); | |
| sidebarMedia.removeListener(autoToggle); // persist explicit off states | |
| toggleSidebar(); | |
| return false; | |
| } | |
| toggle.addEventListener('click', toggler, false); | |
| /* Get <nav id=toc-nav>, or make it if we don’t have one. */ | |
| var tocNav = document.getElementById('toc-nav'); | |
| if (!tocNav) { | |
| tocNav = document.createElement('p'); | |
| tocNav.id = 'toc-nav'; | |
| /* Prepend for better keyboard navigation */ | |
| document.body.insertBefore(tocNav, document.body.firstChild); | |
| } | |
| /* While we’re at it, make sure we have a Jump to Toc link. */ | |
| var tocJump = document.getElementById('toc-jump'); | |
| if (!tocJump) { | |
| tocJump = document.createElement('a'); | |
| tocJump.id = 'toc-jump'; | |
| tocJump.href = '#toc'; | |
| tocJump.innerHTML = tocJumpText; | |
| tocNav.appendChild(tocJump); | |
| } | |
| tocNav.appendChild(toggle); | |
| } | |
| var toc = document.getElementById('toc'); | |
| if (toc) { | |
| createSidebarToggle(); | |
| toggleSidebar(sidebarMedia.matches); | |
| /* If the sidebar has been manually opened and is currently overlaying the text | |
| (window too small for the MQ to add the margin to body), | |
| then auto-close the sidebar once you click on something in there. */ | |
| toc.addEventListener('click', function(e) { | |
| if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) { | |
| toggleSidebar(false); | |
| } | |
| }, false); | |
| } | |
| else { | |
| console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC."); | |
| } | |
| /* Wrap tables in case they overflow */ | |
| var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index'); | |
| var numTables = tables.length; | |
| for (var i = 0; i < numTables; i++) { | |
| var table = tables[i]; | |
| var wrapper = document.createElement('div'); | |
| wrapper.className = 'overlarge'; | |
| table.parentNode.insertBefore(wrapper, table); | |
| wrapper.appendChild(table); | |
| } | |
| })(); | |
| </script> | |
| <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> | |
| <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> | |
| <dl> | |
| <dt id="biblio-rfc2119">[RFC2119] | |
| <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> | |
| </dl> | |
| <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2> | |
| <div style="counter-reset:issue"> | |
| <div class="issue"> Needs explaination how proposals should clearly reference requirements which they satisfy. As well as requirements they do not satisfy due to some limitations.<a href="#issue-c29b11aa"> ↵ </a></div> | |
| <div class="issue"> Each use case needs an author who can provide further clarifications as needed.<a href="#issue-5636bec6"> ↵ </a></div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment