Skip to content

GitLab

T
tangled
Commit 380171a4 authored by Alex Rudenko's avatar Alex Rudenko Committed by Commit Bot
Browse files
Options

[DevTools] Add basic a11y info to the inspector overlay 

This change adds the accessible name, role and whether an element is
focusable using keyboard to the overlay shown when you inspect elements.
The attributes show up together with the contrast information
at the bottom part of the overlay in a new section called Accessibility.

Screenshot: https://i.imgur.com/Ax5nkeX.png

Design doc: https://goo.gle/devtools-a11y-popover

Fixed: 1040025
Change-Id: I411a79d2fedd04680f2efc0237f6c8272d922893
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2149356Reviewed-by: default avatarPeter Marshall <petermarshall@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Cr-Commit-Position: refs/heads/master@{#759998}
parent e8ad4f54
Hide whitespace changes
Inline Side-by-side
Showing with 1048 additions and 37 deletions
third_party/blink/renderer/core/inspector/inspect_tool_highlight.html
View file @ 380171a4
......@@ -87,6 +87,20 @@ body {
visibility: var(--arrow-visibility);
}
.element-info-section {
margin-top: 12px;
margin-bottom: 6px;
}
.section-name {
color: #333;
font-weight: 500;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .05em;
line-height: 12px;
}
.element-info {
display: flex;
flex-direction: column;
......@@ -109,13 +123,20 @@ body {
line-height: 19px;
}
.element-info-contrast-row {
.separator-container {
display: flex;
align-items: center;
flex: auto;
margin-left: 7px;
}
.separator {
border-top: 1px solid #ddd;
padding-top: 5px;
margin-top: 5px;
width: 100%;
}
.element-info-name {
flex-shrink: 0;
color: #666;
}
......@@ -132,11 +153,21 @@ body {
.element-info-value-contrast {
display: flex;
align-items: center;
text-align: right;
color: rgb(48, 57, 66);
margin-left: 10px;
}
.element-info-value-contrast .a11y-icon {
margin-left: 8px;
}
.element-info-value-icon {
display: flex;
align-items: center;
}
.element-info-value-text {
text-align: right;
color: rgb(48, 57, 66);
......@@ -205,16 +236,20 @@ body {
.a11y-icon {
width: 16px;
height: 16px;
margin-left: 2px;
background-repeat: no-repeat;
display: inline-block;
}
.a11y-icon-not-ok {
background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m9 1.5c-4.14 0-7.5 3.36-7.5 7.5s3.36 7.5 7.5 7.5 7.5-3.36 7.5-7.5-3.36-7.5-7.5-7.5zm0 13.5c-3.315 0-6-2.685-6-6 0-1.3875.4725-2.6625 1.2675-3.675l8.4075 8.4075c-1.0125.795-2.2875 1.2675-3.675 1.2675zm4.7325-2.325-8.4075-8.4075c1.0125-.795 2.2875-1.2675 3.675-1.2675 3.315 0 6 2.685 6 6 0 1.3875-.4725 2.6625-1.2675 3.675z" fill="%239e9e9e"/></svg>');
}
.a11y-icon-warning {
background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 18 18' fill='%23ffc107'%3e%3cpath d='M0 0h18v18H0z' fill='none'/%3e%3cpath d='M.5 16h17L9 1 .5 16zm9.5-2H8v-2h2v2zm0-3H8V7h2v4z'/%3e%3c/svg%3e ");
background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m8.25 11.25h1.5v1.5h-1.5zm0-6h1.5v4.5h-1.5zm.7425-3.75c-4.14 0-7.4925 3.36-7.4925 7.5s3.3525 7.5 7.4925 7.5c4.1475 0 7.5075-3.36 7.5075-7.5s-3.36-7.5-7.5075-7.5zm.0075 13.5c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6z" fill="%23e37400"/></svg>');
}
.a11y-icon-ok {
background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 48 48' fill='%2300a000'%3e%3cpath d='M0 0h48v48H0z' fill='none'/%3e%3cpath d='M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z'/%3e%3c/svg%3e");
background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m9 1.5c-4.14 0-7.5 3.36-7.5 7.5s3.36 7.5 7.5 7.5 7.5-3.36 7.5-7.5-3.36-7.5-7.5-7.5zm0 13.5c-3.3075 0-6-2.6925-6-6s2.6925-6 6-6 6 2.6925 6 6-2.6925 6-6 6zm-1.5-4.35-1.95-1.95-1.05 1.05 3 3 6-6-1.05-1.05z" fill="%230ca40c"/></svg>');
}
@media (forced-colors: active) {
......@@ -233,13 +268,14 @@ body {
}
.color-swatch-inner,
.contrast-text,
.element-info-contrast-row {
.separator {
border-color: Highlight;
}
.dimensions,
.element-info-name,
.element-info-value-color,
.element-info-value-contrast,
.element-info-value-icon,
.element-info-value-text,
.material-tag-name,
.material-class-name,
......@@ -533,12 +569,34 @@ function _createElementDescription(elementInfo)
addTextRow("Padding", padding);
const cbgColor = elementInfo.contrast ? elementInfo.contrast.backgroundColor : null;
if (color && color !== "#00000000" && cbgColor && cbgColor !== "#00000000")
const hasContrastInfo = color && color !== "#00000000" && cbgColor && cbgColor !== "#00000000";
addSection("Accessibility");
if (hasContrastInfo)
addContrastRow(style["color"], elementInfo.contrast);
function addRow(name, rowClassName, valueClassName) {
addTextRow("Name", elementInfo.accessibleName);
addTextRow("Role", elementInfo.accessibleRole);
addIconRow("Keyboard-focusable", elementInfo.isKeyboardFocusable ? "a11y-icon a11y-icon-ok" : "a11y-icon a11y-icon-not-ok");
function ensureElementInfoBody() {
if (!elementInfoBodyElement)
elementInfoBodyElement = elementInfoElement.createChild("div", "element-info-body")
}
function addSection(name) {
ensureElementInfoBody();
const rowElement = elementInfoBodyElement.createChild("div", "element-info-row element-info-section");
const nameElement = rowElement.createChild("div", "section-name");
nameElement.textContent = name;
const separatorElement = rowElement
.createChild("div", "separator-container")
.createChild("div", "separator");
}
function addRow(name, rowClassName, valueClassName) {
ensureElementInfoBody();
const rowElement = elementInfoBodyElement.createChild("div", "element-info-row");
if (rowClassName)
rowElement.classList.add(rowClassName);
......@@ -548,6 +606,10 @@ function _createElementDescription(elementInfo)
return rowElement.createChild("div", valueClassName || "");
}
function addIconRow(name, value) {
addRow(name, "", "element-info-value-icon").createChild('div', value);
}
function addTextRow(name, value) {
addRow(name, "", "element-info-value-text").createTextChild(value);
}
......@@ -563,7 +625,7 @@ function _createElementDescription(elementInfo)
function addContrastRow(fgColor, contrast) {
const ratio = contrastRatio(parseHexa(fgColor), parseHexa(contrast.backgroundColor));
const threshold = computeIsLargeFont(contrast) ? 3.0 : 4.5;
const valueElement = addRow("Contrast", "element-info-contrast-row", "element-info-value-contrast");
const valueElement = addRow("Contrast", "", "element-info-value-contrast");
const sampleText = valueElement.createChild("div", "contrast-text");
sampleText.style.color = fgColor;
sampleText.style.backgroundColor = contrast.backgroundColor;
......@@ -873,7 +935,7 @@ function test() {
drawHighlight(
{"paths":[{"path":["M",122,133.796875,"L",822,133.796875,"L",822,208.796875,"L",122,208.796875,"Z"], "fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},
{"path":["M",122,113.796875,"L",822,113.796875,"L",822,228.796875,"L",122,228.796875,"Z"],"fillColor":"rgba(246, 178, 107, 0.66)","name":"margin"}],"showRulers":false,"showExtensionLines":false,
"elementInfo":{"tagName":"button","className":"class.name", "idValue":"download-hero","nodeWidth":"700","nodeHeight":"75","style":{"color":"#FFFFFFFF","font-family":"\"Product Sans\", \"Open Sans\", Roboto, Arial, \"Product Sans\", \"Open Sans\", Roboto, Arial","font-size":"20px","line-height":"25px","padding":"0px","margin":"20px 0px","background-color":"#00000000"},"contrast":{"fontSize":"20px","fontWeight":"400","backgroundColor":"#F9B826BF"}}, showExtensionLines: true, showRulers: true});
"elementInfo":{"tagName":"button","className":"class.name", "idValue":"download-hero","nodeWidth":"700","nodeHeight":"75","style":{"color":"#FFFFFFFF","font-family":"\"Product Sans\", \"Open Sans\", Roboto, Arial, \"Product Sans\", \"Open Sans\", Roboto, Arial","font-size":"20px","line-height":"25px","padding":"0px","margin":"20px 0px","background-color":"#00000000"},"contrast":{"fontSize":"20px","fontWeight":"400","backgroundColor":"#F9B826BF"},"isKeyboardFocusable":false,"accessibleName":"name","accessibleRole":"role"}, showExtensionLines: true, showRulers: true});
}
</script>
......
third_party/blink/renderer/core/inspector/inspector_highlight.cc
View file @ 380171a4
......@@ -308,6 +308,11 @@ std::unique_ptr<protocol::DictionaryValue> BuildElementInfo(Element* element) {
DOMRect* bounding_box = element->getBoundingClientRect();
element_info->setString("nodeWidth", String::Number(bounding_box->width()));
element_info->setString("nodeHeight", String::Number(bounding_box->height()));
element_info->setBoolean("isKeyboardFocusable",
element->IsKeyboardFocusable());
element_info->setString("accessibleName", element->computedName());
element_info->setString("accessibleRole", element->computedRole());
return element_info;
}
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-expected.txt
View file @ 380171a4
......@@ -87,7 +87,10 @@ paddedGrid{
"idValue": "paddedGrid",
"className": ".grid.padded.fixed",
"nodeWidth": "175",
"nodeHeight": "1130"
"nodeHeight": "1130",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
},
"gridInfo": [
{
......@@ -239,7 +242,10 @@ nestedGrid{
"idValue": "nestedGrid",
"className": ".grid",
"nodeWidth": "100",
"nodeHeight": "1000"
"nodeHeight": "1000",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
},
"gridInfo": [
{
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-huge-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ big-grid{
"tagName": "div",
"idValue": "big-grid",
"nodeWidth": "769",
"nodeHeight": "995"
"nodeHeight": "995",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
},
"gridInfo": [
{
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-shapes-outside-expected.txt
View file @ 380171a4
......@@ -185,7 +185,10 @@ circle{
"idValue": "circle",
"className": ".float.circle",
"nodeWidth": "128",
"nodeHeight": "128"
"nodeHeight": "128",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
insetSimpleRound{
......@@ -373,7 +376,10 @@ insetSimpleRound{
"idValue": "insetSimpleRound",
"className": ".float.insetSimpleRound",
"nodeWidth": "128",
"nodeHeight": "128"
"nodeHeight": "128",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
insetComplexRound{
......@@ -585,7 +591,10 @@ insetComplexRound{
"idValue": "insetComplexRound",
"className": ".float.insetComplexRound",
"nodeWidth": "128",
"nodeHeight": "128"
"nodeHeight": "128",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
ellipse{
......@@ -773,7 +782,10 @@ ellipse{
"idValue": "ellipse",
"className": ".float.ellipse",
"nodeWidth": "128",
"nodeHeight": "80"
"nodeHeight": "80",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
contentBox{
......@@ -985,7 +997,10 @@ contentBox{
"idValue": "contentBox",
"className": ".float.contentBox",
"nodeWidth": "176",
"nodeHeight": "160"
"nodeHeight": "160",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
polygon{
......@@ -1090,7 +1105,10 @@ polygon{
"idValue": "polygon",
"className": ".float.polygon",
"nodeWidth": "128",
"nodeHeight": "128"
"nodeHeight": "128",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
raster{
......@@ -1528,7 +1546,10 @@ raster{
"idValue": "raster",
"className": ".float.raster",
"nodeWidth": "128",
"nodeHeight": "128"
"nodeHeight": "128",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-shapes-outside-scroll-expected.txt
View file @ 380171a4
......@@ -185,7 +185,10 @@ circle{
"idValue": "circle",
"className": ".float.circle",
"nodeWidth": "128",
"nodeHeight": "128"
"nodeHeight": "128",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
circle{
......@@ -373,7 +376,10 @@ circle{
"idValue": "circle",
"className": ".float.circle",
"nodeWidth": "128",
"nodeHeight": "128"
"nodeHeight": "128",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-display-locked-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ container{
"tagName": "div",
"idValue": "container",
"nodeWidth": "784",
"nodeHeight": "10"
"nodeHeight": "10",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
child{
......@@ -176,6 +179,9 @@ child{
"idValue": "container",
"nodeWidth": "784",
"nodeHeight": "10",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic",
"isLockedAncestor": "true"
}
}
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-a11y-expected.txt 0 → 100644
View file @ 380171a4
This test verifies a11y attributes for a node.
button{
"paths": [
{
"path": [
"M",
16,
11,
"L",
41.921875,
11,
"L",
41.921875,
26,
"L",
16,
26,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
10,
10,
"L",
47.921875,
10,
"L",
47.921875,
27,
"L",
10,
27,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
8,
8,
"L",
49.921875,
8,
"L",
49.921875,
29,
"L",
8,
29,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
8,
8,
"L",
49.921875,
8,
"L",
49.921875,
29,
"L",
8,
29,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"elementInfo": {
"tagName": "button",
"idValue": "button",
"nodeWidth": "41.9219",
"nodeHeight": "21",
"isKeyboardFocusable": true,
"accessibleName": "click",
"accessibleRole": "button"
}
}
input{
"paths": [
{
"path": [
"M",
57.921875,
11,
"L",
202.921875,
11,
"L",
202.921875,
26,
"L",
57.921875,
26,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
55.921875,
10,
"L",
204.921875,
10,
"L",
204.921875,
27,
"L",
55.921875,
27,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
53.921875,
8,
"L",
206.921875,
8,
"L",
206.921875,
29,
"L",
53.921875,
29,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
53.921875,
8,
"L",
206.921875,
8,
"L",
206.921875,
29,
"L",
53.921875,
29,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"elementInfo": {
"tagName": "input",
"idValue": "input",
"nodeWidth": "153",
"nodeHeight": "21",
"isKeyboardFocusable": true,
"accessibleName": "",
"accessibleRole": "textbox"
}
}
div{
"paths": [
{
"path": [
"M",
8,
29,
"L",
792,
29,
"L",
792,
47,
"L",
8,
47,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
8,
29,
"L",
792,
29,
"L",
792,
47,
"L",
8,
47,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
8,
29,
"L",
792,
29,
"L",
792,
47,
"L",
8,
47,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
8,
29,
"L",
792,
29,
"L",
792,
47,
"L",
8,
47,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"elementInfo": {
"tagName": "div",
"idValue": "div",
"nodeWidth": "784",
"nodeHeight": "18",
"isKeyboardFocusable": true,
"accessibleName": "click",
"accessibleRole": "button"
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-a11y.js 0 → 100644
View file @ 380171a4
// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
(async function() {
TestRunner.addResult(
`This test verifies a11y attributes for a node.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<!DOCTYPE html>
<button id="button">click</button>
<input id="input"></input>
<div id="div" tabindex="0" role="button" aria-label="click">Save</div>
`);
function dumpHighlight(id) {
return new Promise(resolve => ElementsTestRunner.dumpInspectorHighlightJSON(id, resolve));
}
await dumpHighlight('button');
await dumpHighlight('input');
await dumpHighlight('div');
TestRunner.completeTest();
})();
\ No newline at end of file
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-scaled-and-scrolled-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ div{
"tagName": "div",
"idValue": "div",
"nodeWidth": "69",
"nodeHeight": "80"
"nodeHeight": "80",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-scaled-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ div{
"tagName": "div",
"idValue": "div",
"nodeWidth": "69",
"nodeHeight": "80"
"nodeHeight": "80",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-scroll-expected.txt
View file @ 380171a4
......@@ -87,7 +87,10 @@ inspectedElement1{
"idValue": "inspectedElement1",
"className": ".inspected",
"nodeWidth": "250",
"nodeHeight": "250"
"nodeHeight": "250",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
inspectedElement2{
......@@ -177,7 +180,10 @@ inspectedElement2{
"idValue": "inspectedElement2",
"className": ".inspected",
"nodeWidth": "250",
"nodeHeight": "250"
"nodeHeight": "250",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-transformed-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ div{
"tagName": "div",
"idValue": "div",
"nodeWidth": "100",
"nodeHeight": "80"
"nodeHeight": "80",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-vertical-rl-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ container{
"tagName": "div",
"idValue": "container",
"nodeWidth": "300",
"nodeHeight": "300"
"nodeHeight": "300",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
child{
......@@ -175,7 +178,10 @@ child{
"tagName": "div",
"idValue": "child",
"nodeWidth": "240",
"nodeHeight": "220"
"nodeHeight": "220",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
span{
......@@ -264,7 +270,10 @@ span{
"tagName": "span",
"idValue": "span",
"nodeWidth": "10",
"nodeHeight": "70"
"nodeHeight": "70",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
TEXT{
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-svg-content-inside-iframe-expected.txt
View file @ 380171a4
......@@ -28,7 +28,10 @@ svg-rect{
"tagName": "rect",
"idValue": "svg-rect",
"nodeWidth": "60",
"nodeHeight": "80"
"nodeHeight": "80",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-svg-root-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ svg-root{
"tagName": "svg",
"idValue": "svg-root",
"nodeWidth": "150",
"nodeHeight": "150"
"nodeHeight": "150",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": ""
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-svg-root-zoomed-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ svg-root{
"tagName": "svg",
"idValue": "svg-root",
"nodeWidth": "280",
"nodeHeight": "380"
"nodeHeight": "380",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": ""
}
}
third_party/blink/web_tests/platform/linux/http/tests/devtools/elements/highlight/highlight-node-a11y-expected.txt 0 → 100644
View file @ 380171a4
This test verifies a11y attributes for a node.
button{
"paths": [
{
"path": [
"M",
16,
11,
"L",
43,
11,
"L",
43,
27,
"L",
16,
27,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
10,
10,
"L",
49,
10,
"L",
49,
28,
"L",
10,
28,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
8,
8,
"L",
51,
8,
"L",
51,
30,
"L",
8,
30,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
8,
8,
"L",
51,
8,
"L",
51,
30,
"L",
8,
30,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"elementInfo": {
"tagName": "button",
"idValue": "button",
"nodeWidth": "43",
"nodeHeight": "22",
"isKeyboardFocusable": true,
"accessibleName": "click",
"accessibleRole": "button"
}
}
input{
"paths": [
{
"path": [
"M",
59,
11,
"L",
236,
11,
"L",
236,
27,
"L",
59,
27,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
57,
10,
"L",
238,
10,
"L",
238,
28,
"L",
57,
28,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
55,
8,
"L",
240,
8,
"L",
240,
30,
"L",
55,
30,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
55,
8,
"L",
240,
8,
"L",
240,
30,
"L",
55,
30,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"elementInfo": {
"tagName": "input",
"idValue": "input",
"nodeWidth": "185",
"nodeHeight": "22",
"isKeyboardFocusable": true,
"accessibleName": "",
"accessibleRole": "textbox"
}
}
div{
"paths": [
{
"path": [
"M",
8,
30,
"L",
792,
30,
"L",
792,
50,
"L",
8,
50,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
8,
30,
"L",
792,
30,
"L",
792,
50,
"L",
8,
50,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
8,
30,
"L",
792,
30,
"L",
792,
50,
"L",
8,
50,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
8,
30,
"L",
792,
30,
"L",
792,
50,
"L",
8,
50,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"elementInfo": {
"tagName": "div",
"idValue": "div",
"nodeWidth": "784",
"nodeHeight": "20",
"isKeyboardFocusable": true,
"accessibleName": "click",
"accessibleRole": "button"
}
}
third_party/blink/web_tests/platform/mac/http/tests/devtools/elements/highlight/highlight-node-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ inspectedElement{
"tagName": "div",
"idValue": "inspectedElement",
"nodeWidth": "250",
"nodeHeight": "250"
"nodeHeight": "250",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
......
third_party/blink/web_tests/platform/win/http/tests/devtools/elements/highlight/highlight-node-a11y-expected.txt 0 → 100644
View file @ 380171a4
This test verifies a11y attributes for a node.
button{
"paths": [
{
"path": [
"M",
16,
11,
"L",
43,
11,
"L",
43,
27,
"L",
16,
27,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
10,
10,
"L",
49,
10,
"L",
49,
28,
"L",
10,
28,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
8,
8,
"L",
51,
8,
"L",
51,
30,
"L",
8,
30,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
8,
8,
"L",
51,
8,
"L",
51,
30,
"L",
8,
30,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"elementInfo": {
"tagName": "button",
"idValue": "button",
"nodeWidth": "43",
"nodeHeight": "22",
"isKeyboardFocusable": true,
"accessibleName": "click",
"accessibleRole": "button"
}
}
input{
"paths": [
{
"path": [
"M",
59,
11,
"L",
228,
11,
"L",
228,
27,
"L",
59,
27,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
57,
10,
"L",
230,
10,
"L",
230,
28,
"L",
57,
28,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
55,
8,
"L",
232,
8,
"L",
232,
30,
"L",
55,
30,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
55,
8,
"L",
232,
8,
"L",
232,
30,
"L",
55,
30,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"elementInfo": {
"tagName": "input",
"idValue": "input",
"nodeWidth": "177",
"nodeHeight": "22",
"isKeyboardFocusable": true,
"accessibleName": "",
"accessibleRole": "textbox"
}
}
div{
"paths": [
{
"path": [
"M",
8,
30,
"L",
792,
30,
"L",
792,
50,
"L",
8,
50,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
8,
30,
"L",
792,
30,
"L",
792,
50,
"L",
8,
50,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
8,
30,
"L",
792,
30,
"L",
792,
50,
"L",
8,
50,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
8,
30,
"L",
792,
30,
"L",
792,
50,
"L",
8,
50,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"elementInfo": {
"tagName": "div",
"idValue": "div",
"nodeWidth": "784",
"nodeHeight": "20",
"isKeyboardFocusable": true,
"accessibleName": "click",
"accessibleRole": "button"
}
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-expected.txt → third_party/blink/web_tests/platform/win/http/tests/devtools/elements/highlight/highlight-node-expected.txt
View file @ 380171a4
......@@ -86,7 +86,10 @@ inspectedElement{
"tagName": "div",
"idValue": "inspectedElement",
"nodeWidth": "250",
"nodeHeight": "250"
"nodeHeight": "250",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic"
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment