author | Brad Werth <bwerth@mozilla.com> |
Wed, 17 Oct 2018 20:23:27 +0000 | |
changeset 497691 | 49e1cc5fdf49b102fa27980622087fc550ed93bb |
parent 497690 | d8e73cf6952fd03c118b8cdd3cc97a8f59045f95 |
child 497692 | 5e123c35d1e82866b42ee86dbe74bdf4c02956f5 |
push id | 10002 |
push user | archaeopteryx@coole-files.de |
push date | Fri, 19 Oct 2018 23:09:29 +0000 |
treeherder | mozilla-beta@01378c910610 [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | dholbert |
bugs | 1497589 |
milestone | 64.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
|
dom/flex/test/chrome.ini | file | annotate | diff | comparison | revisions | |
dom/flex/test/chrome/test_flex_axis_directions.html | file | annotate | diff | comparison | revisions |
--- a/dom/flex/test/chrome.ini +++ b/dom/flex/test/chrome.ini @@ -1,2 +1,3 @@ +[chrome/test_flex_axis_directions.html] [chrome/test_flex_items.html] [chrome/test_flex_lines.html]
new file mode 100644 --- /dev/null +++ b/dom/flex/test/chrome/test_flex_axis_directions.html @@ -0,0 +1,204 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> +<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> +<style> + f { + display: flex; + width: 400px; + height: 50px; + margin-bottom: 2px; + } + + b { + background-color: gold; + width: 100px; + height: 15px; + } + b::after { + content: "B"; + } + + c { + background-color: yellow; + width: 100px; + height: 15px; + } + c::after { + content: "C"; + } + + d { + background-color: orange; + width: 100px; + height: 15px; + } + d::after { + content: "D"; + } + + .fdR { + flex-direction: row; + background-color: lightgrey; + } + .fdRR { + flex-direction: row-reverse; + background-color: lightgreen; + } + .fdC { + flex-direction: column; + background-color: lightblue; + } + .fdCR { + flex-direction: column-reverse; + background-color: lavender; + } + + .wmHTB { + writing-mode: horizontal-tb; + } + .wmVLR { + writing-mode: vertical-lr; + } + .wmVRL { + writing-mode: vertical-rl; + } + .wmSLR { + writing-mode: sideways-lr; + } + .wmSRL { + writing-mode: sideways-rl; + } + + .dLR { + direction: ltr; + } + .dRL { + direction: rtl; + } +</style> + +<script> +"use strict"; + +SimpleTest.waitForExplicitFinish(); + +function testContainerMatchesExpectedValues(flex, values, flexIndex) { + is(flex.mainAxisDirection, values.m, "Flex index " + flexIndex + " should have expected mainAxisDirection."); + is(flex.crossAxisDirection, values.c, "Flex index " + flexIndex + " should have expected crossAxisDirection."); +} + +function runTests() { + const expectedValues = [ + { m: "horizontal-lr", c: "vertical-tb" }, + { m: "horizontal-rl", c: "vertical-tb" }, + { m: "vertical-tb", c: "horizontal-lr" }, + { m: "vertical-bt", c: "horizontal-lr" }, + { m: "vertical-tb", c: "horizontal-rl" }, + { m: "vertical-bt", c: "horizontal-rl" }, + { m: "vertical-bt", c: "horizontal-lr" }, + { m: "vertical-tb", c: "horizontal-lr" }, + { m: "vertical-tb", c: "horizontal-rl" }, + { m: "vertical-bt", c: "horizontal-rl" }, + + { m: "horizontal-rl", c: "vertical-tb" }, + { m: "horizontal-lr", c: "vertical-tb" }, + { m: "vertical-bt", c: "horizontal-lr" }, + { m: "vertical-tb", c: "horizontal-lr" }, + { m: "vertical-bt", c: "horizontal-rl" }, + { m: "vertical-tb", c: "horizontal-rl" }, + { m: "vertical-tb", c: "horizontal-lr" }, + { m: "vertical-bt", c: "horizontal-lr" }, + { m: "vertical-bt", c: "horizontal-rl" }, + { m: "vertical-tb", c: "horizontal-rl" }, + + { m: "vertical-tb", c: "horizontal-lr" }, + { m: "vertical-tb", c: "horizontal-rl" }, + { m: "horizontal-lr", c: "vertical-tb" }, + { m: "horizontal-lr", c: "vertical-bt" }, + { m: "horizontal-rl", c: "vertical-tb" }, + { m: "horizontal-rl", c: "vertical-bt" }, + { m: "horizontal-lr", c: "vertical-bt" }, + { m: "horizontal-lr", c: "vertical-tb" }, + { m: "horizontal-rl", c: "vertical-tb" }, + { m: "horizontal-rl", c: "vertical-bt" }, + + { m: "vertical-bt", c: "horizontal-lr" }, + { m: "vertical-bt", c: "horizontal-rl" }, + { m: "horizontal-rl", c: "vertical-tb" }, + { m: "horizontal-rl", c: "vertical-bt" }, + { m: "horizontal-lr", c: "vertical-tb" }, + { m: "horizontal-lr", c: "vertical-bt" }, + { m: "horizontal-rl", c: "vertical-bt" }, + { m: "horizontal-rl", c: "vertical-tb" }, + { m: "horizontal-lr", c: "vertical-tb" }, + { m: "horizontal-lr", c: "vertical-bt" }, + ]; + + const children = document.body.children; + is(children.length, expectedValues.length, "Document should have expected number of flex containers."); + + for (let i = 0; i < children.length; ++i) { + const flex = children.item(i).getAsFlexContainer(); + ok(flex, "Document child index " + i + " should be a flex container."); + if (flex) { + const values = expectedValues[i]; + testContainerMatchesExpectedValues(flex, values, i); + } + } + + SimpleTest.finish(); +} +</script> +</head> + +<body onLoad="runTests();"> + +<f class="fdR wmHTB dLR"><b></b><c></c><d></d></f> +<f class="fdR wmHTB dRL"><b></b><c></c><d></d></f> +<f class="fdR wmVLR dLR"><b></b><c></c><d></d></f> +<f class="fdR wmVLR dRL"><b></b><c></c><d></d></f> +<f class="fdR wmVRL dLR"><b></b><c></c><d></d></f> +<f class="fdR wmVRL dRL"><b></b><c></c><d></d></f> +<f class="fdR wmSLR dLR"><b></b><c></c><d></d></f> +<f class="fdR wmSLR dRL"><b></b><c></c><d></d></f> +<f class="fdR wmSRL dLR"><b></b><c></c><d></d></f> +<f class="fdR wmSRL dRL"><b></b><c></c><d></d></f> + +<f class="fdRR wmHTB dLR"><b></b><c></c><d></d></f> +<f class="fdRR wmHTB dRL"><b></b><c></c><d></d></f> +<f class="fdRR wmVLR dLR"><b></b><c></c><d></d></f> +<f class="fdRR wmVLR dRL"><b></b><c></c><d></d></f> +<f class="fdRR wmVRL dLR"><b></b><c></c><d></d></f> +<f class="fdRR wmVRL dRL"><b></b><c></c><d></d></f> +<f class="fdRR wmSLR dLR"><b></b><c></c><d></d></f> +<f class="fdRR wmSLR dRL"><b></b><c></c><d></d></f> +<f class="fdRR wmSRL dLR"><b></b><c></c><d></d></f> +<f class="fdRR wmSRL dRL"><b></b><c></c><d></d></f> + +<f class="fdC wmHTB dLR"><b></b><c></c><d></d></f> +<f class="fdC wmHTB dRL"><b></b><c></c><d></d></f> +<f class="fdC wmVLR dLR"><b></b><c></c><d></d></f> +<f class="fdC wmVLR dRL"><b></b><c></c><d></d></f> +<f class="fdC wmVRL dLR"><b></b><c></c><d></d></f> +<f class="fdC wmVRL dRL"><b></b><c></c><d></d></f> +<f class="fdC wmSLR dLR"><b></b><c></c><d></d></f> +<f class="fdC wmSLR dRL"><b></b><c></c><d></d></f> +<f class="fdC wmSRL dLR"><b></b><c></c><d></d></f> +<f class="fdC wmSRL dRL"><b></b><c></c><d></d></f> + +<f class="fdCR wmHTB dLR"><b></b><c></c><d></d></f> +<f class="fdCR wmHTB dRL"><b></b><c></c><d></d></f> +<f class="fdCR wmVLR dLR"><b></b><c></c><d></d></f> +<f class="fdCR wmVLR dRL"><b></b><c></c><d></d></f> +<f class="fdCR wmVRL dLR"><b></b><c></c><d></d></f> +<f class="fdCR wmVRL dRL"><b></b><c></c><d></d></f> +<f class="fdCR wmSLR dLR"><b></b><c></c><d></d></f> +<f class="fdCR wmSLR dRL"><b></b><c></c><d></d></f> +<f class="fdCR wmSRL dLR"><b></b><c></c><d></d></f> +<f class="fdCR wmSRL dRL"><b></b><c></c><d></d></f> + +</body> +</html>