Reflow in a web browser refers to the process whereby the render engine calculates positions and geometries of elements in the document for purpose of drawing, or re-drawing, the visual presentation. Every browser has its own logic for doing, and sometimes not doing, these calculations. Dynamic changes to the document's styles and contents will cause reflow to occur - being mindful of the things that slow down this process can lead one to creating faster web pages.
Once satisfied that the render queue has been flushed, we give the browser a little time to rest, then set a timer. We perform whatever operations are in a particular test (almost always a set operation on element.style), and then we again flush the render queue and capture the time again right after that. We get the delta, and voila - we call that the reflow time.
Acid1 (Wikipedia) has been around for a 11 years now and tests core compatibility with CSS1. This test causes a nice balance of CSS selector matching plus layout changes and has the added advantage that we didn't write it.
This test takes an element and sets its style.display="none". According to the folks at Mozilla this has the effect of taking an element out of the browser's "render tree" (the in-memory representation of all of results of geometry/positioning calculations for that particular element). Setting an element to display="none" has the additional effect of removing all of an element's children from the render tree as well. Next, the test resets the element's style.display="", which sets the element's display back to its original value. Our thinking was that this operation ought to approximate the max cost of reflowing an element on a page since the browser has to recalculate all positions and sizes for every child within the element as well as any changes to the overall document.
Much like the display test above, this test sets an element's style.visibility="hidden" and then resets it back to its default, which is "visible". This change should be less costly than changing display from "none" to the default since the browser should not be purging the element from the render tree.
This test adds a class name to an element where that class name is not present in the document's CSS object model. This tests CSS selector match time, and more specifically against selectors with classnames.
This test adds a class name to an element that will match a previously added CSS declaration added to the CSSOM. This declaration is set with four property value pairs which should in and of themselves be capable of causing a 1x reflow time. For instance, "font-size: 20px; line-height: 10px; padding-left: 10px; margin-top: 7px;". This test aims to test whether reflow operations occur in a single queue flush or if they are performed one at a time when these changes are made via a CSS classname. This test is a sort of opposite to the Four Reflows By Script.
This test sets style.padding="FOOpx", aka padding on all sides of the box model.
This test sets style.paddingLeft="FOOpx", aka padding on only the left side of the box.
This test changes an element's style.fontSize to an em-based value.
This test sets an element's style.width="FOO%"
This test sets an element's style.background="#FOO", aka a hexadecimal color.
This test sets an element's style.overflow="hidden" and then back again, timing the cost of an element returning to the default overflow which is "visible"
This test does nothing other than the request for offsetHeight after already having done so. Theoretically, this test is something like a control for our test and should have a 0 or very low time.