mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 17:25:36 +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
68 lines
4.5 KiB
HTML
68 lines
4.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 style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button>
|
|
<p><button style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</button>
|
|
<p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button>
|
|
<p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button>
|
|
<p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button>
|
|
|
|
<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button>
|
|
<p><button style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</button>
|
|
<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button>
|
|
<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button>
|
|
<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button>
|
|
|
|
<!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the reference
|
|
<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span>
|
|
<p><span style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</span>
|
|
<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span>
|
|
<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span>
|
|
<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span>
|
|
|
|
<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span>
|
|
<p><span style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</span>
|
|
<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span>
|
|
<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span>
|
|
<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span>
|
|
-->
|
|
|
|
<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
|
|
<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
|
|
<p><fieldset style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset>
|
|
<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
|
|
<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
|
|
<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
|
|
|
|
<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
|
|
<p><fieldset style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
|
|
|
|
<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
|
|
|
|
<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
|
|
<p><fieldset style="display:inline;box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|