author | Daniel Holbert <dholbert@cs.stanford.edu> |
Fri, 27 Mar 2015 12:06:03 -0700 | |
changeset 236290 | 7c6354ab3e22d21460681b92b0fcb3bc78f7c8f5 |
parent 236289 | 52c1155d7bff4dba1b5e53bdb07f62767ad1daef |
child 236291 | 2e874a1e7a7a260eb3936f417d21fa11014ef074 |
push id | 28494 |
push user | philringnalda@gmail.com |
push date | Sat, 28 Mar 2015 18:46:06 +0000 |
treeherder | mozilla-central@e16dc56f90d5 [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
bugs | 1148294 |
milestone | 39.0a1 |
first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + height: 30px; + width: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: ltr; */ + /* Testcase has writing-mode: horizontal-tb; */ + } + .flexContainer > * { + width: 15px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + +</body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + height: 30px; + width: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: ltr; + writing-mode: horizontal-tb; + } + .flexContainer > * { + width: 15px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list +++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list @@ -177,8 +177,11 @@ skip-if(Mulet) == flexbox-overflow-vert- == flexbox-whitespace-handling-001a.xhtml flexbox-whitespace-handling-001-ref.xhtml == flexbox-whitespace-handling-001b.xhtml flexbox-whitespace-handling-001-ref.xhtml == flexbox-whitespace-handling-002.xhtml flexbox-whitespace-handling-002-ref.xhtml # Tests for flex containers with pseudo-elements == flexbox-with-pseudo-elements-001.html flexbox-with-pseudo-elements-001-ref.html == flexbox-with-pseudo-elements-002.html flexbox-with-pseudo-elements-002-ref.html == flexbox-with-pseudo-elements-003.html flexbox-with-pseudo-elements-003-ref.html + +# Tests for combined influence of 'writing-mode' & 'direction' on flex axes +test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-001.html flexbox-writing-mode-001-ref.html