Supported div-pager

commit_hash:a078b1e95ea2fb80ec8116c845e82a0caff5cd41

client/android/compose/src/main/kotlin/com/yandex/div/compose/views/DivBlockView.kt

@@ -6,6 +6,7 @@ import com.yandex.div.compose.dagger.WithLocalComponent
 import com.yandex.div.compose.views.container.DivContainerView
 import com.yandex.div.compose.views.gallery.DivGalleryView
 import com.yandex.div.compose.views.image.DivImageView
+import com.yandex.div.compose.views.pager.DivPagerView
 import com.yandex.div.compose.views.modifiers.apply
 import com.yandex.div.compose.views.modifiers.applyPaddings
 import com.yandex.div.compose.utils.observedValue
@@ -34,6 +35,7 @@ internal fun DivBlockView(
             is Div.Gallery -> DivGalleryView(modifier, data.value)
             is Div.Image -> DivImageView(modifier.applyPaddings(data), data.value)
             is Div.Input -> DivInputView(modifier.applyPaddings(data), data.value)
+            is Div.Pager -> DivPagerView(modifier, data.value)
             is Div.Separator -> DivSeparatorView(modifier.applyPaddings(data), data.value)
             is Div.State -> DivStateView(modifier, data.value)
             is Div.Text -> DivTextView(modifier.applyPaddings(data), data.value)
@@ -41,7 +43,6 @@ internal fun DivBlockView(
             is Div.GifImage -> NotSupported("gif")
             is Div.Grid -> NotSupported("grid")
             is Div.Indicator -> NotSupported("indicator")
-            is Div.Pager -> NotSupported("pager")
             is Div.Select -> NotSupported("select")
             is Div.Slider -> NotSupported("slider")
             is Div.Switch -> NotSupported("switch")

client/android/compose/src/main/kotlin/com/yandex/div/compose/views/pager/DivPagerView.kt

@@ -0,0 +1,84 @@
+package com.yandex.div.compose.views.pager
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalLayoutDirection
+import com.yandex.div.compose.utils.observeInsets
+import com.yandex.div.compose.utils.observedValue
+import com.yandex.div2.Div
+import com.yandex.div2.DivPager
+import com.yandex.div2.DivVisibility
+
+@Composable
+internal fun DivPagerView(
+    modifier: Modifier,
+    data: DivPager,
+) {
+    val items = data.items.orEmpty().filter {
+        it.value().visibility.observedValue() != DivVisibility.GONE
+    }
+
+    if (items.isEmpty()) {
+        Box(modifier = modifier)
+        return
+    }
+
+    // TODO: register pager scroll state
+
+    PagerView(
+        modifier = modifier,
+        items = items,
+        data = data
+    )
+}
+
+@Composable
+private fun PagerView(
+    modifier: Modifier,
+    items: List<Div>,
+    data: DivPager,
+) {
+    val viewportSizePx = remember { mutableIntStateOf(0) }
+    val crossAxisBounded = remember { mutableStateOf(true) }
+
+    val isHorizontal = data.orientation.observedValue() == DivPager.Orientation.HORIZONTAL
+
+    Box(modifier.captureConstraints(isHorizontal, viewportSizePx, crossAxisBounded)) {
+        if (viewportSizePx.intValue <= 0) return@Box
+
+        val density = LocalDensity.current
+        val viewportSize = with(density) { viewportSizePx.intValue.toDp() }
+
+        PagerContent(
+            items = items,
+            isHorizontal = isHorizontal,
+            itemSpacing = data.itemSpacing.observedValue(),
+            paddings = data.paddings.observeInsets(),
+            layoutMode = data.layoutMode,
+            scrollAxisAlignment = data.scrollAxisAlignment.observedValue(),
+            crossAxisAlignment = data.crossAxisAlignment.observedValue(),
+            layoutDirection = LocalLayoutDirection.current,
+            defaultItem = data.defaultItem.observedValue().toInt().coerceIn(0, items.size - 1),
+            viewportSize = viewportSize,
+            crossAxisBounded = crossAxisBounded.value,
+        )
+    }
+}
+
+private fun Modifier.captureConstraints(
+    isHorizontal: Boolean,
+    onViewportSize: MutableState<Int>,
+    crossAxisBounded: MutableState<Boolean>,
+) = layout { measurable, constraints ->
+    onViewportSize.value = if (isHorizontal) constraints.maxWidth else constraints.maxHeight
+    crossAxisBounded.value = if (isHorizontal) constraints.hasBoundedHeight else constraints.hasBoundedWidth
+    val placeable = measurable.measure(constraints)
+    layout(placeable.width, placeable.height) { placeable.placeRelative(0, 0) }
+}

client/android/compose/src/main/kotlin/com/yandex/div/compose/views/pager/PagerChildModifier.kt

@@ -0,0 +1,81 @@
+package com.yandex.div.compose.views.pager
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+
+@Composable
+internal fun childModifier(
+    isHorizontal: Boolean,
+    viewportSize: Dp,
+    crossAxisBounded: Boolean,
+    listState: LazyListState,
+    paddings: PaddingValues,
+    pageSize: Dp?,
+    startPadding: Dp,
+    endPadding: Dp,
+    layoutDirection: LayoutDirection,
+    density: Density,
+): Modifier {
+    val scrollAxisModifier = scrollAxisSizeModifier(pageSize, isHorizontal, viewportSize, startPadding, endPadding)
+    val crossModifier = crossAxisSizeModifier(
+        isHorizontal = isHorizontal,
+        crossAxisBounded = crossAxisBounded,
+        viewportSize = listState.layoutInfo.viewportSize.crossAxisSize(isHorizontal),
+        paddings = paddings,
+        layoutDirection = layoutDirection,
+        density = density,
+    )
+    return crossModifier.then(scrollAxisModifier)
+}
+
+private fun crossAxisSizeModifier(
+    isHorizontal: Boolean,
+    crossAxisBounded: Boolean,
+    viewportSize: Int,
+    paddings: PaddingValues,
+    layoutDirection: LayoutDirection,
+    density: Density,
+): Modifier {
+    if (crossAxisBounded || viewportSize <= 0) {
+        return if (isHorizontal) Modifier.fillMaxHeight() else Modifier.fillMaxWidth()
+    }
+
+    val crossAxisPaddingPx = with(density) {
+        if (isHorizontal) {
+            (paddings.calculateTopPadding() + paddings.calculateBottomPadding()).roundToPx()
+        } else {
+            (paddings.calculateStartPadding(layoutDirection) + paddings.calculateEndPadding(layoutDirection)).roundToPx()
+        }
+    }
+
+    val contentSizePx = (viewportSize - crossAxisPaddingPx).coerceAtLeast(0)
+    return with(density) {
+        if (isHorizontal) Modifier.height(contentSizePx.toDp()) else Modifier.width(contentSizePx.toDp())
+    }
+}
+
+private fun scrollAxisSizeModifier(pageSize: Dp?, isHorizontal: Boolean, viewportSize: Dp, startPadding: Dp, endPadding: Dp): Modifier {
+    if (pageSize != null) {
+        return if (isHorizontal) Modifier.width(pageSize) else Modifier.height(pageSize)
+    }
+    val maxSize = (viewportSize - startPadding - endPadding).coerceAtLeast(0.dp)
+    return if (isHorizontal) Modifier.widthIn(max = maxSize) else Modifier.heightIn(max = maxSize)
+}
+
+private fun IntSize.crossAxisSize(isHorizontal: Boolean): Int =
+    if (isHorizontal) height else width

client/android/compose/src/main/kotlin/com/yandex/div/compose/views/pager/PagerContent.kt

@@ -0,0 +1,166 @@
+package com.yandex.div.compose.views.pager
+
+import androidx.compose.foundation.gestures.snapping.SnapLayoutInfoProvider
+import androidx.compose.foundation.gestures.snapping.SnapPosition
+import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import com.yandex.div.compose.utils.observedValue
+import com.yandex.div.compose.utils.scroll.AdjustScrollToItem
+import com.yandex.div.compose.utils.scroll.CrossAxisAlignment
+import com.yandex.div.compose.utils.scroll.IntrinsicSizeBarrier
+import com.yandex.div.compose.utils.scroll.OrientedLazyList
+import com.yandex.div.compose.utils.scroll.ScrollableChildItem
+import com.yandex.div.compose.utils.scroll.getScrollAxisPaddings
+import com.yandex.div2.Div
+import com.yandex.div2.DivPager
+import com.yandex.div2.DivPagerLayoutMode
+
+@Composable
+internal fun PagerContent(
+    items: List<Div>,
+    isHorizontal: Boolean,
+    itemSpacing: Dp,
+    paddings: PaddingValues,
+    layoutMode: DivPagerLayoutMode,
+    scrollAxisAlignment: DivPager.ItemAlignment,
+    crossAxisAlignment: DivPager.ItemAlignment,
+    layoutDirection: LayoutDirection,
+    defaultItem: Int,
+    viewportSize: Dp,
+    crossAxisBounded: Boolean,
+) {
+    val density = LocalDensity.current
+    val snapPosition = scrollAxisAlignment.toSnapPosition()
+    val crossAlignment = crossAxisAlignment.toCrossAxisAlignment()
+    val (startPadding, endPadding) = paddings.getScrollAxisPaddings(isHorizontal, layoutDirection)
+
+    val pageSize = layoutMode.observePageSize(scrollAxisAlignment, viewportSize, itemSpacing, startPadding, endPadding)
+    val listState = rememberListState(defaultItem, snapPosition, pageSize, itemSpacing, startPadding, endPadding, viewportSize, items.size)
+
+    if (pageSize == null && snapPosition != SnapPosition.Start) {
+        AdjustScrollToItem(listState, defaultItem, snapPosition, endPadding)
+    }
+
+    val snapProvider = remember(listState, snapPosition) {
+        SinglePageSnapLayoutInfoProvider(SnapLayoutInfoProvider(listState, snapPosition))
+    }
+    val childModifier = childModifier(
+        isHorizontal, viewportSize, crossAxisBounded, listState,
+        paddings, pageSize, startPadding, endPadding, layoutDirection, density
+    )
+
+    OrientedLazyList(
+        isHorizontal = isHorizontal,
+        modifier = IntrinsicSizeBarrier.fillMaxSize().clipToBounds(),
+        listState = listState,
+        contentPadding = paddings,
+        itemSpacing = itemSpacing,
+        crossAxisAlignment = crossAlignment,
+        flingBehavior = rememberSnapFlingBehavior(snapProvider),
+    ) {
+        items(count = items.size) { index ->
+            ScrollableChildItem(items[index], childModifier, isHorizontal, crossAlignment)
+        }
+    }
+}
+
+@Composable
+private fun AdjustScrollToItem(
+    listState: LazyListState,
+    defaultItem: Int,
+    snapPosition: SnapPosition,
+    endPadding: Dp,
+) {
+    val endPaddingPx = with(LocalDensity.current) { endPadding.roundToPx() }
+    AdjustScrollToItem(
+        listState = listState,
+        targetIndex = defaultItem,
+        desiredOffset = { viewportSize, itemSize ->
+            desiredSnapOffset(snapPosition, viewportSize, itemSize, endPaddingPx, 0)
+        }
+    )
+}
+
+@Composable
+private fun DivPagerLayoutMode.observePageSize(
+    alignment: DivPager.ItemAlignment,
+    viewportSize: Dp,
+    itemSpacing: Dp,
+    startPadding: Dp,
+    endPadding: Dp,
+): Dp? {
+    return when (this) {
+        is DivPagerLayoutMode.NeighbourPageSize -> {
+            val neighbourSize = value.neighbourPageWidth.observedValue() + itemSpacing
+            when (alignment) {
+                DivPager.ItemAlignment.CENTER ->
+                    (viewportSize - neighbourSize * 2).coerceAtLeast(0.dp)
+                DivPager.ItemAlignment.START ->
+                    (viewportSize - startPadding - neighbourSize).coerceAtLeast(0.dp)
+                DivPager.ItemAlignment.END ->
+                    (viewportSize - endPadding - neighbourSize).coerceAtLeast(0.dp)
+            }
+        }
+        is DivPagerLayoutMode.PageSize -> {
+            val percentage = value.pageWidth.value.observedValue()
+            viewportSize * percentage.toFloat() / 100f
+        }
+        is DivPagerLayoutMode.PageContentSize -> null
+    }
+}
+
+@Composable
+private fun rememberListState(
+    defaultItem: Int,
+    snapPosition: SnapPosition,
+    pageSize: Dp?,
+    itemSpacing: Dp,
+    startPadding: Dp,
+    endPadding: Dp,
+    viewportSize: Dp,
+    itemsCount: Int
+): LazyListState {
+    val density = LocalDensity.current
+    val initialScroll = remember(defaultItem, snapPosition, pageSize) {
+        calculateInitialScroll(
+            defaultItem, snapPosition, pageSize, itemSpacing,
+            startPadding, endPadding, viewportSize, itemsCount, density
+        )
+    }
+
+    return rememberLazyListState(
+        initialFirstVisibleItemIndex = initialScroll.itemIndex,
+        initialFirstVisibleItemScrollOffset = initialScroll.scrollOffset,
+    )
+}
+
+private fun DivPager.ItemAlignment.toCrossAxisAlignment(): CrossAxisAlignment =
+    when (this) {
+        DivPager.ItemAlignment.START -> CrossAxisAlignment.START
+        DivPager.ItemAlignment.CENTER -> CrossAxisAlignment.CENTER
+        DivPager.ItemAlignment.END -> CrossAxisAlignment.END
+    }
+
+private fun DivPager.ItemAlignment.toSnapPosition(): SnapPosition =
+    when (this) {
+        DivPager.ItemAlignment.CENTER -> SnapPosition.Center
+        DivPager.ItemAlignment.START -> SnapPosition.Start
+        DivPager.ItemAlignment.END -> SnapPosition.End
+    }
+
+private class SinglePageSnapLayoutInfoProvider(
+    private val delegate: SnapLayoutInfoProvider,
+) : SnapLayoutInfoProvider {
+    override fun calculateSnapOffset(velocity: Float) = delegate.calculateSnapOffset(velocity)
+    override fun calculateApproachOffset(velocity: Float, decayOffset: Float) = 0f
+}

client/android/compose/src/main/kotlin/com/yandex/div/compose/views/pager/PagerScrollPosition.kt

@@ -0,0 +1,84 @@
+package com.yandex.div.compose.views.pager
+
+import androidx.compose.foundation.gestures.snapping.SnapPosition
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.Dp
+import kotlin.math.max
+
+internal data class InitialScroll(
+    val itemIndex: Int,
+    val scrollOffset: Int,
+)
+
+internal fun calculateInitialScroll(
+    defaultItem: Int,
+    snapPosition: SnapPosition,
+    pageSize: Dp?,
+    itemSpacing: Dp,
+    startPadding: Dp,
+    endPadding: Dp,
+    viewportSize: Dp,
+    itemCount: Int,
+    density: Density,
+): InitialScroll {
+    if (pageSize == null || snapPosition == SnapPosition.Start) {
+        return InitialScroll(itemIndex = defaultItem, scrollOffset = 0)
+    }
+
+    val scrollOffset = with(density) {
+        calculateScrollOffset(
+            defaultItem = defaultItem,
+            snapPosition = snapPosition,
+            pageSizePx = pageSize.roundToPx(),
+            spacingPx = itemSpacing.roundToPx(),
+            startPx = startPadding.roundToPx(),
+            endPx = endPadding.roundToPx(),
+            viewportPx = viewportSize.roundToPx(),
+            itemCount = itemCount,
+        )
+    }
+
+    return InitialScroll(itemIndex = 0, scrollOffset = scrollOffset)
+}
+
+internal fun desiredSnapOffset(
+    snapPosition: SnapPosition,
+    viewportSizePx: Int,
+    pageSizePx: Int,
+    endPaddingPx: Int,
+    startPaddingPx: Int,
+): Int = when (snapPosition) {
+    SnapPosition.Center -> (viewportSizePx - pageSizePx) / 2
+    SnapPosition.End -> viewportSizePx - endPaddingPx - pageSizePx
+    else -> startPaddingPx
+}
+
+private fun calculateScrollOffset(
+    defaultItem: Int,
+    snapPosition: SnapPosition,
+    pageSizePx: Int,
+    spacingPx: Int,
+    startPx: Int,
+    endPx: Int,
+    viewportPx: Int,
+    itemCount: Int,
+): Int {
+    val desiredOffset = desiredSnapOffset(snapPosition, viewportPx, pageSizePx, endPx, startPx)
+    val centeredScroll = startPx + defaultItem * (pageSizePx + spacingPx) - desiredOffset
+
+    val startClamp = edgeClamp(
+        excess = startPx - desiredOffset,
+        contentOutside = defaultItem * (pageSizePx + spacingPx),
+    )
+    val endClamp = edgeClamp(
+        excess = endPx - (viewportPx - desiredOffset - pageSizePx),
+        contentOutside = (itemCount - 1 - defaultItem) * (pageSizePx + spacingPx),
+    )
+
+    return (centeredScroll - startClamp + endClamp).coerceAtLeast(0)
+}
+
+private fun edgeClamp(excess: Int, contentOutside: Int): Int {
+    if (excess <= 0) return 0
+    return max(0, excess - contentOutside)
+}

client/android/divkit-demo-app/src/screenshotTest/java/com/yandex/div/DivComposeScreenshotTest.kt

@@ -154,6 +154,94 @@ class DivComposeScreenshotTest(case: String, escapedCase: String) {
                 "snapshot_test_data/div-gallery/vertical-gallery-resizable-height.json",
                 "snapshot_test_data/div-gallery/vertical-gallery-resizable-width.json",
                 "snapshot_test_data/div-gallery/vertical-gallery-wrap-content-width-with-constraints.json",
+                // div-pager
+                "snapshot_test_data/div-pager/corners_radius.json",
+                "snapshot_test_data/div-pager/empty.json",
+                "snapshot_test_data/div-pager/horizontal-pager-constrained-height-with-paddings.json",
+                "snapshot_test_data/div-pager/horizontal-pager-custom-neighbour-page-width.json",
+                "snapshot_test_data/div-pager/horizontal-pager-custom-neighbour-page-width-with-paddings.json",
+                "snapshot_test_data/div-pager/horizontal-pager-custom-page-width.json",
+                "snapshot_test_data/div-pager/horizontal-pager-custom-page-width-with-paddings.json",
+                "snapshot_test_data/div-pager/horizontal-pager-fixed-height.json",
+                "snapshot_test_data/div-pager/horizontal-pager-fixed-height-with-paddings.json",
+                "snapshot_test_data/div-pager/horizontal-pager-fixed-width.json",
+                "snapshot_test_data/div-pager/horizontal-pager-items-resizable-height.json",
+                "snapshot_test_data/div-pager/horizontal-pager-match-parent-height-with-constraints.json",
+                "snapshot_test_data/div-pager/horizontal-pager-match-parent-height-with-paddings.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-size-mode-alignment-end.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-size-mode-alignment-start.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-size-mode-cross-axis-alignment.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-size-mode-few-pages.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-size-mode-few-pages-end.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-size-mode-item-spacing.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-size-mode-two-pages.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-width-0-with-item-spacing.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-width-0-with-paddings.json",
+                "snapshot_test_data/div-pager/horizontal-pager-neighbour-page-width-bigger-than-page.json",
+                "snapshot_test_data/div-pager/horizontal-pager-page-size-mode-alignment-end.json",
+                "snapshot_test_data/div-pager/horizontal-pager-page-size-mode-alignment-start.json",
+                "snapshot_test_data/div-pager/horizontal-pager-page-size-mode-cross-axis-alignment.json",
+                "snapshot_test_data/div-pager/horizontal-pager-page-size-mode-few-pages.json",
+                "snapshot_test_data/div-pager/horizontal-pager-page-size-mode-few-pages-end.json",
+                "snapshot_test_data/div-pager/horizontal-pager-page-size-mode-item-spacing.json",
+                "snapshot_test_data/div-pager/horizontal-pager-page-width-100-with-item-spacing.json",
+                "snapshot_test_data/div-pager/horizontal-pager-page-width-100-with-paddings.json",
+                "snapshot_test_data/div-pager/horizontal-pager-page-width-small.json",
+                "snapshot_test_data/div-pager/horizontal-pager-resizable-height.json",
+                "snapshot_test_data/div-pager/horizontal-pager-resizable-width.json",
+                "snapshot_test_data/div-pager/horizontal-pager-same-paddings.json",
+                "snapshot_test_data/div-pager/horizontal-pager-wrap-content-child-height-exceeds-parent.json",
+                "snapshot_test_data/div-pager/horizontal-pager-wrap-content-height-with-different-children.json",
+                "snapshot_test_data/div-pager/horizontal-pager-wrap-content-height-with-paddings.json",
+                "snapshot_test_data/div-pager/horizontal-pager-wrap-content-size-mode-alignment-start.json",
+                "snapshot_test_data/div-pager/horizontal-pager-wrap-content-size-mode-cross-axis-alignment.json",
+                "snapshot_test_data/div-pager/horizontal-pager-wrap-content-size-mode-few-pages.json",
+                "snapshot_test_data/div-pager/horizontal-pager-wrap-content-size-mode-few-pages-end.json",
+                "snapshot_test_data/div-pager/horizontal-pager-wrap-content-size-mode-with-item-spacing.json",
+                "snapshot_test_data/div-pager/horizontal-pager-wrap-content-width.json",
+                "snapshot_test_data/div-pager/item-shadow-in-pager.json",
+                "snapshot_test_data/div-pager/pager-default-item-with-states.json",
+                "snapshot_test_data/div-pager/vertical-pager-constrained-width-with-paddings.json",
+                "snapshot_test_data/div-pager/vertical-pager-custom-margins.json",
+                "snapshot_test_data/div-pager/vertical-pager-custom-neighbour-page-width.json",
+                "snapshot_test_data/div-pager/vertical-pager-custom-neighbour-page-width-with-paddings.json",
+                "snapshot_test_data/div-pager/vertical-pager-custom-page-width.json",
+                "snapshot_test_data/div-pager/vertical-pager-custom-page-width-with-paddings.json",
+                "snapshot_test_data/div-pager/vertical-pager-fixed-height.json",
+                "snapshot_test_data/div-pager/vertical-pager-fixed-width.json",
+                "snapshot_test_data/div-pager/vertical-pager-fixed-width-with-paddings.json",
+                "snapshot_test_data/div-pager/vertical-pager-match-parent-width-with-paddings.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-size-mode-alignment-end.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-size-mode-alignment-start.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-size-mode-cross-axis-alignment.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-size-mode-few-pages.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-size-mode-few-pages-end.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-size-mode-item-spacing.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-size-mode-two-pages.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-width-0-with-item-spacing.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-width-0-with-paddings.json",
+                "snapshot_test_data/div-pager/vertical-pager-neighbour-page-width-bigger-than-page.json",
+                "snapshot_test_data/div-pager/vertical-pager-page-size-mode-alignment-end.json",
+                "snapshot_test_data/div-pager/vertical-pager-page-size-mode-alignment-start.json",
+                "snapshot_test_data/div-pager/vertical-pager-page-size-mode-cross-axis-alignment.json",
+                "snapshot_test_data/div-pager/vertical-pager-page-size-mode-few-pages.json",
+                "snapshot_test_data/div-pager/vertical-pager-page-size-mode-few-pages-end.json",
+                "snapshot_test_data/div-pager/vertical-pager-page-size-mode-item-spacing.json",
+                "snapshot_test_data/div-pager/vertical-pager-page-width-100-with-item-spacing.json",
+                "snapshot_test_data/div-pager/vertical-pager-page-width-100-with-paddings.json",
+                "snapshot_test_data/div-pager/vertical-pager-page-width-small.json",
+                "snapshot_test_data/div-pager/vertical-pager-resizable-height.json",
+                "snapshot_test_data/div-pager/vertical-pager-resizable-width.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-child-width-exceeds-parent.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-height.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-size-match-parent.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-size-mode-alignment-start.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-size-mode-cross-axis-alignment.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-size-mode-few-pages.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-size-mode-few-pages-end.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-size-mode-with-item-spacing.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-width-with-different-children.json",
+                "snapshot_test_data/div-pager/vertical-pager-wrap-content-width-with-paddings.json",
                 // div-background
                 "snapshot_test_data/div-background/gradient-angles.json",
                 "snapshot_test_data/div-background/gradient-positions.json",