[Piglit] [PATCH v2 2/8] html: Use CSS3 for zebra-striping the tables.
Dylan Baker
baker.dylan.c at gmail.com
Tue Apr 30 10:34:38 PDT 2013
From: Kenneth Graunke <kenneth at whitecape.org>
Most browsers support the :nth-child selector by now, which allows us to
zebra-stripe the tables in CSS rather than making the python code
annotate every row with an 'a' or 'b' class.
While we're at it, stripe the pass/fail/crash results too. Based on
some CSS fragments, this was the intent all along, but didn't work.
This also changes the striping slightly: it now stripes purely based on
whether the row is even/odd, rather than striping on a per-group basis.
Signed-off-by: Kenneth Graunke <kenneth at whitecape.org>
Reviewed-by: Dylan Baker <baker.dylan.c at gmail.com>
---
piglit-summary-html.py | 17 +------
templates/index.css | 94 ++++++++-------------------------------
templates/index_test.html | 2 +-
templates/index_test_testrun.html | 2 +-
templates/result.css | 12 ++---
templates/result.html | 2 +-
templates/result_detail.html | 4 +-
7 files changed, 33 insertions(+), 100 deletions(-)
diff --git a/piglit-summary-html.py b/piglit-summary-html.py
index 1f55928..263a4f0 100755
--- a/piglit-summary-html.py
+++ b/piglit-summary-html.py
@@ -110,15 +110,9 @@ def buildDetails(testResult):
details.sort(lambda a, b: len(a[1])-len(b[1]))
text = ''
- alternate = 'a'
for name, value in details:
text += ResultDetail % locals()
- if alternate == 'a':
- alternate = 'b'
- else:
- alternate = 'a'
-
return text
@@ -156,11 +150,10 @@ def hrefFromParts(codename, path):
outStr = outStr[1:]
return outStr
-def buildTestSummary(indent, alternate, testsummary):
+def buildTestSummary(indent, testsummary):
path = testsummary.path
name = testsummary.name
testruns = "".join([IndexTestTestrun % {
- 'alternate': alternate,
'status': result.status,
'link': hrefFromParts(result.testrun.codename, path)
} for result in testsummary.results])
@@ -193,7 +186,6 @@ def buildGroupSummaryTestrun(groupresult):
def buildGroupSummary(indent, groupsummary, showcurrent):
indent_inc = 1.75 # em
items = ''
- alternate = 'a'
path = groupsummary.path
name = groupsummary.name
names = groupsummary.children.keys()
@@ -217,12 +209,7 @@ def buildGroupSummary(indent, groupsummary, showcurrent):
'group': buildGroupSummary(indent + indent_inc, child, showcurrent)
}
else:
- items = items + buildTestSummary(indent + indent_inc, alternate, child)
-
- if alternate == 'a':
- alternate = 'b'
- else:
- alternate = 'a'
+ items = items + buildTestSummary(indent + indent_inc, child)
testruns = "".join([buildGroupSummaryTestrun(result)
for result in groupsummary.results])
diff --git a/templates/index.css b/templates/index.css
index 6d9e903..0e48e1c 100644
--- a/templates/index.css
+++ b/templates/index.css
@@ -31,92 +31,36 @@ td:first-child > div {
background-color: #c8c838
}
-.a {
- background-color: #ffff95
-}
-
-.b {
- background-color: #e1e183
-}
-
-.skip {
- text-align: right;
- background-color: #b0b0b0;
-}
-
-.warn {
- text-align: right;
- background-color: #ff9020;
-}
-
-.fail {
+td.skip, td.warn, td.fail, td.pass, td.trap, td.abort, td.crash {
text-align: right;
- background-color: #ff2020;
}
-.pass {
- text-align: right;
- background-color: #20ff20;
-}
-
-.crash {
- text-align: right;
- background-color: #000000;
+td.trap, td.abort, td.crash {
color: #ffffff;
}
-.skipa {
- text-align: right;
- background-color: #d0d0d0;
-}
-
-.warna {
- text-align: right;
- background-color: #ffc050;
-}
-
-.faila {
- text-align: right;
- background-color: #ff5050;
-}
-
-.passa {
- text-align: right;
- background-color: #50ff50;
-}
-
-.crasha {
- text-align: right;
- background-color: #141414;
+td.trap a, td.abort a, td.crash a {
color: #ffffff;
}
-.skipb {
- text-align: right;
- background-color: #c0c0c0;
-}
+tr:nth-child(odd) > td > div:not(.head) { background-color: #ffff95 }
+tr:nth-child(even) > td > div:not(.head) { background-color: #e1e183 }
-.warnb {
- text-align: right;
- background-color: #ffa040;
-}
+tr:nth-child(odd) td.pass { background-color: #20ff20; }
+tr:nth-child(even) td.pass { background-color: #15e015; }
-.failb {
- text-align: right;
- background-color: #ff4040;
-}
+tr:nth-child(odd) td.skip { background-color: #b0b0b0; }
+tr:nth-child(even) td.skip { background-color: #a0a0a0; }
-.passb {
- text-align: right;
- background-color: #40ff40;
-}
+tr:nth-child(odd) td.warn { background-color: #ff9020; }
+tr:nth-child(even) td.warn { background-color: #ef8010; }
-.crashb {
- text-align: right;
- background-color: #0a0a0a;
- color: #ffffff;
-}
+tr:nth-child(odd) td.fail { background-color: #ff2020; }
+tr:nth-child(even) td.fail { background-color: #e00505; }
-td.crasha a, td.crashb a {
- color: #ffffff;
-}
+tr:nth-child(odd) td.trap { background-color: #111111; }
+tr:nth-child(even) td.trap { background-color: #000000; }
+tr:nth-child(odd) td.abort { background-color: #111111; }
+tr:nth-child(even) td.abort { background-color: #000000; }
+tr:nth-child(odd) td.crash { background-color: #111111; }
+tr:nth-child(even) td.crash { background-color: #000000; }
diff --git a/templates/index_test.html b/templates/index_test.html
index 4b0964e..2ec6d07 100644
--- a/templates/index_test.html
+++ b/templates/index_test.html
@@ -1,4 +1,4 @@
<tr>
- <td><div style="margin-left: %(indent)sem" class="%(alternate)s">%(name)s</div></td>
+ <td><div style="margin-left: %(indent)sem">%(name)s</div></td>
%(testruns)s
</tr>
diff --git a/templates/index_test_testrun.html b/templates/index_test_testrun.html
index 43de898..8a8b098 100644
--- a/templates/index_test_testrun.html
+++ b/templates/index_test_testrun.html
@@ -1 +1 @@
-<td class="%(status)s%(alternate)s"><a href="%(link)s">%(status)s</a></td>
+<td class="%(status)s"><a href="%(link)s">%(status)s</a></td>
diff --git a/templates/result.css b/templates/result.css
index 7c6a557..19bfedc 100644
--- a/templates/result.css
+++ b/templates/result.css
@@ -12,24 +12,26 @@ table {
border-collapse: collapse;
}
-.head {
+th {
background-color: #c8c838
}
-.a {
+/* Second column (details) */
+tr:nth-child(even) > td {
background-color: #ffff95
}
-.b {
+tr:nth-child(odd) > td {
background-color: #e1e183
}
-.bara {
+/* First column (labels) */
+tr:nth-child(even) > td:first-child {
vertical-align: top;
background-color: #ffff85;
}
-.barb {
+tr:nth-child(odd) > td:first-child {
vertical-align: top;
background-color: #d1d173;
}
diff --git a/templates/result.html b/templates/result.html
index f90ff3d..5fed593 100644
--- a/templates/result.html
+++ b/templates/result.html
@@ -16,7 +16,7 @@
</p>
<h2>Details</h2>
<table>
- <tr class="head">
+ <tr>
<th>Detail</th>
<th>Value</th>
</tr>
diff --git a/templates/result_detail.html b/templates/result_detail.html
index d735d0d..8398fa3 100644
--- a/templates/result_detail.html
+++ b/templates/result_detail.html
@@ -1,4 +1,4 @@
<tr>
- <td class="bar%(alternate)s">%(name)s</td>
- <td class="%(alternate)s">%(value)s</td>
+ <td>%(name)s</td>
+ <td>%(value)s</td>
</tr>
--
1.8.1.4
More information about the Piglit
mailing list