Bug 1661283 Part 6: Add a test of NodeActor.isScrollable on various elements. r=gl

Differential Revision: https://phabricator.services.mozilla.com/D88683
This commit is contained in:
Brad Werth 2020-08-31 17:56:24 +00:00
Родитель 8ca8fd6962
Коммит fc3cb8fd99
3 изменённых файлов: 115 добавлений и 0 удалений

Просмотреть файл

@ -28,6 +28,7 @@ support-files =
error-actor.js
grid.html
inspectedwindow-reload-target.sjs
inspector-isScrollable-data.html
inspector-search-data.html
inspector-traversal-data.html
inspector-shadow.html
@ -115,6 +116,7 @@ skip-if = e10s # Bug 1183605 - devtools/server/tests/browser/ tests are still di
[browser_getProcess.js]
[browser_inspector-anonymous.js]
[browser_inspector-insert.js]
[browser_inspector-isScrollable.js]
[browser_inspector-mutations-childlist.js]
[browser_inspector-release.js]
[browser_inspector-remove.js]

Просмотреть файл

@ -0,0 +1,34 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const URL = MAIN_DOMAIN + "inspector-isScrollable-data.html";
const CASES = [
{ id: "body", expected: false },
{ id: "no_children", expected: false },
{ id: "one_child_no_overflow", expected: false },
{ id: "margin_left_overflow", expected: true },
{ id: "transform_overflow", expected: true },
{ id: "nested_overflow", expected: true },
{ id: "intermediate_overflow", expected: true },
{ id: "multiple_overflow_at_different_depths", expected: true },
{ id: "overflow_hidden", expected: false },
{ id: "scrollbar_none", expected: false },
];
add_task(async function() {
info(
"Test that elements with scrollbars have a true value for isScrollable, and elements without scrollbars have a false value."
);
const { walker } = await initInspectorFront(URL);
for (const { id, expected } of CASES) {
info(`Checking element id ${id}.`);
const el = await walker.querySelector(walker.rootNode, `#${id}`);
is(el.isScrollable, expected, `${id} has expected value for isScrollable.`);
}
});

Просмотреть файл

@ -0,0 +1,79 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inspector test of isScrollable</title>
<style>
/* "e" is our custom tag name for "element" */
e {
background: lightgray;
display: inline-block;
margin: 10px;
padding: 0;
border: 0;
width: 100px;
height: 100px;
overflow: auto;
}
/* "c" is our custom tag name for "child" */
c {
display: block;
background: green;
}
.fixedSize {
width: 10px;
height: 10px;
}
.target {
background: red;
}
</style>
</head>
<body id="body">
<e id="no_children"></e>
<e id="one_child_no_overflow">
<c></c>
</e>
<e id="margin_left_overflow">
<c class="target" style="margin-left:100px">abcd</c>
</e>
<e id="transform_overflow">
<c class="target" style="transform: translate(50px)">abcd</c>
</e>
<e id="nested_overflow">
<c>
<c class="target" style="margin-left:100px">abcd</c>
</c>
</e>
<e id="intermediate_overflow">
<c class="fixedSize target" style="margin-left:100px">
<c></c>
</c>
</e>
<e id="multiple_overflow_at_different_depths">
<c class="fixedSize target" style="margin-left:100px">
<c></c>
</c>
<c style="margin-left:100px">
<c class="target">abcd</c>
</c>
</e>
<e id="overflow_hidden" style="overflow:hidden">
<c class="target" style="margin-left:100px">abcd</c>
</e>
<e id="scrollbar_none" style="scrollbar-width:none">
<c class="target" style="margin-left:100px">abcd</c>
</e>
</body>
</html>