Create updated tests for APG design pattern example: Vertical Temperature Slider

tests/vertical-temperature-slider/data/references.csv

@@ -2,7 +2,7 @@ refId,value
 author,Isabel Del Castillo
 title,Vertical Temperature Slider
 authorEmail,[email protected]
-reference,reference/2021-9-21_142211/slider-temperature.html
+reference,reference/2022-8-2_134950/slider-temperature.html
 designPattern,https://w3c.github.io/aria-practices/#slider
 example,https://w3c.github.io/aria-practices/examples/slider/slider-temperature.html
 slider,https://w3c.github.io/aria/#slider

tests/vertical-temperature-slider/reference/2022-8-2_134950/css/slider-color-viewer.css

@@ -0,0 +1,120 @@
+/* CSS Document */
+
+.color-viewer-sliders label {
+  display: block;
+}
+
+.color-viewer-sliders .color-box {
+  width: 200px;
+  height: 200px;
+  border: black solid medium;
+  text-align: center;
+  padding: 0.25em;
+  forced-color-adjust: none;
+}
+
+.color-viewer-sliders .color-info {
+  padding-top: 5px;
+}
+
+.color-viewer-sliders .color-info label {
+  margin-top: 0.25em;
+  display: block;
+}
+
+.color-slider {
+  margin: 0;
+  margin-bottom: 1em;
+  padding: 2px;
+  touch-action: pan-y;
+  width: 350px;
+  outline: none;
+}
+
+.color-slider div,
+.color-slider svg {
+  display: block;
+  width: 350px;
+}
+
+.color-slider-label {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+.color-slider .value {
+  color: currentcolor;
+  fill: currentcolor;
+}
+
+.color-slider .valueBackground {
+  fill: white;
+  stroke-width: 0;
+}
+
+.color-slider .rail {
+  fill: #bbb;
+  stroke: currentcolor;
+  stroke-width: 2px;
+  opacity: 0.8;
+}
+
+.color-slider .fill {
+  stroke-width: 0;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.color-slider.red .fill {
+  fill: red;
+}
+
+.color-slider.green .fill {
+  fill: green;
+}
+
+.color-slider.blue .fill {
+  fill: blue;
+}
+
+.color-slider .thumb {
+  fill: #666;
+  stroke: currentcolor;
+  stroke-width: 2px;
+}
+
+.color-slider .focus {
+  fill: transparent;
+  stroke: transparent;
+  stroke-width: 2px;
+}
+
+.color-slider:focus .value,
+.color-slider:hover .value {
+  font-weight: bold;
+}
+
+.color-slider:focus .fill,
+.color-slider:hover .fill {
+  opacity: 1;
+}
+
+.color-slider:focus .rail,
+.color-slider:hover .rail {
+  fill: transparent;
+  stroke: currentcolor;
+  opacity: 1;
+}
+
+.color-slider:focus .thumb,
+.color-slider:hover .thumb {
+  fill: #ddd;
+  stroke: currentcolor;
+  opacity: 1;
+}
+
+.color-slider:focus .focus,
+.color-slider:hover .focus {
+  stroke: currentcolor;
+}

tests/vertical-temperature-slider/reference/2022-8-2_134950/css/slider-multithumb.css

@@ -0,0 +1,88 @@
+/* CSS Document */
+
+.slider-multithumb {
+  padding: 6px;
+  width: 350px;
+  touch-action: pan-y;
+}
+
+.slider-multithumb svg {
+  forced-color-adjust: auto;
+}
+
+.slider-multithumb .slider-group {
+  color: black;
+}
+
+.slider-multithumb .slider-group .value {
+  font-size: 80%;
+  color: currentcolor;
+  fill: currentcolor;
+}
+
+.slider-multithumb .slider-group .rail {
+  stroke: currentcolor;
+  stroke-width: 2px;
+  fill-opacity: 0;
+}
+
+.slider-multithumb .slider-group .range {
+  fill: currentcolor;
+  opacity: 0.4;
+}
+
+.slider-multithumb .slider-group .thumb {
+  stroke-opacity: 0;
+  stroke-width: 2px;
+  fill: currentcolor;
+}
+
+.slider-multithumb .slider-group .focus-ring {
+  stroke-opacity: 0;
+  fill-opacity: 0;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Focus and hover styling */
+
+.slider-multithumb .slider-group g.rail,
+.slider-multithumb .slider-group g.focus {
+  color: currentcolor;
+}
+
+.slider-multithumb .slider-group.active g.rail {
+  opacity: 0.8;
+}
+
+.slider-multithumb .slider-group.active g.range {
+  fill: #005a9c;
+  fill-opacity: 1;
+}
+
+.slider-multithumb [role="slider"]:focus {
+  outline: none;
+  color: #005a9c;
+}
+
+.slider-multithumb [role="slider"]:hover .focus-ring {
+  stroke: currentcolor;
+  stroke-width: 1px;
+  stroke-opacity: 0.8;
+}
+
+.slider-multithumb [role="slider"]:hover .focus-ring,
+.slider-multithumb [role="slider"]:focus .focus-ring {
+  stroke: currentcolor;
+  stroke-opacity: 1;
+  stroke-width: 3px;
+}
+
+.slider-multithumb [role="slider"]:focus .thumb {
+  stroke: currentcolor;
+}
+
+.slider-multithumb [role="slider"]:focus .value {
+  color: currentcolor;
+  font-weight: bold;
+}

tests/vertical-temperature-slider/reference/2022-8-2_134950/css/slider-rating.css

@@ -0,0 +1,97 @@
+/* CSS Document */
+
+.rating-slider label {
+  display: block;
+}
+
+.rating-slider {
+  color: #005a9c;
+}
+
+.rating-slider svg {
+  forced-color-adjust: auto;
+  touch-action: pan-y;
+}
+
+.rating-slider svg .focus-ring {
+  fill: #eee;
+  stroke-width: 0;
+  fill-opacity: 0;
+}
+
+.rating-slider svg .star {
+  stroke-width: 2px;
+  stroke: currentcolor;
+  fill-opacity: 0;
+}
+
+.rating-slider svg .fill-left,
+.rating-slider svg .fill-right {
+  stroke-width: 0;
+  fill-opacity: 0;
+}
+
+.rating-slider[aria-valuenow="5"] svg .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="0.5"] svg .star-1 .fill-left {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="1"] svg .star-1 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="1.5"] svg .star-1 .star,
+.rating-slider[aria-valuenow="1.5"] svg .star-2 .fill-left {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="2"] svg .star-2 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="2.5"] svg .star-2 .star,
+.rating-slider[aria-valuenow="2.5"] svg .star-3 .fill-left {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="3"] svg .star-3 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="3.5"] svg .star-3 .star,
+.rating-slider[aria-valuenow="3.5"] svg .star-4 .fill-left {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="4"] svg .star-4 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="4.5"] svg .star-4 .star,
+.rating-slider[aria-valuenow="4.5"] svg .star-5 .fill-left {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+/* focus styling */
+
+.rating-slider:focus {
+  outline: none;
+}
+
+.rating-slider:focus svg .focus-ring {
+  stroke-width: 2px;
+  stroke: currentcolor;
+}

tests/vertical-temperature-slider/reference/2022-8-2_134950/css/slider-seek.css

@@ -0,0 +1,81 @@
+/* CSS Document */
+
+.slider-seek .label {
+  font-weight: bold;
+  font-size: 125%;
+}
+
+.slider-seek svg {
+  forced-color-adjust: auto;
+}
+
+.slider-seek text {
+  font-weight: bold;
+  fill: currentcolor;
+  font-family: sans-serif;
+}
+
+.slider-seek {
+  margin-top: 1em;
+  padding: 6px;
+  color: black;
+}
+
+.slider-slider .value {
+  position: relative;
+  top: 20px;
+  height: 1.5em;
+  font-size: 80%;
+}
+
+.slider-seek .temp-value {
+  padding-left: 24px;
+  font-size: 200%;
+}
+
+.slider-seek .rail {
+  stroke: currentcolor;
+  stroke-width: 2px;
+  fill: currentcolor;
+  fill-opacity: 25%;
+}
+
+.slider-seek .thumb {
+  stroke-width: 0;
+  fill: currentcolor;
+}
+
+.slider-seek .focus-ring {
+  stroke: currentcolor;
+  stroke-opacity: 0;
+  fill-opacity: 0;
+  stroke-width: 3px;
+  display: none;
+}
+
+.slider-seek .slider-group {
+  touch-action: pan-y;
+}
+
+.slider-seek .slider-group .value {
+  display: none;
+}
+
+/* Focus and hover styling */
+
+.slider-seek.focus [role="slider"] {
+  color: #005a9c;
+}
+
+.slider-seek [role="slider"]:focus {
+  outline: none;
+}
+
+.slider-seek [role="slider"]:focus .focus-ring {
+  display: block;
+  stroke-opacity: 1;
+}
+
+.slider-seek [role="slider"]:focus .value {
+  display: block;
+}