forked from mirrors/gecko-dev
9f39c7b608
This is the main performance improvement, and means that we no longer have to iterate all the cells for each column. It has a couple of behaviour changes: The first is that we no longer apply stacking context effects (like opacity) to column and column group backgrounds. I believe this is correct as per both CSS2.1 Appendix E, and css-tables-3 (quoted in nsTableColFrame::BuildDisplayList). This matches the behaviour of blink and WebKit. We also previously created items in column,row ordering, whereas now they will be in row,column. In cases where two cells overlap (using rowspan and colspan to extend multiple neighbours in to the same place) this can render backgrounds in a different order, but the new behaviour matches blink and WebKit. Differential Revision: https://phabricator.services.mozilla.com/D29280 --HG-- extra : moz-landing-system : lando
61 lines
1.5 KiB
HTML
61 lines
1.5 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html lang="en-US">
|
|
<head>
|
|
<title>Table background tests</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="Content-Style-Type" content="text/css">
|
|
<style type="text/css">
|
|
|
|
html, body { margin: 0; padding: 0; border: 0; font-size: 16px; }
|
|
body { padding: 15px; }
|
|
|
|
/*
|
|
table {
|
|
margin: 0px 3px 2px 4px;
|
|
border-width: 4px 2px 8px 6px;
|
|
|
|
height is 97px:
|
|
(2px of border outside height)
|
|
extra border width for top row: 0
|
|
cell * 5: == 19px * 5 == 95px
|
|
border-top: 2px;
|
|
padding-top: 1px;
|
|
height: 10px;
|
|
padding-bottom: 4px;
|
|
border-bottom: 2px;
|
|
extra border width for top row: 2px
|
|
(4px of border outside height)
|
|
|
|
width is 287px:
|
|
(3px of border outside width)
|
|
extra border width for left column: 2px
|
|
cell * 5: == 57px * 5 == 285px
|
|
border-left: 1px;
|
|
padding-left: 3px;
|
|
width: 50px;
|
|
padding-right: 2px;
|
|
border-right: 1px;
|
|
(1px of border outside width)
|
|
*/
|
|
|
|
div { width: 57px; height: 97px; margin: 2px 121px 8px 123px; }
|
|
div.color { background-color: aqua; }
|
|
|
|
div.imagetl, div.imagebr {
|
|
background-image: url(repeatable-diagonal-gradient-with-ticks.png);
|
|
}
|
|
|
|
div.imagetl { background-position: 0 0; }
|
|
div.imagebr { background-position: 57px 97px; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="color"></div>
|
|
<div class="imagetl"></div>
|
|
<div class="imagebr"></div>
|
|
|
|
</body>
|
|
</html>
|