chromium/src/third_party/blink/web_tests/external/wpt/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml - manifest_repos/chromium_src - Git at Google

 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase to exercise each possible value of the 'justify-content'
      property, in an auto-sized horizontal flex container. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Test: Testing 'justify-content' in an auto-sized reversed horizontal flex container</title>
     <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
     <link rel="match" href="flexbox-justify-content-horiz-006-ref.xhtml"/>
     <style>
       div.flexbox {
         display: flex;
         flex-direction: row-reverse;
         width: 200px;
         margin-bottom: 2px;
       }
       div.a {
         height: 20px;
         flex: 0 10px;
         background: lightgreen;
       }
       div.b {
         height: 20px;
         flex: 0 50px;
         background: pink;
       }
       div.c {
         height: 20px;
         flex: 0 100px;
         background: orange;
       }
     </style>
   </head>
   <body>

     <!-- default (start) -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>

     <!-- flex-start -->
     <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>

     <!-- flex-end -->
     <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>

     <!-- center -->
     <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>

     <!-- space-between -->
     <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>

     <!-- space-around -->
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>

     <!-- space-evenly -->
     <div class="flexbox" style="justify-content: space-evenly">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: space-evenly">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-evenly">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>


     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>

     <!-- right -->
     <div class="flexbox" style="justify-content: right">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: right">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: right">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
   </body>
 </html>
	<?xml version="1.0" encoding="UTF-8"?>
	<!--
	Any copyright is dedicated to the Public Domain.
	http://creativecommons.org/publicdomain/zero/1.0/
	-->
	<!-- Testcase to exercise each possible value of the 'justify-content'
	property, in an auto-sized horizontal flex container. -->
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>CSS Test: Testing 'justify-content' in an auto-sized reversed horizontal flex container</title>
	<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
	<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
	<link rel="match" href="flexbox-justify-content-horiz-006-ref.xhtml"/>
	<style>
	div.flexbox {
	display: flex;
	flex-direction: row-reverse;
	width: 200px;
	margin-bottom: 2px;
	}
	div.a {
	height: 20px;
	flex: 0 10px;
	background: lightgreen;
	}
	div.b {
	height: 20px;
	flex: 0 50px;
	background: pink;
	}
	div.c {
	height: 20px;
	flex: 0 100px;
	background: orange;
	}
	</style>
	</head>
	<body>

	<!-- default (start) -->
	<div class="flexbox">
	<div class="a"/>
	</div>
	<div class="flexbox">
	<div class="a"/><div class="b"></div>
	</div>
	<div class="flexbox">
	<div class="a"/><div class="b"/><div class="c"/>
	</div>

	<!-- flex-start -->
	<div class="flexbox" style="justify-content: flex-start">
	<div class="a"/>
	</div>
	<div class="flexbox" style="justify-content: flex-start">
	<div class="a"/><div class="b"/>
	</div>
	<div class="flexbox" style="justify-content: flex-start">
	<div class="a"/><div class="b"/><div class="c"/>
	</div>

	<!-- flex-end -->
	<div class="flexbox" style="justify-content: flex-end">
	<div class="a"/>
	</div>
	<div class="flexbox" style="justify-content: flex-end">
	<div class="a"/><div class="b"/>
	</div>
	<div class="flexbox" style="justify-content: flex-end">
	<div class="a"/><div class="b"/><div class="c"/>
	</div>

	<!-- center -->
	<div class="flexbox" style="justify-content: center">
	<div class="a"/>
	</div>
	<div class="flexbox" style="justify-content: center">
	<div class="a"/><div class="b"/>
	</div>
	<div class="flexbox" style="justify-content: center">
	<div class="a"/><div class="b"/><div class="c"/>
	</div>

	<!-- space-between -->
	<div class="flexbox" style="justify-content: space-between">
	<div class="a"/>
	</div>
	<div class="flexbox" style="justify-content: space-between">
	<div class="a"/><div class="b"/>
	</div>
	<div class="flexbox" style="justify-content: space-between">
	<div class="a"/><div class="b"/><div class="c"/>
	</div>

	<!-- space-around -->
	<div class="flexbox" style="justify-content: space-around">
	<div class="a"/>
	</div>
	<div class="flexbox" style="justify-content: space-around">
	<div class="a"/><div class="b"/>
	</div>
	<div class="flexbox" style="justify-content: space-around">
	<div class="a"/><div class="b"/><div class="c"/>
	</div>

	<!-- space-evenly -->
	<div class="flexbox" style="justify-content: space-evenly">
	<div class="a"/>
	</div>
	<div class="flexbox" style="justify-content: space-evenly">
	<div class="a"/><div class="b"/>
	</div>
	<div class="flexbox" style="justify-content: space-evenly">
	<div class="a"/><div class="b"/><div class="c"/>
	</div>


	<!-- left -->
	<div class="flexbox" style="justify-content: left">
	<div class="a"/>
	</div>
	<div class="flexbox" style="justify-content: left">
	<div class="a"/><div class="b"/>
	</div>
	<div class="flexbox" style="justify-content: left">
	<div class="a"/><div class="b"/><div class="c"/>
	</div>

	<!-- right -->
	<div class="flexbox" style="justify-content: right">
	<div class="a"/>
	</div>
	<div class="flexbox" style="justify-content: right">
	<div class="a"/><div class="b"/>
	</div>
	<div class="flexbox" style="justify-content: right">
	<div class="a"/><div class="b"/><div class="c"/>
	</div>
	</body>
	</html>