LayoutTests/css3/scroll-snap/scroll-snap-offsets-rtl.html - WebKit - Git at Google

 <!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
 <html>
     <head>
         <style>
             .bordered {
                 border-top: 20px solid black;
                 border-bottom: 10px solid black;
                 border-left: 15px solid black;
                 border-right: 9px solid black;
             }
             .padded {
                 padding-left: 20px;
                 padding-right: 10px;
                 padding-top: 15px;
                 padding-bottom: 9px;
             }
             .horizontalGallery {
                 direction: rtl;
                 width: 100px;
                 height: 100px;
                 overflow-y: hidden;
                 overflow-x: auto;
                 margin: 2px;
                 -webkit-overflow-scrolling: touch;
                 scroll-snap-type: x mandatory;
             }
             .horizontalGalleryDrawer {
                 width: 600%;
                 height: 100%;
             }
             .colorBox {
                 scroll-snap-align: start;
                 height: 100px;
                 width: 100px;
                 float: left;
             }
             #itemH0, #itemV0 { background-color: red; }
             #itemH1, #itemV1 { background-color: green; }
             #itemH2, #itemV2 { background-color: blue; }
             #itemH3, #itemV3 { background-color: aqua; }
             #itemH4, #itemV4 { background-color: yellow; }
             #itemH5, #itemV5 { background-color: fuchsia; }
         </style>
         <script src="../../resources/js-test.js"></script>
         <script>
         function reportResult(horizontalTargetID, verticalTargetID)
         {
             let horizontalTarget = document.getElementById(horizontalTargetID);
             debug("Scroll-snap offsets for " + horizontalTargetID + ": " + window.internals.scrollSnapOffsets(horizontalTarget));
         }

         function runTest()
         {
             reportResult('horizontalTarget', 'verticalTarget');
             reportResult('horizontalBorderedTarget', 'verticalBorderedTarget');
             reportResult('horizontalPaddedTarget', 'verticalPaddedTarget');
             reportResult('horizontalBorderedPaddedTarget', 'verticalBorderedPaddedTarget');
             reportResult('horizontalRotatedTarget', 'verticalRotatedTarget')

             finishJSTest();
         }

         function onLoad()
         {
             jsTestIsAsync = true;
             if (window.testRunner)
                 setTimeout(runTest, 0);
         }
         </script>
     </head>
     <body onload="onLoad();">
         <div style="position: relative; width: 300px">
             <div>Tests that the scroll-snap feature works properly in overflow regions.</div>
             <div class="horizontalGallery" id="horizontalTarget">
                 <div class="horizontalGalleryDrawer">
                     <div id="itemH0" class="colorBox"></div>
                     <div id="itemH1" class="colorBox"></div>
                     <div id="itemH2" class="colorBox"></div>
                     <div id="itemH3" class="colorBox"></div>
                     <div id="itemH4" class="colorBox"></div>
                     <div id="itemH5" class="colorBox"></div>
                 </div>
             </div>
             <div class="horizontalGallery bordered" id="horizontalBorderedTarget">
                 <div class="horizontalGalleryDrawer">
                     <div id="itemH0" class="colorBox"></div>
                     <div id="itemH1" class="colorBox"></div>
                     <div id="itemH2" class="colorBox"></div>
                     <div id="itemH3" class="colorBox"></div>
                     <div id="itemH4" class="colorBox"></div>
                     <div id="itemH5" class="colorBox"></div>
                 </div>
             </div>
             <div class="horizontalGallery padded" id="horizontalPaddedTarget">
                 <div class="horizontalGalleryDrawer">
                     <div id="itemH0" class="colorBox"></div>
                     <div id="itemH1" class="colorBox"></div>
                     <div id="itemH2" class="colorBox"></div>
                     <div id="itemH3" class="colorBox"></div>
                     <div id="itemH4" class="colorBox"></div>
                     <div id="itemH5" class="colorBox"></div>
                 </div>
             </div>
             <div class="horizontalGallery bordered padded" id="horizontalBorderedPaddedTarget">
                 <div class="horizontalGalleryDrawer">
                     <div id="itemH0" class="colorBox"></div>
                     <div id="itemH1" class="colorBox"></div>
                     <div id="itemH2" class="colorBox"></div>
                     <div id="itemH3" class="colorBox"></div>
                     <div id="itemH4" class="colorBox"></div>
                     <div id="itemH5" class="colorBox"></div>
                 </div>
             </div>
             <div class="horizontalGallery bordered padded" id="horizontalRotatedTarget" style="transform: rotate(20deg)">
                 <div class="horizontalGalleryDrawer">
                     <div id="itemH0" class="colorBox"></div>
                     <div id="itemH1" class="colorBox"></div>
                     <div id="itemH2" class="colorBox"></div>
                     <div id="itemH3" class="colorBox"></div>
                     <div id="itemH4" class="colorBox"></div>
                     <div id="itemH5" class="colorBox"></div>
                 </div>
             </div>
             <div id="console"></div>
         </div>
     </body>
 </html>
	<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
	<html>
	<head>
	<style>
	.bordered {
	border-top: 20px solid black;
	border-bottom: 10px solid black;
	border-left: 15px solid black;
	border-right: 9px solid black;
	}
	.padded {
	padding-left: 20px;
	padding-right: 10px;
	padding-top: 15px;
	padding-bottom: 9px;
	}
	.horizontalGallery {
	direction: rtl;
	width: 100px;
	height: 100px;
	overflow-y: hidden;
	overflow-x: auto;
	margin: 2px;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	}
	.horizontalGalleryDrawer {
	width: 600%;
	height: 100%;
	}
	.colorBox {
	scroll-snap-align: start;
	height: 100px;
	width: 100px;
	float: left;
	}
	#itemH0, #itemV0 { background-color: red; }
	#itemH1, #itemV1 { background-color: green; }
	#itemH2, #itemV2 { background-color: blue; }
	#itemH3, #itemV3 { background-color: aqua; }
	#itemH4, #itemV4 { background-color: yellow; }
	#itemH5, #itemV5 { background-color: fuchsia; }
	</style>
	<script src="../../resources/js-test.js"></script>
	<script>
	function reportResult(horizontalTargetID, verticalTargetID)
	{
	let horizontalTarget = document.getElementById(horizontalTargetID);
	debug("Scroll-snap offsets for " + horizontalTargetID + ": " + window.internals.scrollSnapOffsets(horizontalTarget));
	}

	function runTest()
	{
	reportResult('horizontalTarget', 'verticalTarget');
	reportResult('horizontalBorderedTarget', 'verticalBorderedTarget');
	reportResult('horizontalPaddedTarget', 'verticalPaddedTarget');
	reportResult('horizontalBorderedPaddedTarget', 'verticalBorderedPaddedTarget');
	reportResult('horizontalRotatedTarget', 'verticalRotatedTarget')

	finishJSTest();
	}

	function onLoad()
	{
	jsTestIsAsync = true;
	if (window.testRunner)
	setTimeout(runTest, 0);
	}
	</script>
	</head>
	<body onload="onLoad();">
	<div style="position: relative; width: 300px">
	<div>Tests that the scroll-snap feature works properly in overflow regions.</div>
	<div class="horizontalGallery" id="horizontalTarget">
	<div class="horizontalGalleryDrawer">
	<div id="itemH0" class="colorBox"></div>
	<div id="itemH1" class="colorBox"></div>
	<div id="itemH2" class="colorBox"></div>
	<div id="itemH3" class="colorBox"></div>
	<div id="itemH4" class="colorBox"></div>
	<div id="itemH5" class="colorBox"></div>
	</div>
	</div>
	<div class="horizontalGallery bordered" id="horizontalBorderedTarget">
	<div class="horizontalGalleryDrawer">
	<div id="itemH0" class="colorBox"></div>
	<div id="itemH1" class="colorBox"></div>
	<div id="itemH2" class="colorBox"></div>
	<div id="itemH3" class="colorBox"></div>
	<div id="itemH4" class="colorBox"></div>
	<div id="itemH5" class="colorBox"></div>
	</div>
	</div>
	<div class="horizontalGallery padded" id="horizontalPaddedTarget">
	<div class="horizontalGalleryDrawer">
	<div id="itemH0" class="colorBox"></div>
	<div id="itemH1" class="colorBox"></div>
	<div id="itemH2" class="colorBox"></div>
	<div id="itemH3" class="colorBox"></div>
	<div id="itemH4" class="colorBox"></div>
	<div id="itemH5" class="colorBox"></div>
	</div>
	</div>
	<div class="horizontalGallery bordered padded" id="horizontalBorderedPaddedTarget">
	<div class="horizontalGalleryDrawer">
	<div id="itemH0" class="colorBox"></div>
	<div id="itemH1" class="colorBox"></div>
	<div id="itemH2" class="colorBox"></div>
	<div id="itemH3" class="colorBox"></div>
	<div id="itemH4" class="colorBox"></div>
	<div id="itemH5" class="colorBox"></div>
	</div>
	</div>
	<div class="horizontalGallery bordered padded" id="horizontalRotatedTarget" style="transform: rotate(20deg)">
	<div class="horizontalGalleryDrawer">
	<div id="itemH0" class="colorBox"></div>
	<div id="itemH1" class="colorBox"></div>
	<div id="itemH2" class="colorBox"></div>
	<div id="itemH3" class="colorBox"></div>
	<div id="itemH4" class="colorBox"></div>
	<div id="itemH5" class="colorBox"></div>
	</div>
	</div>
	<div id="console"></div>
	</div>
	</body>
	</html>