- Select a "Base" browser for comparing layouts
- Wait for the comparison process to complete. The larger a webpage's DOM, and the larger the number of browsers to compare, the longer this will take.
- Once complete, comparison results will display on this screen indicating the number of layout differences detected per browser
- Click on a browser's result to see a 'Side-By-Side' view of the "Base" and "Target" browser with details
Used as the basis for detecting box model differences in element positioning and dimensions that should be flagged.
The default is 30px which is a good basis for finding notable differences.
To change the Tolerance, enter a new value between 0 and 100, hit Enter, or click outside of the field, in order to update results.
|View||You can switch between 'Summary' view and 'Side-By-Side' view directly via the select option at the top, but clicking on a result in the 'Summary' view will automatically switch you to the 'Side-By-Side' view for the specified browser. You can also select 'Instructions' view at any point to get back to this page.|
|Info||See the date this test was run and a public URL to this comparison page. Use the public URL to share this layout comparison with other people. When in Side-By-Side view, the public URL links to the browsers in that view.|
When in Side-By-Side' view, you will see an option for Scale at the top. Here you can change how the images are displayed:
Full Size: The actual resolution of the base and comparison images. Scrollbars will appear for both directions as needed.
Fit Width: Scale the base and comparison images to fit inside the viewport width. (This makes viewing scrolling long pages simpler) Fit Height: Scale the base and comparison images to fit inside the viewport height. (This usually allows you to see the whole image without scrolling)
|Scroll Lock||In Side-By-Side' view, there's a "Lock" icon above the middle scrollbar. Click this icon to switch synchronized scrolling of the base and comparison images on or off. When a Layout Difference is selected in the Comparison Results, the lock is automatically disabled as the two images are scrolled to the place of the highlighted element, which enables the images to be scrolled separately.|
|Target Browser||In Side-By-Side' view, there's a select box for the Target browser being compared. You can select a different browser to compare by changing this selection, clicking the 'Prev' or 'Next' link, or going back to the 'Summary' view and clicking another browser in the results. Each time a new Comparison browser is selected, the Comparison Results loads at the bottom of the screen for this comparison.|
In Side-By-Side' view, you will see the Comparison Results bar at the bottom of the page. Here you can
see the number of box model differences, hidden elements, and missing elements found during the comparison.
- Click anywhere on the bar itself to show/hide the information below it. This helps to get a larger view of the images for visual comparisons.
- Click a tab in the results to see each list.
- Click an item in the list to see the element highlighted in the base and comparison images.
- Click a highlighted element in the image to get more details, or simply point the mouse to the element to get a tooltip with details such as the actual size and position of the element.
- For best results, all screenshots should be taken at the same resolution. Varying resolution may show false-positive differences.
- If a screenshot fails for a browser or if it's cancelled, it will not be shown on this comparison page.
- Selecting a browser with no DOM as the 'Base' browser will fail to get comparison results.