More adjustments of pixel utilization

Make test title sticky
Make parametrization part of name normal font size

pytest_reporter_html1/plugin.py

@@ -27,14 +27,14 @@
     "passed": ("#43A047", "#FFFFFF"),
     "failed": ("#F44336", "#FFFFFF"),
     "error": ("#B71C1C", "#FFFFFF"),
-    "xfailed": ("#EF9A9A", "#333333"),
-    "xpassed": ("#A5D6A7", "#333333"),
+    "xfailed": ("#EF9A9A", "#222222"),
+    "xpassed": ("#A5D6A7", "#222222"),
     "skipped": ("#9E9E9E", "#FFFFFF"),
-    "rerun": ("#FBC02D", "#333333"),
-    "warning": ("#FBC02D", "#333333"),
+    "rerun": ("#FBC02D", "#222222"),
+    "warning": ("#FBC02D", "#222222"),
     "green": ("#43A047", "#FFFFFF"),
     "red": ("#E53935", "#FFFFFF"),
-    "yellow": ("#FBC02D", "#333333"),
+    "yellow": ("#FBC02D", "#222222"),
 }
 
 

pytest_reporter_html1/templates/html1/index.html

@@ -34,7 +34,7 @@
               <td>
                 {% if value is mapping %}
                   {% for key, value in value.items() %}
-                    {{ key }}: {{ value }}<br/>
+                    {{ key }}: {{ value }}<br>
                   {% endfor %}
                 {% else %}
                   {{ value|urlize }}

pytest_reporter_html1/templates/html1/module.html

@@ -7,7 +7,12 @@
         <div class="status badge {{ test.status.category }} {{ test.status.style|join(' ') }}">{{ test.status.word }}</div>
         <h3 class="test-name">
           {% block test_name scoped %}
-          {{ test.item.nodeid.split('::')[1:]|join('::') }}
+          {% set name = test.item.nodeid.split('::')[1:]|join('::') %}
+          {% set funcname, _, params = name.partition('[') %}
+          <span class="funcname">{{ funcname }}</span>
+          {%- if params -%}
+            <span class="params">[{{ params }}</span>
+          {% endif %}
           {% endblock %}
         </h3>
         <div class="duration">{{ test.phases|sum('report.duration')|timedelta }}</div>
@@ -79,7 +84,7 @@ <h3 class="test-name">
       </table>
       {% for phase in test.phases if phase.call.excinfo %}
         <div class="repr">
-          <pre>{{ phase.call.excinfo.getrepr(style='short', chain=False) }}</pre>
+          <pre>{{ phase.call.excinfo.getrepr(style='no', chain=False) }}</pre>
         </div>
       {% endfor %}
       <div class="test-phases">

pytest_reporter_html1/templates/html1/style.css

@@ -26,7 +26,7 @@ body {
 
 @media only screen {
     body {
-        background-color: #f8f8f8;
+        background-color: #f3f3f3;
         color: #222222;
     }
 }
@@ -36,8 +36,8 @@ pre {
     font-size: 87.5%;
     white-space: pre-wrap;
     word-wrap: break-word;
-    padding: 0.7rem;
-    margin: 0.7rem 0;
+    padding: 0.75rem;
+    margin: 0.75rem 0;
     border: 1px solid #c7c7c7;
     border-radius: 4px;
 }
@@ -52,7 +52,7 @@ a:hover {
 
 @media only screen {
     .container {
-        margin: 1rem 2%;
+        margin: 0 2%;
     }
 }
 
@@ -80,8 +80,8 @@ a:hover {
 
     {% for category, (bg, fg) in colors.items() %}
     .status.{{ category }} {
-        background-color: {{ bg }} !important;
-        color: {{ fg }} !important;
+        background-color: {{ bg }};
+        color: {{ fg }};
     }
     {% endfor %}
 }
@@ -90,18 +90,13 @@ details > summary {
     display: block;
     cursor: pointer;
     list-style: none;
-    padding: 0.4rem;
     border-radius: 4px;
 }
 
 details > summary:focus {
     outline: 0;
 }
 
-details > summary:hover {
-    background-color: rgba(200, 200, 200, 0.2);
-}
-
 details > summary::-webkit-details-marker {
     display: none;
 }
@@ -112,8 +107,8 @@ details > summary::-webkit-details-marker {
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
-    width: 0.7em;
-    height: 0.7em;
+    width: 0.75rem;
+    height: 0.75rem;
     display: inline-block;
     justify-self: end;
     /* transform: rotate(0deg); */
@@ -124,14 +119,9 @@ details[open] > summary > ::before {
     transform: rotate(90deg);
 }
 
-.content {
-    padding: 0.4rem;
-    margin-bottom: 0.7rem;
-}
-
 .duration {
     display: none;
-    font-size: 85%;
+    font-size: 0.875em;
     font-weight: normal;
     color: #888888;
 }
@@ -144,25 +134,21 @@ details[open] > summary > ::before {
 header {
     background-color: #455A64;
     color: white;
-    padding: 0.7rem 0;
+    padding: 1rem 0;
 }
 
 h1 {
     margin: 0;
 }
 
 section {
-    padding: 0.7rem 0;
+    padding: 0.75rem 0;
 }
 
 /**********************************************
  SUMMARY
 **********************************************/
 
-#summary {
-    background-color: #ECEFF1;
-}
-
 @media only screen and (min-width: 1024px) {
     #summary > .container {
         display: grid;
@@ -181,7 +167,7 @@ section {
 
 .metadata th {
     font-weight: bold;
-    padding-right: 0.7rem;
+    padding-right: 0.75rem;
 }
 
 .metadata td {
@@ -191,7 +177,7 @@ section {
 .graph {
     display: grid;
     grid-template-columns: minmax(100px, 250px) auto;
-    grid-gap: 0.7rem;
+    grid-gap: 0.75rem;
     align-items: center;
     justify-content: center;
 }
@@ -203,7 +189,7 @@ section {
 
 .graph svg text {
     font-size: 10px;
-    fill: #333333;
+    fill: #444444;
 }
 
 .legend {
@@ -221,7 +207,7 @@ section {
 #warnings > .container {
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-gap: 0.7rem;
+    grid-gap: 0.75rem;
     align-items: start;
 }
 
@@ -233,10 +219,22 @@ section {
 .file-title {
     display: grid;
     grid-template-columns: auto auto 1fr auto;
-    grid-gap: 0.7rem;
+    grid-gap: 0.75rem;
     align-items: center;
 }
 
+.file > summary {
+    padding: 0.4rem 0.5rem;
+}
+
+.file > summary:hover {
+    background-color: rgba(200, 200, 200, 0.2);
+}
+
+.file > .content {
+    margin-bottom: 0.75rem;
+}
+
 @media only print {
     .file > .title {
         border-bottom: 1px solid gray;
@@ -245,7 +243,7 @@ section {
 
 .fspath {
     margin: 0;
-    font-size: 1.1em;
+    font-size: 1.125em;
     word-break: break-all;
 }
 
@@ -255,7 +253,7 @@ section {
 
 .counts > span {
     display: inline-block;
-    margin-right: 0.3em;
+    margin-right: 5px;
 }
 
 
@@ -264,21 +262,35 @@ section {
 **********************************************/
 
 .test > summary {
-    border-radius: 0;
+    position: sticky;
+    top: 0;
+    z-index: 100000;
+    /* border-radius: 0; */
+    padding: 0.5rem;
+    padding-left: 0.75rem;
+    background-color: #ffffff;
+}
+
+.test > summary:hover {
+    background-color: #f6f6f6;
 }
 
 .test:not(:last-child) {
     border-bottom: 1px solid #e9e9e9;
 }
 
+.test > .content {
+    padding: 0 0.75rem 0.75rem;
+}
+
 .status {
     font-weight: bold;
 }
 
 .test-title {
     display: grid;
     grid-template-columns: auto 5em 1fr auto;
-    grid-gap: 0.7rem;
+    grid-gap: 0.75rem;
     align-items: center;
     /* justify-content: start; */
 }
@@ -295,6 +307,10 @@ section {
     word-break: break-all;
 }
 
+.test-name > .params {
+    font-weight: normal;
+}
+
 .documentation p {
     margin-top: 0;
     margin-bottom: 1em;
@@ -317,29 +333,41 @@ section {
 
 .test-phases {
     border-left: 2px solid #dddddd;
-    margin-left: 0.7rem;
+    margin-left: 0.75rem;
 }
 
 .phase {
     position: relative;
-    padding-left: 0.7rem;
+    padding-left: 0.9rem;
     margin-bottom: 0;
     border-radius: 0;
 }
 
+.phase > summary {
+    padding: 0.4rem;
+    /* margin-left: 0.2rem; */
+}
+
+.phase > summary:hover {
+    background-color: #f6f6f6;
+}
+
+.phase > .content {
+    /* padding-left: 0.2rem; */
+}
+
 .phase .status {
     position: absolute;
     display: inline-block;
     left: -1px;
-    margin-top: -0.3em;
+    margin-top: -0.4rem;
     padding: 0;
     transform: translateX(-50%);
-    width: 1.4em;
-    height: 1.4em;
+    width: 1.5rem;
+    height: 1.5rem;
     text-align: center;
     border-radius: 500%;
-    border: 2px solid white;
-    background-color: #cccccc;
+    border: 3px solid white;
     background-size: 50%;
     background-repeat: no-repeat;
     background-position: center;
@@ -378,7 +406,8 @@ section {
 **********************************************/
 
 footer {
-    font-size: 85%;
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
     font-style: italic;
     color: #999999;
     text-align: right;

tests/samples/sample_test_info.py

@@ -1,9 +1,9 @@
 import pytest
 
 
-@pytest.mark.parametrize("i", range(3))
-def test_parametrized(i):
-    assert i < 2
+@pytest.mark.parametrize("parameter", ["one", "two", "three"])
+def test_parametrized(parameter):
+    assert parameter != "three"
 
 
 @pytest.mark.mark1