author Matt Woodrow <>
Mon, 20 May 2019 23:16:09 +0000
changeset 474634 69b049f546226b6bcc288986bbf60d792f01bf8f
parent 24768 fc7431820ea33d0e2ebfa92eccef4ff35c90ea1d
permissions -rw-r--r--
Bug 1409114 - Part 8: Create column and column group background display items as part of the cell's BuildDisplayList. r=dbaron 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html lang="en-US">
	<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: 171px; height: 97px; margin: 2px 61px 8px 66px; }
	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: 171px 97px; }


<div class="color"></div>
<div class="imagetl"></div>
<div class="imagebr"></div>