wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-10-01 04:47:31 +09:00
Code Issues Projects Releases Packages Wiki Activity

Issue #1986 - Add in reftests for new behavior.

Browse source 
Almost forgot to do this. This is in case we need to revisit this for
regressions in the future and the tests are not available online. Never know
when they might come in handy again.
This commit is contained in:
Jeremy Andrews 2022-08-18 13:27:43 -05:00 • committed by roytam1
commit cf5dfc5e7d
24 changed files with 2415 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

89
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>
CSS Test: Testing a mix of flex items with various values for
'writing-mode' / 'direction' in a vertical column-oriented flex container
with 'direction' flipped.
</title>
<meta charset="utf-8">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
<link rel="match" href="flexbox-writing-mode-015-ref.html">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: flex;
flex-direction: column;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
height: 150px;
width: 500px;
}
span {
display: block;
background: lightgrey;
border: 2px solid black;
/* If browser supports it, signal the inline direction with border color: */
border-block-start-color: orange;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.hl { writing-mode: horizontal-tb; direction: ltr; }
.hr { writing-mode: horizontal-tb; direction: rtl; }
.vl { writing-mode: vertical-lr; direction: ltr; }
.vr { writing-mode: vertical-rl; direction: ltr; }
.vl_rtl { writing-mode: vertical-lr; direction: rtl; }
.vr_rtl { writing-mode: vertical-rl; direction: rtl; }
</style>
</head>
<body>
<div class="container vl_rtl">
<span class="hl small">a b c</span>
<span class="hl big">d e</span>
<span class="hr small">a b c</span>
<span class="hr big">d e</span>
<span class="vl small">a b c</span>
<span class="vl big">d e</span>
</div>
<div class="container vl_rtl">
<span class="vr small">a b c</span>
<span class="vr big">d e</span>
<span class="vl_rtl small">a b c</span>
<span class="vl_rtl big">d e</span>
<span class="vr_rtl small">a b c</span>
<span class="vr_rtl big">d e</span>
</div>
<div class="container vr_rtl">
<span class="hl small">a b c</span>
<span class="hl big">d e</span>
<span class="hr small">a b c</span>
<span class="hr big">d e</span>
<span class="vl small">a b c</span>
<span class="vl big">d e</span>
</div>
<div class="container vr_rtl">
<span class="vr small">a b c</span>
<span class="vr big">d e</span>
<span class="vl_rtl small">a b c</span>
<span class="vl_rtl big">d e</span>
<span class="vr_rtl small">a b c</span>
<span class="vr_rtl big">d e</span>
</div>
</body>
</html>