LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml - WebKit - 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 with borders on flex items, and "direction: rtl" and
      "flex-direction: row-reverse" to *doubly* reverse the flex container's
      main axis. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container, with 'direction: rtl'</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
     <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/>
     <style>
       div { height: 100px; border: 0; }
       div.flexbox {
         width: 200px;
         font-size: 10px;
         display: flex;
         flex-direction: row-reverse;
         direction: rtl;
       }
       div.a {
         flex: 1 0 24px;
         background: lightgreen;
         border-style: dotted;
         border-left-width: 2px;
         border-right-width: 4px;
       }
       div.b {
         flex: 2 0 10px;
         background: yellow;
         border-style: dashed;
         border-left-width: 7px;
         border-right-width: 3px;
       }
       div.c {
         flex: 3 0 40px;
         background: orange;
       }
       div.flexNone {
         flex: none;
         background: pink;
       }
       div.flexBasis {
         flex: 0 0 20px;
         background: gray;
       }
       div.spacer {
         display: inline-block;
         width: 15px;
         height: 15px;
         background: purple;
       }
     </style>
   </head>
   <body>
     <div class="flexbox"><div class="a"></div><div class="b"/></div>
     <div class="flexbox"><div class="a"/><div class="c"/></div>
     <div class="flexbox"><div class="a"/>
       <div class="flexNone"><div class="spacer"/></div>
     </div>
     <div class="flexbox"><div class="b"/><div class="c"/></div>
     <div class="flexbox"><div class="b"/>
       <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
     </div>

     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="flexBasis"/><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 with borders on flex items, and "direction: rtl" and
	"flex-direction: row-reverse" to doubly reverse the flex container's
	main axis. -->
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container, with 'direction: rtl'</title>
	<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
	<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
	<link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/>
	<style>
	div { height: 100px; border: 0; }
	div.flexbox {
	width: 200px;
	font-size: 10px;
	display: flex;
	flex-direction: row-reverse;
	direction: rtl;
	}
	div.a {
	flex: 1 0 24px;
	background: lightgreen;
	border-style: dotted;
	border-left-width: 2px;
	border-right-width: 4px;
	}
	div.b {
	flex: 2 0 10px;
	background: yellow;
	border-style: dashed;
	border-left-width: 7px;
	border-right-width: 3px;
	}
	div.c {
	flex: 3 0 40px;
	background: orange;
	}
	div.flexNone {
	flex: none;
	background: pink;
	}
	div.flexBasis {
	flex: 0 0 20px;
	background: gray;
	}
	div.spacer {
	display: inline-block;
	width: 15px;
	height: 15px;
	background: purple;
	}
	</style>
	</head>
	<body>
	<div class="flexbox"><div class="a"></div><div class="b"/></div>
	<div class="flexbox"><div class="a"/><div class="c"/></div>
	<div class="flexbox"><div class="a"/>
	<div class="flexNone"><div class="spacer"/></div>
	</div>
	<div class="flexbox"><div class="b"/><div class="c"/></div>
	<div class="flexbox"><div class="b"/>
	<div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
	</div>

	<div class="flexbox">
	<div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
	</div>
	</body>
	</html>