Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that the swatch to toggle a shapes highlighter does not show up
// on overwritten properties.
const TEST_URI = `
<style type='text/css'>
#shape {
width: 800px;
height: 800px;
clip-path: circle(25%);
}
div {
clip-path: circle(30%);
}
</style>
<div id="shape"></div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("#shape", inspector);
const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
const shapeToggle = container.querySelector(".inspector-shapeswatch");
const shapeToggleStyle = getComputedStyle(shapeToggle);
const overriddenContainer = getRuleViewProperty(
view,
"div",
"clip-path"
).valueSpan;
const overriddenShapeToggle = overriddenContainer.querySelector(
".inspector-shapeswatch"
);
const overriddenShapeToggleStyle = getComputedStyle(overriddenShapeToggle);
ok(
shapeToggle && overriddenShapeToggle,
"Shapes highlighter toggles exist in the DOM."
);
ok(
!shapeToggle.classList.contains("active") &&
!overriddenShapeToggle.classList.contains("active"),
"Shapes highlighter toggle buttons are not active."
);
isnot(
shapeToggleStyle.display,
"none",
"Shape highlighter toggle is not hidden"
);
is(
overriddenShapeToggleStyle.display,
"none",
"Overwritten shape highlighter toggle is not visible"
);
});