Moving the webkit.opendarwin.org site into our Subversion repository.
[WebKit-https.git] / WebKitSite / quality / reduction.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
2 <html>
3 <head>
4   <meta content="text/html; charset=ISO-8859-1"
5  http-equiv="content-type">
6   <title>Test Case Reduction</title>
7   <link rel=stylesheet href="../webkitdev.css">
8 </head>
9 <body>
10 <!--begin sidebar -->
11 <iframe id="sidebar" src="../sidebar.html"></iframe>
12 <!--end sidebar -->
13
14 <div id="banner">
15 Test Case Reduction
16 </div>
17
18 <div id="content">
19 <p>The basic idea behind bug reduction is to take a page that demonstrates a problem and
20 remove as much content as possible while still reproducing the original problem.
21 </p>
22 <p>Why is this needed?</p>
23 <p>
24 A reduced test case can help identify the central problem on the
25 page by eliminating irrelevant information, i.e., portions of the HTML
26 page's structure that have nothing to do with the problem.
27 With a reduced test case, the development team will spend
28 less time identifying the problem and more time determining the
29 solution. Also, since a site can change its content or design, the
30 problem may no longer occur on the real-world site. 
31 By constructing a test case you can capture the initial problem.
32 </p>
33 <p>
34 A general guide to test case reduction:
35 </p>
36 <p>
37 Really the first step in reducing a page is to identify that main
38 problem of the page. For example:
39 <ul>
40   <li>Does the page have text overlapping an image? </li>
41   <li>Is there a form button that fails to work?</li>
42   <li>Is there a portion of the page missing or misaligned?</li>
43 </ul>
44 </p>
45 <p>
46 After you have made this determination, you need to create a local copy
47 of the page created from the page source window. After saving this
48 source, it's a good idea to put a&nbsp; &lt;BASE &gt; element in the
49 HEAD so that any images/external style sheet or scripts that use a
50 relative path will get loaded. After the BASE element has been added,
51 load the local copy into the browser and verify that problem is still
52 occurring. In this case, let's assume the problem is still present.
53 </p>
54 <p>
55 In general, it's best to start from the top of the &lt;DOCTYPE&gt; and
56 work down through the HEAD to the BODY element. Take a look at the HTML
57 file in a text editor and view what types of elements are present in the
58 &lt;head&gt;. Typically, the HEAD will include the &lt;title&gt;
59 element, which is required, and elements such as &lt;link&gt;,
60 &lt;style&gt; and &lt;script&gt;.
61 </p>
62 <p>
63 The reduction process is to remove one element at a time, save, and reload the
64 test case. If you have removed the element and the page is still
65 displaying the problem, continue with the next element. If removing an
66 element in the head causes the problem to not occur, you may have found
67 one piece in of the problem. Re-add this element back into the head,
68 reload the page and confirm the problem is still occurring and move
69 on to the next element in the head.
70 </p>
71 <p>
72 Once the HEAD element has been reduced, you need to start reducing
73 the number of required elements in the BODY. This will tend to be the
74 most time consuming since hundreds (thousands) of elements will be
75 present. The general practice is start removing elements by both their
76 &lt;start&gt; and &lt;/end&gt; elements. This is especially true for
77 tables, which are frequently nested. You can speed up this process by
78 selecting groups of elements and removing them but ideally you need to
79 save and reload the test case each time to verify the problem is
80 happening.
81 </p>
82 <p>
83 Another way to help you identify unnecessary elements is to temporary
84 uncheck 'Enable Javascript' in the Preferences. If you turn this option
85 off and loading your test case still reproduces the problem, then any
86 script elements that are present can be removed since they are not a
87 factor in this issue. Let's say that you have reduced the page down to
88 a nested table with an ordered list with an &lt;link&gt; element that need
89 to be present. It's good practice to identify that CSS rule that is
90 being in the external file and add it directly to the test case. Create
91 a &lt;style&gt; &lt;/style&gt; in the head and copy/paste the contents
92 of the .css file into this style element. Remove the &lt;link&gt; and
93 save the changes. Load the test case and verify the problem is still
94 occurring. Now manually delete or comment out each CSS rule until you
95 have just the required set of rules to reproduce.
96 </p>
97 </div>
98 </body>
99 </html>