nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Backed out changeset 148b695e58fc (bug 1868263) for causing dt failures on browser_rules_shapes-toggle_01.js CLOSED TREE

Browse source
This commit is contained in:
Norisz Fay 2023-12-11 17:01:41 +02:00
parent f6eb559256
commit 1dbc4dfcc1
2 changed files with 4 additions and 64 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

60
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
View file

@ -8,15 +8,9 @@
const TEST_URI = `
<style type='text/css'>
html, body {
margin: 0;
padding: 0;
}
#shape {
width: 800px;
height: 800px;
background: tomato;
clip-path: circle(25%);
}
</style>
@ -27,7 +21,7 @@ const HIGHLIGHTER_TYPE = "ShapesHighlighter";
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view, highlighterTestFront } = await openRuleView();
const { inspector, view } = await openRuleView();
const highlighters = view.highlighters;
info("Select a node with a shape value");
@ -68,58 +62,6 @@ add_task(async function () {
);
ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)({
inspector,
highlighterTestFront,
});
info("Update shape");
const { mouse } = helper;
let onRuleViewChanged = view.once("ruleview-changed");
// we want to change the radius. clip-path is 25%, element is 800px wide, meaning that
// the center is at 400,400 and so the right handle is at (400 + 800px*0.25),400 -> 600,400
await mouse.down(600, 400);
// moving the handle 200px to the right to make the clip-path 50%
await mouse.move(800, 400);
await mouse.up();
await reflowContentPage();
await onRuleViewChanged;
let newValue = getRuleViewPropertyValue(view, "#shape", "clip-path");
is(
newValue,
`circle(50.00%)`,
"clip-path property was updated when changing the radius"
);
onRuleViewChanged = view.once("ruleview-changed");
// moving the circle, which center is 400,400 as the div is 800px wide and tall
await mouse.down(400, 400);
await mouse.move(200, 400);
await mouse.up();
await reflowContentPage();
await onRuleViewChanged;
newValue = getRuleViewPropertyValue(view, "#shape", "clip-path");
is(
newValue,
`circle(50% at 200px 400px)`,
"clip-path property was updated (position was added) when moving the shape"
);
onRuleViewChanged = view.once("ruleview-changed");
// change the radius again to check that it handles the position
await mouse.down(600, 400);
await mouse.move(400, 400);
await mouse.up();
await reflowContentPage();
await onRuleViewChanged;
newValue = getRuleViewPropertyValue(view, "#shape", "clip-path");
is(
newValue,
`circle(25.00% at 200px 400px)`,
"clip-path property (with position) was updated when changing the radius"
);
info("Toggling OFF the CSS shapes highlighter from the rule-view.");
const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
shapesToggle.click();

8
devtools/server/actors/highlighters/shapes.js
View file

@ -1324,9 +1324,8 @@ class ShapesHighlighter extends AutoRefreshHighlighter {
const delta = (newRadiusPx - origRadius) * ratio;
const newRadius = `${round(value + delta, unit)}${unit}`;
const position = cx !== "" ? ` at ${cx} ${cy}` : "";
const circleDef =
`circle(${newRadius}${position}) ${this.geometryBox}`.trim();
`circle(${newRadius} at ${cx} ${cy}) ${this.geometryBox}`.trim();
this.emit("highlighter-event", {
type: "shape-change",
@ -1411,7 +1410,6 @@ class ShapesHighlighter extends AutoRefreshHighlighter {
pageY
);
const { rx, ry, cx, cy } = this.coordUnits;
const position = cx !== "" ? ` at ${cx} ${cy}` : "";
if (point === "center") {
const { unitX, unitY, valueX, valueY, ratioX, ratioY, x, y } =
@ -1435,7 +1433,7 @@ class ShapesHighlighter extends AutoRefreshHighlighter {
const newRadius = `${round(value + delta, unit)}${unit}`;
const ellipseDef =
`ellipse(${newRadius} ${ry}${position}) ${this.geometryBox}`.trim();
`ellipse(${newRadius} ${ry} at ${cx} ${cy}) ${this.geometryBox}`.trim();
this.emit("highlighter-event", {
type: "shape-change",
@ -1449,7 +1447,7 @@ class ShapesHighlighter extends AutoRefreshHighlighter {
const newRadius = `${round(value + delta, unit)}${unit}`;
const ellipseDef =
`ellipse(${rx} ${newRadius}${position}) ${this.geometryBox}`.trim();
`ellipse(${rx} ${newRadius} at ${cx} ${cy}) ${this.geometryBox}`.trim();
this.emit("highlighter-event", {
type: "shape-change",