mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-15 06:15:43 +00:00
Bug 1296361
- Implement shadow behind arrow panels across platforms. r=mdeboer
This commit is contained in:
parent
7c19467a4d
commit
0eb70cfa53
@ -25,12 +25,12 @@
|
||||
|
||||
<panel id="panel" type="arrow" animate="false"
|
||||
onpopupshown="checkPanelPosition(this)" onpopuphidden="runNextTest.next()">
|
||||
<label id="panellabel" value="This is some text..." height="65"/>
|
||||
<box width="115" height="65"/>
|
||||
</panel>
|
||||
|
||||
<panel id="bigpanel" type="arrow" animate="false"
|
||||
onpopupshown="checkBigPanel(this)" onpopuphidden="runNextTest.next()">
|
||||
<button label="This is some text..." height="3000"/>
|
||||
<box width="125" height="3000"/>
|
||||
</panel>
|
||||
|
||||
<panel id="animatepanel" type="arrow"
|
||||
@ -245,23 +245,23 @@ function checkPanelPosition(panel)
|
||||
|
||||
var panelRect = panel.getBoundingClientRect();
|
||||
var anchorRect = anchor.getBoundingClientRect();
|
||||
var labelBO = $("panellabel").boxObject;
|
||||
var labelRect = { top: labelBO.y,
|
||||
left: labelBO.x,
|
||||
bottom: labelBO.y + labelBO.height,
|
||||
right: labelBO.x + labelBO.width };
|
||||
var contentBO = panel.firstChild.boxObject;
|
||||
var contentRect = { top: contentBO.y,
|
||||
left: contentBO.x,
|
||||
bottom: contentBO.y + contentBO.height,
|
||||
right: contentBO.x + contentBO.width };
|
||||
switch (expectedSide) {
|
||||
case "top":
|
||||
ok(labelRect.top > vwinpos + anchorRect.bottom * zoomFactor + 5, "panel label is below");
|
||||
ok(contentRect.top > vwinpos + anchorRect.bottom * zoomFactor + 5, "panel content is below");
|
||||
break;
|
||||
case "bottom":
|
||||
ok(labelRect.bottom < vwinpos + anchorRect.top * zoomFactor - 5, "panel label is above");
|
||||
ok(contentRect.bottom < vwinpos + anchorRect.top * zoomFactor - 5, "panel content is above");
|
||||
break;
|
||||
case "left":
|
||||
ok(labelRect.left > hwinpos + anchorRect.right * zoomFactor + 5, "panel label is right");
|
||||
ok(contentRect.left > hwinpos + anchorRect.right * zoomFactor + 5, "panel content is right");
|
||||
break;
|
||||
case "right":
|
||||
ok(labelRect.right < hwinpos + anchorRect.left * zoomFactor - 5, "panel label is left");
|
||||
ok(contentRect.right < hwinpos + anchorRect.left * zoomFactor - 5, "panel content is left");
|
||||
break;
|
||||
}
|
||||
|
||||
|
@ -21,14 +21,14 @@ panel[type="arrow"] {
|
||||
|
||||
panel[type="arrow"][side="top"],
|
||||
panel[type="arrow"][side="bottom"] {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
panel[type="arrow"][side="left"],
|
||||
panel[type="arrow"][side="right"] {
|
||||
margin-top: -16px;
|
||||
margin-bottom: -16px;
|
||||
margin-top: -20px;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
.panel-arrowcontent {
|
||||
@ -36,6 +36,8 @@ panel[type="arrow"][side="right"] {
|
||||
color: var(--panel-arrowcontent-color);
|
||||
background: var(--panel-arrowcontent-background);
|
||||
border: 1px solid var(--panel-arrowcontent-border-color);
|
||||
box-shadow: 0 0 4px hsla(0,0%,0%,.2);
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.panel-arrow[side="top"],
|
||||
@ -43,34 +45,34 @@ panel[type="arrow"][side="right"] {
|
||||
list-style-image: var(--panel-arrow-image-vertical,
|
||||
url("chrome://global/skin/arrow/panelarrow-vertical-themed.svg"));
|
||||
position: relative;
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.panel-arrow[side="top"] {
|
||||
margin-bottom: -1px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.panel-arrow[side="bottom"] {
|
||||
transform: scaleY(-1);
|
||||
margin-top: -1px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.panel-arrow[side="left"],
|
||||
.panel-arrow[side="right"] {
|
||||
list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal-themed.svg");
|
||||
position: relative;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.panel-arrow[side="left"] {
|
||||
margin-right: -1px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.panel-arrow[side="right"] {
|
||||
transform: scaleX(-1);
|
||||
margin-left: -1px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
/* ::::: tooltip ::::: */
|
||||
|
@ -53,6 +53,7 @@ panel[type="arrow"][side="right"] {
|
||||
background: var(--panel-arrowcontent-background);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--panel-arrowcontent-border-color);
|
||||
box-shadow: 0 0 4px hsla(0,0%,0%,.2);
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user