<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">
<style type="text/css" style="display:none;"><!-- P {margin-top:0;margin-bottom:0;} --></style>
</head>
<body dir="ltr">
<div id="divtagdefaultwrapper" style="font-size:12pt;color:#000000;font-family:Calibri,Helvetica,sans-serif;" dir="ltr">
<p>Hello everyone,</p>
<p><br>
</p>
<p><span id="docs-internal-guid-5a18eacc-e021-fa0d-4d2b-e245f2fe186f"></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">We are team of students from Michigan State University’s
capstone experience. For the past few months, we have been improving the Firefox Screenshot Testing Suite.</span></p>
<br>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">Cropping to elements with CSS Selectors</span></p>
<br>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">The tool will now crop screenshots to relevant regions
based on required CSS selectors given in their respective configuration files. These CSS selectors are used to calculate a bounding box around elements, which is used as a cropping region for the screenshots. A configuration may specify multiple CSS selectors,
in which case the union of the bounding boxes is calculated and this is used as the cropping region instead. This behavior is the same when multiple configurations are specified, in which case the union is taken over all the selectors specified by all the
configurations in the combo. </span></p>
<br>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">While most configurations should be able to use CSS selectors,
in some cases (such as DevTools), more complex logic may be necessary to find a particular element. In this case, a function returning the desired element may be used instead.</span></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;"><br>
</span></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">An example of one of the DevTools configs before cropping
and after cropping is featured below. </span></p>
<br>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">Added Configurations</span></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="background-color: transparent; font-size: 11pt; white-space: pre-wrap; font-family: Arial;"><br>
</span></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="background-color: transparent; font-size: 11pt; white-space: pre-wrap; font-family: Arial;">So far only the UIDensities config has landed to test the browser under compact
density, normal density, and touch density. More to come soon.</span></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="background-color: transparent; font-size: 11pt; white-space: pre-wrap; font-family: Arial;"><br>
</span></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="background-color: transparent; font-size: 11pt; white-space: pre-wrap; font-family: Arial;"><span id="docs-internal-guid-5a18eacc-e023-0bf8-856b-5e6f5ce7f612"></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">Can specify sub-configurations</span></p>
<br>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">An optional comma-separated list can be specified to capture
a certain subset of configurations. For example, Tabs[fiveTabs, fourPinned].</span></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;"><br>
</span></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;"><br>
</span></p>
<div>Before Cropping (ignore the green):</div>
</span><img size="222864" contenttype="image/png" id="img230839" style="max-width: 99.9%; user-select: none;" tabindex="0" src="cid:bc7bce1a-57c4-4c2d-bfbf-8ef6626abcf3"><br>
After Cropping: </span>
<p></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="background-color: transparent; font-size: 11pt; white-space: pre-wrap; font-family: Arial;"><br>
</span></p>
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="background-color: transparent; font-size: 11pt; white-space: pre-wrap; font-family: Arial;"><img size="55949" contenttype="image/png" id="img601827" style="max-width: 99.9%; user-select: none;" tabindex="0" src="cid:06e05012-ca36-41ed-8176-fb3587bc44a1"><br>
<br>
</span></p>
</span><br>
<p></p>
</div>
</body>
</html>