Bug 1901037 - [devtools] Add test for ::details-content pseudo element in Rules view. r=devtools-reviewers,bomsy.
Depends on D241100. Differential Revision: https://phabricator.services.mozilla.com/D241397
This commit is contained in:
@@ -13,6 +13,7 @@ add_task(async function () {
|
||||
await pushPref("dom.customHighlightAPI.enabled", true);
|
||||
await pushPref("dom.text_fragments.enabled", true);
|
||||
await pushPref("layout.css.modern-range-pseudos.enabled", true);
|
||||
await pushPref("layout.css.details-content.enabled", true);
|
||||
await pushPref("full-screen-api.transition-duration.enter", "0 0");
|
||||
await pushPref("full-screen-api.transition-duration.leave", "0 0");
|
||||
|
||||
@@ -29,6 +30,7 @@ add_task(async function () {
|
||||
await testCustomHighlight(inspector, view);
|
||||
await testSlider(inspector, view);
|
||||
await testUrlFragmentTextDirective(inspector, view);
|
||||
await testDetailsContent(inspector, view);
|
||||
// keep this one last as it makes the browser go fullscreen and seem to impact other tests
|
||||
await testBackdrop(inspector, view);
|
||||
});
|
||||
@@ -461,6 +463,15 @@ async function testUrlFragmentTextDirective(inspector, view) {
|
||||
assertGutters(view);
|
||||
}
|
||||
|
||||
async function testDetailsContent(inspector, view) {
|
||||
await assertPseudoElementRulesNumbers("details", inspector, view, {
|
||||
// `element`, `*`, and inherited `body`
|
||||
elementRules: 3,
|
||||
detailsContentRules: 1,
|
||||
});
|
||||
assertGutters(view);
|
||||
}
|
||||
|
||||
function convertTextPropsToString(textProps) {
|
||||
return textProps
|
||||
.map(
|
||||
@@ -491,6 +502,7 @@ const PSEUDO_DICT = {
|
||||
sliderThumbRules: "::slider-thumb",
|
||||
sliderTrackRules: "::slider-track",
|
||||
targetTextRules: "::target-text",
|
||||
detailsContentRules: "::details-content",
|
||||
};
|
||||
|
||||
async function assertPseudoElementRulesNumbers(
|
||||
|
||||
@@ -150,6 +150,12 @@ input::slider-track {
|
||||
.url-fragment-text-directives::target-text {
|
||||
background-color: salmon;
|
||||
}
|
||||
|
||||
details[open]::details-content {
|
||||
color: hotpink;
|
||||
border: 4px solid darkmagenta;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -192,6 +198,12 @@ input::slider-track {
|
||||
|
||||
<canvas></canvas>
|
||||
|
||||
<details open>
|
||||
<summary>Summary</summary>
|
||||
<h2>::details-content</h2>
|
||||
<p>In details</p>
|
||||
</details>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
// This is the only way to have the ::backdrop style to be applied
|
||||
|
||||
Reference in New Issue
Block a user