overflow: repeat – Repeating Content for CSS

Abstract
--
Scrolling content which must end at its beginning currently requires
JavaScript – sometimes mountains of it (and pretty complex, to boot)
depending on the use case.  "repeat" and associated values for the overflow
property bring this functionality into the user agent, accelerating for app
developers their speed to market and level of effort regarding this very
common design pattern, and doing so in a very familiar way.


Common Use Cases
--
* Infinitely-repeating carousels
* Pickers


Syntax
--
overflow: [repeat | repeat-x | repeat-y];


Description
--
repeat: When content flows outside its container, it repeats infinitely –
and is infinitely scrollable – on both X and Y axes.
repeat-x/y: Limits content repetition (and infinite scrolling) to the
specified axis.

Repeat values exhibit the same behavior as overflow: auto, wherein no
scrolling or content repetition takes place when content does not flow
outside its container.  This can be demonstrated with a columned datepicker
UI akin to those found in iOS (ASCII diagram incoming):

(repeats)(repeats)(no repeat)
Sept 12  |  12:00  |
Sept 13  |  12:15  |  AM
Sept 14  |  12:30  |  PM
Sept 15  |  12:45  |

In the above, all three columns have overflow: repeat-y applied.  Because
the date and time columns possess elements that flow outside their
4-item-tall containers, those columns will scroll infinitely both up and
down.  The AM/PM column, however, possesses only two elements, and they
will not repeat, nor will the container scroll.

The same idea can be applied to a very common UI mechanism: infinitely
scrolling carousels.  These typically consist of images, products, or hero
content that will scroll left/right.  Upon reaching the last item, the
carousel will scroll, without changing direction, to the first element
again.

It's possible that this spec can be tweaked to merge gracefully with
generated pages (http://dev.w3.org/csswg/css3-gcpm/#paged-presentations),
as it might be useful for these would work well in concert.

FAQ
--
Q: How should this work with element.scrollTo?
A: Similar to rotation in CSS, one complete "turn" of repeating content is
equal to its nominal width/height.  Thus, if a horizontally-scrolling
carousel's content is nominally 1000px wide, carousel.scrollTo(4000, 0)
would end at the first carousel pane, wrapping 4 times.

Q: What about scroll indicators?
A: This should be implemented as befits the user agent, but wrapping the
indicators with the content is one possibility.


I am excited to see feedback, and I think this concept has good potential
to take a lot of the authoring pain out of certain widespread design
patterns.

Cheers,
-Brian