mozilla-central/testing/web-platform/tests/css/css-overflow/targeted-scroll-marker-selection-with-transition.tentative.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: selection of scroll-markers for targeted scrolls (with transitions mid-scroll)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<script src="support/scroll-marker-support.js"></script>
</head>
<body>
<style>
.wrapper {
display: grid;
justify-content: center;
}
.carousel {
display: grid;
grid-auto-flow: column;
width: 1600px;
height: 512px;
overflow-x: scroll;
scroll-snap-type: x mandatory;
list-style-type: none;
scroll-behavior: smooth;
border: solid 2px grey;
padding-top: 10%;
text-align: center;
counter-set: markeridx -1;
&>.item {
scroll-snap-align: center;
height: 80%;
width: 318px;
border: 1px solid;
place-content: center;
&::scroll-marker {
content: counter(markeridx);
counter-increment: markeridx;
align-content: center;
text-align: center;
width: 35px;
height: 35px;
border: 3px solid gray;
border-radius: 50%;
margin: 3px;
background-color: red;
}
&::scroll-marker:target-current {
background-color: green;
}
}
.item.active>p {
font-size: 2em;
}
.item>p {
transition: font-size 1s ;
}
scroll-marker-group: after;
&::scroll-marker-group {
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border: solid 1px black;
border-radius: 30px;
}
}
</style>
<div class="wrapper" id="wrapper">
<div class="carousel" id="carousel">
<div class="item" id="item0" tabindex=0><p>0</p></div>
<div class="item" id="item1" tabindex=0><p>1</p></div>
<div class="item" id="item2" tabindex=0><p>2</p></div>
<div class="item" id="item3" tabindex=0><p>3</p></div>
<div class="item" id="item4" tabindex=0><p>4</p></div>
<div class="item" id="item5" tabindex=0><p>5</p></div>
<div class="item" id="item6" tabindex=0><p>6</p></div>
<div class="item" id="item7" tabindex=0><p>7</p></div>
<div class="item" id="item8" tabindex=0><p>8</p></div>
<div class="item" id="item9" tabindex=0><p>9</p></div>
<div class="item" id="item10" tabindex=0><p>10</p></div>
<div class="item" id="item11" tabindex=0><p>11</p></div>
<div class="item" id="item12" tabindex=0><p>12</p></div>
<div class="item" id="item13" tabindex=0><p>13</p></div>
<div class="item" id="item14" tabindex=0><p>14</p></div>
<div class="item" id="item15" tabindex=0><p>15</p></div>
</div>
</div>
<script>
const carousel = document.getElementById("carousel");
const items = document.querySelectorAll(".item");
const wrapper = document.getElementById("wrapper");
RED = "rgb(255, 0, 0)";
GREEN = "rgb(0, 128, 0)";
const max_scroll_offset = carousel.scrollWidth - carousel.clientWidth;
async function testTargetedHasActiveMarker(test, element, expected_idx) {
// Start from somewhere in the middle, ensuring that scrolling to the
// extremes generates scrollend events.
await waitForScrollReset(test, carousel, max_scroll_offset / 2);
const color =
getComputedStyle(items[expected_idx], "::scroll-marker").backgroundColor;
assert_not_equals(color, GREEN,
`Target item ${expected_idx} is not selected yet.`);
const scrollend_promise = waitForScrollendEventNoTimeout(carousel);
element.classList.add("active");
element.scrollIntoView({behavior: "smooth"});
await scrollend_promise;
verifySelectedMarker(expected_idx, items, GREEN, RED);
element.classList.remove("active");
}
promise_test(async(t) => {
const target_item = items[1];
await testTargetedHasActiveMarker(t, target_item, 1);
}, "scroll-marker of target (idx 1) of scrollIntoView is selected");
promise_test(async(t) => {
const target_item = items[14];
await testTargetedHasActiveMarker(t, target_item, 14);
}, "scroll-marker of target (idx 14) of scrollIntoView is selected");
</script>
</body>
</html>