mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-23 02:05:42 +00:00
cd46c2a7e9
This has multiple benefits: - It makes DLBI detection of background-position changes work for buttons. - It makes background-attachment: fixed work for button backgrounds. - It allows the willPaintBorder optimization to be used for button background drawing, which reduces the background clip to not overlap with opaque borders. The willPaintBorder optimization requires a change to the reftest 611574-2.html. This reftest compares backgrounds to inset box shadows. Box shadows those don't have a willPaintBorder optimization, so we'd get different results due to the borders - inset box shadows will bleed through the rounded corner anti-aliasing of the border, backgrounds won't any more. So we just turn off button borders and cover the outer edges of the borders with an outline in that reftest. MozReview-Commit-ID: Lvx2p5szjw7 *** Cover the antialiasing in 611574-2.html with a black outline. MozReview-Commit-ID: IHC3B7Eq72j --HG-- extra : rebase_source : 71ae376f482d14e55820879f28b37056e1b857bf
66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head><style>
|
|
button,span,fieldset { border-radius: 7px 3px; background-color: #0F0; }
|
|
button { border: none; outline: 3px solid black; -moz-outline-radius: 7px 3px; outline-offset: -2px; }
|
|
</style></head>
|
|
<body style="margin:30px">
|
|
<div style="-moz-column-count:3">
|
|
<p><button>No Blur Radius</button>
|
|
<p><button>No Blur Radius</button>
|
|
<p><button>No Blur Radius</button>
|
|
<p><button>No Blur Radius</button>
|
|
<p><button>No Blur Radius</button>
|
|
|
|
<p><button>2px Blur Radius</button>
|
|
<p><button>2px Blur Radius</button>
|
|
<p><button>2px Blur Radius</button>
|
|
<p><button>2px Blur Radius</button>
|
|
<p><button>2px Blur Radius</button>
|
|
|
|
<!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the test
|
|
<p><span>No Blur Radius</span>
|
|
<p><span>No Blur Radius</span>
|
|
<p><span style="box-sizing:border-box;">No Blur Radius</span>
|
|
<p><span>No Blur Radius</span>
|
|
<p><span>No Blur Radius</span>
|
|
|
|
<p><span>2px Blur Radius</span>
|
|
<p><span>2px Blur Radius</span>
|
|
<p><span style="box-sizing:border-box;">2px Blur Radius</span>
|
|
<p><span>2px Blur Radius</span>
|
|
<p><span>2px Blur Radius</span>
|
|
-->
|
|
|
|
<p><fieldset>No Blur Radius</fieldset>
|
|
<p><fieldset><legend>No</legend> Blur Radius</fieldset>
|
|
<p><fieldset>No Blur Radius</fieldset>
|
|
<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset>
|
|
<p><fieldset>No Blur Radius</fieldset>
|
|
<p><fieldset>No Blur Radius</fieldset>
|
|
|
|
<p><fieldset>2px Blur Radius</fieldset>
|
|
<p><fieldset><legend>2px</legend> Blur Radius</fieldset>
|
|
<p><fieldset>2px Blur Radius</fieldset>
|
|
<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset>
|
|
<p><fieldset>2px Blur Radius</fieldset>
|
|
<p><fieldset>2px Blur Radius</fieldset>
|
|
|
|
<p><fieldset style="display:inline;">No Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;">No Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;">No Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;">No Blur Radius</fieldset>
|
|
|
|
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|