chromium/src/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <title>
   scroll-snap-align vs writing-mode
 </title>
 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align">
 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap">
 <link rel="match" href="scroll-snap-writing-mode-000-ref.html">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
 <style>

 .wrapper {
   /* lay out in a nice grid */
   display: grid;
   gap: 0.25em;
   grid-template-columns: repeat(6, max-content);
 }

 .scroller {
   scroll-snap-type: both mandatory;
   overflow: hidden;
   scroll-padding: 0;
   width: 50px;
   height: 50px;
   border: solid silver;
   border-block-start-color: blue;
   border-inline-start-color: blue;
 }
 .area {
   width: 200px;
   height: 200px;
 }

 .target {
   margin: 5px;
   scroll-snap-align: start;
 }

 .small .target {
   width: 30px;
   height: 30px;
   background: orange;
 }

 .large .target {
   width: 51px;
   height: 51px;
   border-block-end: 20px solid red;
   border-inline-end: 20px solid red;
 }

 .large .target::before {
   content: '';
   display: block;
   width: 30px;
   height: 30px;
   background: orange;
 }

 .TB  { writing-mode: horizontal-tb; }
 .LR  { writing-mode: vertical-lr; }
 .RL  { writing-mode: vertical-rl; }
 .ltr { direction: ltr; }
 .rtl { direction: rtl; }

 .TB.ltr.invert .target { writing-mode: vertical-rl;   direction: rtl; }
 .TB.rtl.invert .target { writing-mode: vertical-lr;   direction: rtl; }
 .LR.ltr.invert .target { writing-mode: vertical-rl;   direction: rtl; }
 .LR.rtl.invert .target { writing-mode: vertical-rl;   direction: ltr; }
 .RL.ltr.invert .target { writing-mode: vertical-lr;   direction: rtl; }
 .RL.rtl.invert .target { writing-mode: horizontal-tb; direction: ltr; }

 .large.invert {
   /* key off target‘s writing mode, which we just inverted */
   border: solid silver;
   border-block-end-color: blue;
   border-inline-end-color: blue;
 }
 </style>

 <p>Test passes if there is an orange square tucked into each blue corner without gaps,
 and there is no red.

 <div class="wrapper">
 <!-- Simple Small Cases -->

 <div class="scroller TB ltr small">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller LR ltr small">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller RL ltr small">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller TB rtl small">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller LR rtl small">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller RL rtl small">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <!-- Target-inverted Small Cases
      This row should be identical to the previous. -->
 <div class="scroller TB ltr small invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller LR ltr small invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller RL ltr small invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller TB rtl small invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller LR rtl small invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller RL rtl small invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <!-- Simple Large Cases -->

 <div class="scroller TB ltr large">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller LR ltr large">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller RL ltr large">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller TB rtl large">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller LR rtl large">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller RL rtl large">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <!-- Target-inverted Large Cases
      This is the fun one. -->

 <div class="scroller TB ltr large invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller LR ltr large invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller RL ltr large invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller TB rtl large invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller LR rtl large invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 <div class="scroller RL rtl large invert">
   <div class="area">
     <div class="target"></div>
   </div>
 </div>

 </div> <!-- wrapper -->
	<!DOCTYPE html>
	<title>
	scroll-snap-align vs writing-mode
	</title>
	<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align">
	<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap">
	<link rel="match" href="scroll-snap-writing-mode-000-ref.html">
	<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
	<style>

	.wrapper {
	/* lay out in a nice grid */
	display: grid;
	gap: 0.25em;
	grid-template-columns: repeat(6, max-content);
	}

	.scroller {
	scroll-snap-type: both mandatory;
	overflow: hidden;
	scroll-padding: 0;
	width: 50px;
	height: 50px;
	border: solid silver;
	border-block-start-color: blue;
	border-inline-start-color: blue;
	}
	.area {
	width: 200px;
	height: 200px;
	}

	.target {
	margin: 5px;
	scroll-snap-align: start;
	}

	.small .target {
	width: 30px;
	height: 30px;
	background: orange;
	}

	.large .target {
	width: 51px;
	height: 51px;
	border-block-end: 20px solid red;
	border-inline-end: 20px solid red;
	}

	.large .target::before {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	background: orange;
	}

	.TB { writing-mode: horizontal-tb; }
	.LR { writing-mode: vertical-lr; }
	.RL { writing-mode: vertical-rl; }
	.ltr { direction: ltr; }
	.rtl { direction: rtl; }

	.TB.ltr.invert .target { writing-mode: vertical-rl; direction: rtl; }
	.TB.rtl.invert .target { writing-mode: vertical-lr; direction: rtl; }
	.LR.ltr.invert .target { writing-mode: vertical-rl; direction: rtl; }
	.LR.rtl.invert .target { writing-mode: vertical-rl; direction: ltr; }
	.RL.ltr.invert .target { writing-mode: vertical-lr; direction: rtl; }
	.RL.rtl.invert .target { writing-mode: horizontal-tb; direction: ltr; }

	.large.invert {
	/* key off target‘s writing mode, which we just inverted */
	border: solid silver;
	border-block-end-color: blue;
	border-inline-end-color: blue;
	}
	</style>

	<p>Test passes if there is an orange square tucked into each blue corner without gaps,
	and there is no red.

	<div class="wrapper">
	<!-- Simple Small Cases -->

	<div class="scroller TB ltr small">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller LR ltr small">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller RL ltr small">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller TB rtl small">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller LR rtl small">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller RL rtl small">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<!-- Target-inverted Small Cases
	This row should be identical to the previous. -->
	<div class="scroller TB ltr small invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller LR ltr small invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller RL ltr small invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller TB rtl small invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller LR rtl small invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller RL rtl small invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<!-- Simple Large Cases -->

	<div class="scroller TB ltr large">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller LR ltr large">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller RL ltr large">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller TB rtl large">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller LR rtl large">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller RL rtl large">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<!-- Target-inverted Large Cases
	This is the fun one. -->

	<div class="scroller TB ltr large invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller LR ltr large invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller RL ltr large invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller TB rtl large invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller LR rtl large invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	<div class="scroller RL rtl large invert">
	<div class="area">
	<div class="target"></div>
	</div>
	</div>

	</div> <!-- wrapper -->