diff --git a/resources/tentative/interactive-catalog-navigation/assets/barbecue.jpg b/resources/tentative/interactive-catalog-navigation/assets/barbecue.jpg new file mode 100644 index 000000000..696282096 Binary files /dev/null and b/resources/tentative/interactive-catalog-navigation/assets/barbecue.jpg differ diff --git a/resources/tentative/interactive-catalog-navigation/assets/donut.jpg b/resources/tentative/interactive-catalog-navigation/assets/donut.jpg new file mode 100644 index 000000000..cf034b6e5 Binary files /dev/null and b/resources/tentative/interactive-catalog-navigation/assets/donut.jpg differ diff --git a/resources/tentative/interactive-catalog-navigation/assets/ice-cream.jpg b/resources/tentative/interactive-catalog-navigation/assets/ice-cream.jpg new file mode 100644 index 000000000..d6396d921 Binary files /dev/null and b/resources/tentative/interactive-catalog-navigation/assets/ice-cream.jpg differ diff --git a/resources/tentative/interactive-catalog-navigation/assets/pizza.jpg b/resources/tentative/interactive-catalog-navigation/assets/pizza.jpg new file mode 100644 index 000000000..0bd4e7721 Binary files /dev/null and b/resources/tentative/interactive-catalog-navigation/assets/pizza.jpg differ diff --git a/resources/tentative/interactive-catalog-navigation/assets/wine2.jpg b/resources/tentative/interactive-catalog-navigation/assets/wine2.jpg new file mode 100644 index 000000000..620f0314e Binary files /dev/null and b/resources/tentative/interactive-catalog-navigation/assets/wine2.jpg differ diff --git a/resources/tentative/interactive-catalog-navigation/css/test.css b/resources/tentative/interactive-catalog-navigation/css/test.css new file mode 100644 index 000000000..089dae4c3 --- /dev/null +++ b/resources/tentative/interactive-catalog-navigation/css/test.css @@ -0,0 +1,241 @@ +html { + font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif; +} + +body { + background: rgb(104, 14, 122); + color: seashell; +} + +#overlay { + position: fixed; + top: 0; + left: 0; + z-index: 99; + width: 100%; + height: 100%; + pointer-events: none; +} + +.slide-section { + padding-top: 1%; + display: flex; + justify-content: center; + align-items: center; + height: 100px; + max-width: 650px; + margin: 0 auto; +} + +.box { + position: relative; + flex: 1 1 10%; + height: 100%; + transition: all 100ms ease-out; + text-align: end; + overflow: hidden; +} + +.box img { + width: 100%; + height: 100%; + object-fit: cover; + opacity: 0.4; +} + +.active { + flex-basis: 50%; + margin-right: 0; + margin-left: 0; +} + +.active > img { + opacity: 1; +} + +.active > span { + opacity: 0; +} + +.box span { + position: absolute; + top: 10px; + right: 13px; + opacity: 0.7; + font-size: 1.125em; + font-weight: 500; +} + +.box-1 { + z-index: 5; +} + +.box-2 { + z-index: 4; +} + +.box-3 { + z-index: 3; +} + +.box-4 { + z-index: 2; +} + +.box-5 { + z-index: 1; +} + +.box:not(.active):hover { + cursor: pointer; + flex-basis: 20%; +} + +.box:not(.active):hover > img { + opacity: 0.7; +} + +.table-section { + padding-top: 1%; + display: flex; + justify-content: center; + max-width: 1000px; + margin: 0 auto; +} + +table { + background: rgba(0,0,0,0.3); + border-radius: 0.25em; + border-collapse: collapse; + margin: 0.25em; + width: 95%; +} + +th, +td { + font-size: 1em; + padding: 1em; +} + +th { + border-bottom: 1px solid #707070; + text-transform: uppercase; + color:gold; + text-align: left; + font-size: 0.875em; + letter-spacing: 0.05em; +} + +td .price { + display: block; + text-align: center; + font: bold 16px Georgia, Serif; + color: #2b106a; + background: #be93fd; + border: 5px solid #a178df; + height: 20px; + width: 50px; + border-radius: 100px; + box-shadow: 0 -5px 10px #ddd inset, 0 3px 0 #999 inset; +} + +table thead tr th:nth-child(1), +table tbody tr td:nth-child(1) { + font-size: 1.125em; + text-align: center; + padding-right: 1.25em; + opacity: 0.7; +} + +table tbody tr td:nth-child(2) { + font-size: 1.125em; + font-weight: 650; +} + +table thead tr th:last-child, +table tbody tr td:last-child { + text-align: right; +} + +.rating { + perspective: 250px; + top: 40%; + width: 100%; +} + +.rating span { + font-size: 16px; + color: #fff; + opacity: 0.5; + transition: all 100ms; + display: inline-block; + transform: rotateX(45deg); + transform-origin: center bottom; + backdrop-filter: blur(10px); +} + +.rating span.select { + color: #ff0; + opacity: 1; + transform: rotateX(0deg); + animation: blinker 100ms alternate ease-in-out; +} + +.bar { + position: relative; + border: 3px solid #c34a36; + border-radius: 20px; +} + +.bar div { + position: relative; + width: 0; + height: 15px; + border-radius: 10px; + background-color: #ff6f91; + text-align: right; +} + +.bar span { + font-weight: 600; +} + +@keyframes blinker { + 0% { + transform: scale(0.2); + } + + 100% { + transform: scale(1); + } +} + +@keyframes progress-80-fill { + 100% { + width: 80%; + } +} + +@keyframes progress-85-fill { + 100% { + width: 85%; + } +} + +@keyframes progress-90-fill { + 100% { + width: 90%; + } +} + +@keyframes progress-95-fill { + 100% { + width: 95%; + } +} + +@keyframes progress-98-fill { + 100% { + width: 98%; + } +} diff --git a/resources/tentative/interactive-catalog-navigation/index.html b/resources/tentative/interactive-catalog-navigation/index.html new file mode 100644 index 000000000..4fa34730a --- /dev/null +++ b/resources/tentative/interactive-catalog-navigation/index.html @@ -0,0 +1,48 @@ + + + + + Interacting with Featured Page to Navigate or Search Items + + + + +
+
+ +
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ +
+ + + + + + + + + + + + +
#NameCategoryPricePopularityRating
+
+ + + diff --git a/resources/tentative/interactive-catalog-navigation/scripts/test.js b/resources/tentative/interactive-catalog-navigation/scripts/test.js new file mode 100644 index 000000000..e006b55d2 --- /dev/null +++ b/resources/tentative/interactive-catalog-navigation/scripts/test.js @@ -0,0 +1,148 @@ +const columNum = 6; +// you can customize table rows by changing 'rowNum' value +const rowNum = 100; +const dataMap = new Map([ + [ + "Pizza", + { + category: "Food", + price: "$5", + popularity: "80%", + rating: 4, + }, + ], + [ + "Wine", + { + category: "Drink", + price: "$25", + popularity: "85%", + rating: 5, + }, + ], + [ + "Ice cream", + { + category: "Dessert", + price: "$3", + popularity: "90%", + rating: 1, + }, + ], + [ + "Barbecue", + { + category: "Food", + price: "$5", + popularity: "95%", + rating: 2, + }, + ], + [ + "Donut", + { + category: "Dessert", + price: "$2", + popularity: "98%", + rating: 3, + }, + ], +]); + +function generateTableBody(name) { + let tableRows = document.createElement("tbody"); + for (let j = 1; j <= rowNum; j++) { + const tableRow = document.createElement("tr"); + j == 1 ? tableRow.classList.add("tr-active") : ""; + + for (let i = 1; i <= columNum; i++) { + let tableData = document.createElement("td"); + switch (i) { + case 1: { + tableData.textContent = `${j}`; + break; + } + + case 2: { + tableData.textContent = `${name} - ${j}`; + break; + } + + case 3: { + tableData.textContent = dataMap.get(name).category; + break; + } + + case 4: { + tableData.innerHTML = `
${dataMap.get(name).price}
`; + break; + } + + case 5: { + tableData.innerHTML = ` +
+
+ ${dataMap.get(name).popularity} +
+
`; + break; + } + + case 6: { + const rating = dataMap.get(name).rating; + let ratingStarHTML = `
`; + for (let m = 1; m <= 5; m++) { + let str = ""; + if (j == 1 && m == rating) { + str = `id="monitored_span"`; + } + + ratingStarHTML += `★`; + if (m == 5) + ratingStarHTML += `
`; + } + tableData.innerHTML = ratingStarHTML; + break; + } + } + tableRow.appendChild(tableData); + } + tableRows.appendChild(tableRow); + } + return tableRows.innerHTML; +} + +function refreshTable(name, need_measure) { + const tableBody = document.getElementById("table-body"); + tableBody.innerHTML = ""; + tableBody.innerHTML = generateTableBody(name); +} + +const $boxes = document.querySelectorAll(".box"); +[].slice.call($boxes).forEach(function ($el, index) { + let i = index + 1; + $el.classList.add("box-" + i); + $el.dataset.box = i; +}); + +/* initialize */ +// set the 3rd image as active +const box3Element = document.querySelector(".box-3"); +box3Element.classList.add("active"); + +// set corresponding table data +refreshTable("Ice cream", false); + +let $activeBox = document.querySelector(".active"); +$boxes.forEach((box) => { + box.addEventListener("click", () => { + if ($activeBox) { + $activeBox.classList.remove("active"); + } + box.classList.add("active"); + $activeBox = box; + const boxIndex = box.dataset.box; + refreshTable([...dataMap.keys()][boxIndex - 1], true); + }); +}); + diff --git a/resources/tests.mjs b/resources/tests.mjs index 87c8188ad..4c8a702b9 100644 --- a/resources/tests.mjs +++ b/resources/tests.mjs @@ -660,6 +660,26 @@ Suites.push({ ], }); +Suites.push({ + name: "Interactive-Catalog-Navigation", + url: "tentative/interactive-catalog-navigation/index.html", + async prepare(page) { + await page.waitForElement("#monitored_span"); + }, + tests: [ + new BenchmarkTestStep("SwitchImage", (page) => { + let ele = page.querySelector(`.box-4`); + ele.click(); + page.layout(); + }), + new BenchmarkTestStep("SkipImages", (page) => { + let ele = page.querySelector(`.box-1`); + ele.click(); + page.layout(); + }), + ], +}); + Object.freeze(Suites); Suites.forEach((suite) => { if (!suite.tags)