This website creates multiple stacks of nested elements with random sizes and colors.
7 |
8 |
51 |
52 |
--------------------------------------------------------------------------------
/3DView/README.md:
--------------------------------------------------------------------------------
1 | # Microsoft Edge DevTools 3D View
2 |
3 | This is sample code of a very early prototype for the 3D View feature of Microsoft Edge Developer Tools.
4 | This code helped as a proof of concept.
5 |
6 | You can learn more about the real feature with this [explainer](https://docs.google.com/document/d/16xsQbr1YjjuoxHJlCsAaIzK-s4Ogd6fEuhrSajdVivA/edit), or reading the [blog](https://blogs.windows.com/msedgedev/2020/01/23/debug-z-index-3d-view-edge-devtools/).
7 |
8 |
9 | # Setup
10 | ### Get the code
11 | 1) Clone this repo
12 | 2) Get the latest version of Babylon.js from https://cdn.babylonjs.com/babylon.js. Copy that file and paste into `/browser_extension/src/babylon.js`
13 |
14 | ### Install the extension
15 | 1) Open Edge browser
16 | 2) Navigate to `edge://extensions`
17 | 3) Enable developer mode
18 | 4) Click on 'Load unpacked'
19 | 5) Select the folder `browser_extension`
20 |
21 | This will load the extension in your browser, you should see an icon appear in the right side of the toolbar. Clicking on it won't display any UI since this is a devtools extension.
22 |
23 | ### To use it
24 | 1) Navigate to any website you want to inspect.
25 | 2) Launch the DevTools by pressing `F12` or by right clicking the page and selecting "Inspect".
26 | 3) DevTools will launch with a new tab called "3D View (Prototype)"
27 | 4) Select the tab and reload the website.
28 |
29 |
30 |
--------------------------------------------------------------------------------
/3DView/browser_extension/devtools.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/3DView/browser_extension/devtools.js:
--------------------------------------------------------------------------------
1 | var panels = chrome.devtools.panels;
2 |
3 | // DOM panel
4 | panels.create(
5 | "3D View - Prototype",
6 | "icon.png",
7 | "index.html"
8 | );
9 |
--------------------------------------------------------------------------------
/3DView/browser_extension/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MicrosoftEdge/DevToolsSamples/3c306c54162d607b659957d54eacb8cfd8e49738/3DView/browser_extension/icon.png
--------------------------------------------------------------------------------
/3DView/browser_extension/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 3D View
49 |
50 | This is an example of a very early prototype for the Edge DevTools 3D View.
51 |
52 | Please refresh the page!
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/3DView/browser_extension/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "3D View (Prototype)",
3 | "description" : "Sample code of a prototype from Edge DevToold 3D View. ",
4 | "version": "0.1",
5 | "manifest_version": 2,
6 | "devtools_page": "devtools.html",
7 | "icons": {
8 | "16": "icon.png"
9 | },
10 | "content_scripts": [
11 | {
12 | "matches": [
13 | ""
14 | ],
15 | "js": ["src/content.js"]
16 | }
17 | ],
18 | "permissions": ["activeTab", ""]
19 | }
20 |
--------------------------------------------------------------------------------
/3DView/browser_extension/src/babylon.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MicrosoftEdge/DevToolsSamples/3c306c54162d607b659957d54eacb8cfd8e49738/3DView/browser_extension/src/babylon.js
--------------------------------------------------------------------------------
/3DView/browser_extension/src/content.js:
--------------------------------------------------------------------------------
1 |
2 | const body = document.getElementsByTagName('body')[0];
3 |
4 | function findStylesOfElement(element) {
5 |
6 | if (element.nodeType === 1) {
7 | let styles = window.getComputedStyle(element, null);
8 | let rect = element.getBoundingClientRect();
9 |
10 | let ews = { width: 0, height: 0, x: 0, y: 0, children: [] };
11 | ews.width = styles['width'];
12 | ews.height = styles['height'];
13 | ews.x = rect['left'];
14 | ews.y = rect['top'];
15 |
16 | if (element.childNodes && element.childNodes.length > 0) {
17 | element.childNodes.forEach(childNode => {
18 | let childWithStyles = findStylesOfElement(childNode);
19 | if (childWithStyles) {
20 | ews.children.push(childWithStyles);
21 | }
22 | });
23 | }
24 | return ews;
25 | }
26 | return null;
27 | }
28 |
29 | bodyWithStyles = findStylesOfElement(body);
30 | chrome.runtime.sendMessage({ type: 'dom-styles', content: bodyWithStyles });
31 |
--------------------------------------------------------------------------------
/3DView/browser_extension/src/scene.js:
--------------------------------------------------------------------------------
1 | let canvas = document.getElementById('renderCanvas');
2 | let engine = new BABYLON.Engine(canvas, true);
3 | let scene = null;
4 |
5 | engine.runRenderLoop(function () {
6 | if (scene) {
7 | scene.render();
8 | }
9 | });
10 |
11 | // Resize
12 | window.addEventListener('resize', function () {
13 | engine.resize();
14 | });
15 |
16 | chrome.runtime.onMessage.addListener( (request, sender, sendResponse) => {
17 | if (request.type == 'dom-styles') {
18 | scene = createScene(request.content);
19 | document.getElementById('message').remove();
20 | }
21 | }
22 | );
23 |
24 |
25 | let createScene = function (content) {
26 |
27 | let scene = new BABYLON.Scene(engine);
28 |
29 | let camera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, Math.PI / 3, 1000, BABYLON.Vector3(0, 0, 0));
30 | camera.attachControl(canvas, true, false);
31 | camera.lowerBetaLimit = 0.1;
32 | camera.upperBetaLimit = (Math.PI / 2) * 0.99;
33 | camera.lowerRadiusLimit = 100;
34 | camera.upperRadiusLimit = 5000;
35 | camera.panningSensibility = 10;
36 | camera.wheelPrecision = 1.1;
37 |
38 | let boxH = 15;
39 | let bodyWidth = 0;
40 | let bodyHeight = 0;
41 |
42 | let addActions = function(mesh) {
43 | mesh.actionManager = new BABYLON.ActionManager(scene);
44 | mesh.actionManager.registerAction(
45 | new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh.material, 'emissiveColor', mesh.material.emissiveColor));
46 | mesh.actionManager.registerAction(
47 | new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh.material, 'emissiveColor', BABYLON.Color3.Purple()));
48 | }
49 |
50 | let createBoxForDepth = function(element, depthLevel = 0) {
51 |
52 | let width = parseInt(element.width.replace('px', '')) || 1;
53 | let height = parseInt(element.height.replace('px', '')) || 1;
54 |
55 | if (bodyWidth === 0 && bodyHeight === 0) {
56 | bodyWidth = width;
57 | bodyHeight = height;
58 | }
59 |
60 | let x = bodyWidth / 2 + (-(width / 2) - element.x);
61 | let y = -bodyHeight / 2 + ((height / 2) + element.y);
62 | let rgb = [255, 200 - 10 * depthLevel, 100 - 20 * depthLevel];
63 |
64 | let boxMaterial = new BABYLON.StandardMaterial('ground', scene, true);
65 | boxMaterial.emissiveColor = BABYLON.Color3.FromInts(rgb[0], rgb[1], rgb[2]);
66 | boxMaterial.alpha = 0.4;
67 |
68 | let id = element.name;
69 | let box = BABYLON.MeshBuilder.CreateBox(id, { height: boxH, width: width, depth: height }, scene, true);
70 | box.material = boxMaterial;
71 | box.position.x = x;
72 | box.position.z = y;
73 | box.position.y = (boxH + 3) * depthLevel;
74 |
75 | addActions(box);
76 |
77 | if (element.children && element.children.length > 0) {
78 | let nd = depthLevel + 1;
79 | element.children.forEach(function (ch) {
80 | createBoxForDepth(ch, nd);
81 | });
82 | }
83 | }
84 |
85 | // Boxes
86 | createBoxForDepth(content, 0);
87 |
88 | return scene;
89 | }
90 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Microsoft Open Source Code of Conduct
2 |
3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
4 |
5 | Resources:
6 |
7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
10 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Microsoft Corporation.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ⚠️ **THIS REPOSITORY IS NOT MAINTAINED ANYMORE AND ALL DEMOS HAVE MOVED TO [THE DEMOS REPOSITORY](https://github.com/MicrosoftEdge/Demos)** ⚠️
2 |
3 | # Microsoft Edge DevTools Samples
4 |
5 | A collection of samples for Edge Developer Tools.
6 |
7 | ## Contributing
8 |
9 | This project welcomes contributions and suggestions. Most contributions require you to agree to a
10 | Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
11 | the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
12 |
13 | When you submit a pull request, a CLA bot will automatically determine whether you need to provide
14 | a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
15 | provided by the bot. You will only need to do this once across all repos using our CLA.
16 |
17 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
18 | For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
19 | contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
20 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ## Security
4 |
5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
6 |
7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets Microsoft's [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)) of a security vulnerability, please report it to us as described below.
8 |
9 | ## Reporting Security Issues
10 |
11 | **Please do not report security vulnerabilities through public GitHub issues.**
12 |
13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
14 |
15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
16 |
17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
18 |
19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
20 |
21 | * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
22 | * Full paths of source file(s) related to the manifestation of the issue
23 | * The location of the affected source code (tag/branch/commit or direct URL)
24 | * Any special configuration required to reproduce the issue
25 | * Step-by-step instructions to reproduce the issue
26 | * Proof-of-concept or exploit code (if possible)
27 | * Impact of the issue, including how an attacker might exploit the issue
28 |
29 | This information will help us triage your report more quickly.
30 |
31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs.
32 |
33 | ## Preferred Languages
34 |
35 | We prefer all communications to be in English.
36 |
37 | ## Policy
38 |
39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).
40 |
41 |
42 |
--------------------------------------------------------------------------------
/docs/a11y-testing/buttons.js:
--------------------------------------------------------------------------------
1 | const donations = document.querySelector('#donate');
2 | const sitenav = document.querySelector('#sitenavigation');
3 | let currentbutton = null;
4 | let currentnav = document.querySelector('#sitenavigation li');
5 |
6 | sitenav.addEventListener('click', e => {
7 | e.preventDefault();
8 | let t = e.target;
9 | if (t.href) {
10 | if (currentnav) { currentnav.classList.remove('current'); }
11 | t.parentNode.classList.add('current');
12 | currentnav = t.parentNode;
13 | e.preventDefault();
14 | }
15 | });
16 |
17 |
18 | donations.addEventListener('click', e => {
19 | let t = e.target;
20 | if (t.classList.contains('donationbutton')) {
21 | if (currentbutton) { currentbutton.classList.remove('current'); }
22 | t.classList.add('current');
23 | currentbutton = t;
24 | e.preventDefault();
25 | }
26 | if (t.classList.contains('submitbutton')) {
27 | alert('Thanks for your donation!')
28 | }
29 | })
--------------------------------------------------------------------------------
/docs/a11y-testing/css/dark-theme.css:
--------------------------------------------------------------------------------
1 | :root{
2 | --body-background: #111;
3 | --body-foreground: #eee;
4 | --header-background: #000;
5 | --footer-background: #000;
6 | --footer-foreground: #666;
7 | --more-link: lime;
8 | --navitems-background: mediumblue;
9 | --navitems-links: #fff;
10 | --navhover-background: green;
11 | --navitems-link-current-background: skyblue;
12 | --navitems-link-current-foreground: #369;
13 | --funding-medium: yellow;
14 | --funding-high: green;
15 | --funding-low: red;
16 | --funding-color: #000;
17 | --donation-button: darkslategray;
18 | --donation-button-color: white;
19 | --donation-submit: green;
20 | --donation-button-chosen: green;
21 | --donation-button-focused: #1479a2 ;
22 | --donation-button-chosen-color: white;
23 | --sitenav-current: linear-gradient(to bottom,orange,red);
24 | --sitenav-background: linear-gradient(to top,orange,yellow);
25 | --sitenav-textshadow: 1px 0 2px #000;
26 | --sitenav-arrow: red;
27 | --sitenav-link: #fff;
28 | --sitenav-link-highlight: #fff;
29 | }
--------------------------------------------------------------------------------
/docs/a11y-testing/css/light-theme.css:
--------------------------------------------------------------------------------
1 | :root{
2 | --body-background: #f8f8f8;
3 | --body-foreground: #111;
4 | --header-background: #69c;
5 | --footer-background: #3a3a3a;
6 | --footer-foreground: #999;
7 | --more-link: rgb(123, 123, 123);
8 | --navitems-background: navy;
9 | --navitems-links: #fff;
10 | --navhover-background: dodgerblue;
11 | --navitems-link-current-background: skyblue;
12 | --navitems-link-current-foreground: #369;
13 | --funding-medium: yellow;
14 | --funding-high: green;
15 | --funding-low: red;
16 | --funding-color: #000;
17 | --funding-background: #eee;
18 | --donation-button: darkslategray;
19 | --donation-button-color: white;
20 | --donation-submit: green;
21 | --donation-button-focused: #1479a2 ;
22 | --donation-button-chosen: green;
23 | --donation-button-chosen-color: white;
24 | --sitenav-current: linear-gradient(to bottom,orange,red);
25 | --sitenav-background: linear-gradient(to top,orange,yellow);
26 | --sitenav-textshadow: 1px 0 2px #000;
27 | --sitenav-arrow: red;
28 | --sitenav-link: #fff;
29 | --sitenav-link-highlight: #fff;
30 | }
--------------------------------------------------------------------------------
/docs/a11y-testing/css/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3 | background: var(--body-background);
4 | color: var(--body-foreground);
5 | margin: 0 auto;
6 | padding: 0;
7 | max-width: 80em;
8 | }
9 | header {
10 | display: flex;
11 | background: var(--header-background);
12 | padding: .5em 1em;
13 | min-height: 2vh;
14 | position: -webkit-sticky;
15 | position: sticky;
16 | top: 0;
17 | z-index: 3;
18 | }
19 | #sidebar {
20 | flex: 1;
21 | order: 2;
22 | min-width: 10em;
23 | padding: 0 1em;
24 | margin-top: 2em;
25 | }
26 | main {
27 | flex: 6;
28 | order: 3;
29 | min-width: 20em;
30 | margin-top: 1em;
31 | }
32 | section {
33 | min-height: 88vh;
34 | display: flex;
35 | flex-wrap: wrap;
36 | }
37 | article {
38 | padding: 1em 2em 0 1em;
39 | display: flex;
40 | flex-wrap: wrap;
41 | gap: 10px;
42 | scroll-snap-margin-top: 5em;
43 | scroll-margin-top: 5em;
44 | }
45 | article img {
46 | flex: 0 0 100%;
47 | width: 100%;
48 | height: auto;
49 | }
50 | .articletext {
51 | flex: 4;
52 | display: flex;
53 | flex-wrap: wrap;
54 | flex-direction: column;
55 | }
56 | article:first-of-type {
57 | padding-top: 0;
58 | }
59 | footer {
60 | padding: 5px 10px;
61 | min-height: 10vh;
62 | display: block;
63 | margin-top: 1em;
64 | font-size: .8em;
65 | background: var(--footer-background);
66 | color: var(--footer-foreground);
67 | }
68 |
69 | /* =forms */
70 | header form {
71 | align-items: center;
72 | display: flex;
73 | flex: 1;
74 | flex-grow:inherit;
75 | gap: 1em;
76 | }
77 | header label {
78 | flex: 1;
79 | }
80 | header input[type=search] {
81 | flex: 2;
82 | font-family: inherit;
83 | font-size: 1em;
84 | border: none;
85 | }
86 | header input[type=submit] {
87 | flex: 1;
88 | font-family: inherit;
89 | border: none;
90 | font-size: 1em;
91 | background: var(--donation-submit);
92 | color: var(--donation-button-color);
93 | }
94 | #donate {
95 | font-size: .8em;
96 | margin-top: 2em;
97 | }
98 | #donate li {
99 | margin: 0;
100 | padding: 0 0 5px 0;
101 | }
102 | #donate ul {
103 | margin: 0;
104 | background: var(--funding-background);
105 | padding: 5px;
106 | }
107 | .donationbutton {
108 | background: var(--donation-button);
109 | color: var(--donation-button-color);
110 | display: inline-block;
111 | padding: 2px 5px;
112 | flex: 1;
113 | text-align: center;
114 | cursor: pointer;
115 | }
116 | .donationbutton.current {
117 | background: var(--donation-button-chosen);
118 | color: var(--donation-button-chosen-color);
119 | }
120 | .donationrow {
121 | display: flex;
122 | gap: 5px;
123 | padding-bottom: 5px;
124 | }
125 | .submitbutton {
126 | cursor: pointer;
127 | background: var(--donation-submit);
128 | color: var(--donation-button-color);
129 | display: inline-block;
130 | padding: 2px 5px;
131 | flex: 1;
132 | text-align: center;
133 | }
134 | .freedonation {
135 | flex: 3;
136 | }
137 | .smallinput {
138 | background: #ccc;
139 | border: none;
140 | flex: 1;
141 | width: 5em;
142 | font-family: inherit;
143 | }
144 |
145 | /* =navigation */
146 |
147 | #sitenavigation {
148 | order: 1;
149 | z-index: 3;
150 | flex: 0 0 100%;
151 | background: var(--sitenav-background);
152 | position: -webkit-sticky;
153 | position: sticky;
154 | top: 2.8em;
155 | }
156 | #sitenavigation ul {
157 | display: flex;
158 | margin: 0 0 0 1em;
159 | padding: 0;
160 | flex-direction: row;
161 | gap: 0;
162 | flex-wrap: wrap;
163 | align-items: stretch;
164 | }
165 | #sitenavigation li {
166 | margin: 0;
167 | padding: 0;
168 | }
169 | #sitenavigation a {
170 | align-self: center;
171 | display: block;
172 | padding: 5px 10px;
173 | text-decoration: none;
174 | color: var(--sitenav-link);
175 | text-shadow: var(--sitenav-textshadow);
176 | position: relative;
177 | }
178 | #sitenavigation .current a, #sitenavigation a:hover {
179 | background: var(--sitenav-current);
180 | color: var(--sitenav-link-highlight);
181 | }
182 | #sitenavigation .current a::after, #sitenavigation a:hover::after{
183 | content: '▼';
184 | position: absolute;
185 | left: calc(50% - .5em);
186 | bottom: -0.8em;
187 | color: var(--sitenav-arrow);
188 | text-shadow: none;
189 | }
190 | #sidebar nav ul {
191 | margin: 0;
192 | padding: 0;
193 | }
194 | #sidebar nav li {
195 | margin: 0 0 5px 0;
196 | padding: 0 0 .2em 0;
197 | background: var(--navitems-background);
198 | position: relative;
199 | }
200 | #sidebar nav li a {
201 | outline: none;
202 | color: var(--navitems-links);
203 | text-decoration: none;
204 | z-index: 2;
205 | padding:.2em .5em;
206 | display: block;
207 | position: relative;
208 | }
209 | #sidebar nav li a:hover {
210 | color: var(--navitems-link-current-foreground);
211 | background: var(--navitems-link-current-background);
212 | transition: 400ms;
213 | }
214 |
215 | #sidebar nav li::after{
216 | position: absolute;
217 | z-index: 1;
218 | content: '';
219 | top: 0;
220 | left: 0;
221 | bottom: 0;
222 | right: 100%;
223 | background: var(--navhover-background);
224 | transition: 600ms;
225 | }
226 | #sidebar nav li:hover::after {
227 | position: absolute;
228 | z-index: 1;
229 | content: '';
230 | top: 0;
231 | left: 0;
232 | bottom: 0;
233 | right: 0;
234 | background: var(--navhover-background);
235 | }
236 | :is(#sidebar ,#sitenavigation) li::marker {
237 | content: '';
238 | }
239 |
240 | /* =fundingstatus */
241 | .medium {
242 | color: var(--funding-medium);
243 | }
244 | .high {
245 | color: var(--funding-high);
246 | }
247 | .low {
248 | color: var(--funding-low);
249 | }
250 |
251 | /* =typography */
252 | header h1 {
253 | flex: 1;
254 | font-size: 1.5em;
255 | margin:0;
256 | padding: 0;
257 | font-weight: lighter;
258 | }
259 | h2 {
260 | flex: 0 0 100%;
261 | font-weight: lighter;
262 | margin: 0 0 .5em 0;
263 | }
264 |
265 | .articletext p {
266 | margin: 0;
267 | padding: 0 0 .5em 0;
268 | line-height: 1.3;
269 | }
270 | .more {
271 | color: var(--more-link);
272 | align-self: flex-end;
273 | display: flex;
274 | align-items: center;
275 | gap: 0.5em;
276 | font-size: 1.5em;
277 | text-decoration: none;
278 | }
279 | .more svg {
280 | fill: inherit;
281 | width: 1.5em;
282 | height: 1.5em;
283 | }
284 | .more:hover svg {
285 | transform: scale(1.5);
286 | transition: 400ms;
287 | }
288 |
289 | /* =mediaqueries */
290 |
291 | @media (prefers-reduced-motion: no-preference) {
292 | html {
293 | scroll-behavior: smooth;
294 | }
295 | }
296 | article:target h2 {
297 | animation: pop 1s;
298 | }
299 | @keyframes pop {
300 | 0% { opacity: 1; }
301 | 25% { opacity: 0.5; }
302 | 50% { opacity: 1; }
303 | 75% { opacity: 0.5; }
304 | 100% { opacity: 1 }
305 | }
306 | @media all and (min-width: 600px) {
307 | article img {
308 | max-width: 25%;
309 | height: 100%;
310 | flex: 2;
311 | display: inline-block;
312 | }
313 | }
314 |
--------------------------------------------------------------------------------
/docs/a11y-testing/icons/arrow.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/docs/a11y-testing/page-with-errors.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Demo page with accessibility issues
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Animal shelter
15 |
20 |
21 |
22 |
23 |
Cats
24 |
25 |
26 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
27 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
28 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
44 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
59 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
74 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
89 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati quos corrupti ratione a aliquam est exercitationem, magni architecto dignissimos distinctio rem eligendi vitae tempora unde? Accusamus quod ut soluta voluptatibus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, expedita omnis dolore facere alias, in harum similique reprehenderit minima cupiditate temporibus. Porro nesciunt, maxime suscipit quam explicabo molestiae fugiat nulla?
115 |
116 |
117 |
Section 2
118 |
Provident iusto mollitia quasi doloremque, qui eligendi nesciunt est, hic adipisci, totam animi voluptatum consequuntur odio omnis ullam autem debitis dolorem aliquam natus. Magni aut amet natus atque, ex at!
119 |
120 |
121 |
Section 3
122 |
Assumenda perspiciatis vitae quos, quibusdam, repellendus, deserunt officia alias reprehenderit reiciendis labore quae veritatis? Numquam dolorem exercitationem ipsam! Facilis natus architecto optio ut impedit nihil officia labore nisi excepturi dicta.
123 |
124 |
125 |
Section 4
126 |
Nihil odit doloribus beatae neque nulla. Perspiciatis earum quidem fuga! Quibusdam, quam sed necessitatibus quidem architecto assumenda cupiditate esse aspernatur. Obcaecati, explicabo suscipit aliquid fuga laudantium deserunt nesciunt ullam voluptas.
127 |
128 |
129 |
Section 5
130 |
Non aspernatur ipsam enim ducimus inventore! Aliquid, est unde. Impedit esse eaque amet! Nostrum sequi quae porro ipsa eligendi quo voluptatum! Minus vel facere quas, quae maiores a numquam rem?
How to use: Each of these sections have an ID and a CSS target state associated defined them. You can try it by using the forced state functionality of developer tools.
44 |
Select an element using the element picker, activate the "force element state" button labelled ":hov" and select the ":target" checkbox
45 |
46 |
47 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ullam error debitis beatae iure ab corrupti voluptates asperiores, facere doloremque dolorum, ratione delectus suscipit libero perspiciatis non odio rem vero!
48 |
49 |
50 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ullam error debitis beatae iure ab corrupti voluptates asperiores, facere doloremque dolorum, ratione delectus suscipit libero perspiciatis non odio rem vero!
51 |
52 |
53 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ullam error debitis beatae iure ab corrupti voluptates asperiores, facere doloremque dolorum, ratione delectus suscipit libero perspiciatis non odio rem vero!
54 |
55 |
56 |
25 | 
42 | 
57 | 
72 | 
87 |