diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-flexbox/reference | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/reference')
70 files changed, 2331 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-baseline-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-baseline-ref.html new file mode 100644 index 0000000000..d1c579045e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-baseline-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<link href="../support/flexbox.css" rel="stylesheet"> +<style> +body { + margin: 0; +} +</style> + +<body> +<div class='flexbox column align-items-flex-start'> + <h1>This text</h1> + <p>should be left aligned.</p> +</div> + +<div style='margin-left: auto; width: max-content;' class='flexbox column align-items-flex-start'> + <h1>This text</h1> + <p>should be right aligned.</p> +</div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content-001-ref.html new file mode 100644 index 0000000000..bd46882033 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background: green; + height: 100px; + width: 300px; + } +</style> +<body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_center-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_center-ref.html new file mode 100644 index 0000000000..e6a3d8820b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_center-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_center</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 200px; + width: 80px; +} +#spacer { + width: 50px; + height: 25px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> +2. the rectangle 1, 2, 3 appear in middle left of red rectangle.</p> +<div id=test><div id=spacer></div><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-end-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-end-ref.html new file mode 100644 index 0000000000..03ebcbed24 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-end-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_flex-end</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 200px; + width: 80px; +} +#spacer { + width: 50px; + height: 50px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> +2. the rectangle 1, 2, 3 appear in bottom left of red rectangle.</p> +<div id=test><div id=spacer></div><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-start-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-start-ref.html new file mode 100644 index 0000000000..061bec5e24 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-start-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_flex-start</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 200px; + width: 80px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> +2. the rectangle 1, 2, 3 appear in upper left of red rectangle.</p> +<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-around-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-around-ref.html new file mode 100644 index 0000000000..cab31db1f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-around-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_space-around</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 210px; + width: 80px; +} +#spacer { + width: 50px; + height: 20px; +} +#halfspacer { + width: 50px; + height: 10px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br> +2. the rectangle 1, 2, 3 are distributed such that the empty space between any two adjacent rectangle is the same, and the empty space of the column before the first and after the last rectangle are half the size of the other empty spaces.</p> +<div id=test><div id=halfspacer></div><div id=test01>1</div><div id=spacer></div><div id=test02>2</div><div id=spacer></div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-between-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-between-ref.html new file mode 100644 index 0000000000..97b56e23ef --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-between-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_space-between</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 200px; + width: 80px; +} +#spacer { + width: 50px; + height: 25px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br> +2. No gap between the top of red rectangle and the top of rectangle 1, no gap between the bottom of red rectangle and the bottom of rectangle 3 too, and rectangle 2 is distributed so that the empty space between rectangle 1 and rectangle 3 is the same.</p> +<div id=test><div id=test01>1</div><div id=spacer></div><div id=test02>2</div><div id=spacer></div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_stretch-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_stretch-ref.html new file mode 100644 index 0000000000..f66a1ad959 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_stretch-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_stretch</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 210px; + width: 80px; +} +#spacerone { + width: 50px; + height: 20px; +} +#spacertwo { + width: 50px; + height: 20px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br> +2. No gap between the top of red rectangle and the top of rectangle 1, and rectangle 1 , 2, 3 are distributed so that the empty space in the column between 1 , 2 , 3 is the same. +<div id=test><div id=test01>1</div><div id=spacerone></div><div id=test02>2</div><div id=spacertwo></div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-items-baseline-overflow-non-visible-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-items-baseline-overflow-non-visible-ref.html new file mode 100644 index 0000000000..c2f6d2353c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-items-baseline-overflow-non-visible-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +.flex { + display: flex; + align-items: baseline; + font: 25px/1 Ahem; +} +</style> + +<body> +<div class="flex"> + <span>XX</span> + <div><div>YY</div></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-self-015-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-self-015-ref.html new file mode 100644 index 0000000000..415a36f42d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-self-015-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<link href="../support/flexbox.css" rel="stylesheet"> + <style> + .flexbox { + border: 1px solid black; + width: 400px; + height: 200px; + } + .item1 { + background: lightblue; + } + .item2 { + background: lime; + } + </style> +</head> +<body> + <p>The test passes if the flex items are properly centered in each column</p> + <div class="flexbox column wrap"> + <div class="item1 align-self-center">centeredWithMargins</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/anonymous-block-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/anonymous-block-ref.html new file mode 100644 index 0000000000..fc8fe9f991 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/anonymous-block-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> +<body> +<p>This tests that text nodes that have a flexbox as a parent are wrapped in +anonymous blocks.</p> +<div>This text should be visible.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/auto-height-column-with-border-and-padding-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/auto-height-column-with-border-and-padding-ref.html new file mode 100644 index 0000000000..a5ed108546 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/auto-height-column-with-border-and-padding-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +Tests that auto-height column flexboxes with border and padding correctly size their height to their content. +<div style="border: 5px solid salmon; padding: 5px; overflow: scroll"> + <div> + <div style="height: 50px; background-color: pink"> + <div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/auto-height-with-flex-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/auto-height-with-flex-ref.html new file mode 100644 index 0000000000..d56fe356dc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/auto-height-with-flex-ref.html @@ -0,0 +1,5 @@ +<div style="border:1px solid purple;"> +<div>Header</div> +<div>Flexible content<br> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/auto-margins-003-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/auto-margins-003-ref.html new file mode 100644 index 0000000000..4c8f69c8a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/auto-margins-003-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<link href="../support/flexbox.css" rel="stylesheet"> + <style> + .flexbox { + border: 1px solid black; + width: 400px; + height: 200px; + } + .item1 { + background: lightblue; + } + .item2 { + background: lime; + } + </style> +</head> +<body> + <p>The test passes if the flex items are properly centered in each column</p> + <div class="flexbox column"> + <div class="item1 align-self-center">centeredWithMargins</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + </div> + <div style="writing-mode: vertical-lr;"> + <div class="flexbox column"> + <div class="item1 align-self-center">centeredWithMargins</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/content-height-with-scrollbars-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/content-height-with-scrollbars-ref.html new file mode 100644 index 0000000000..8a1484f693 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/content-height-with-scrollbars-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<style> +.outer { + height: 100px; + overflow:scroll; +} +.outer > div, td:nth-child(1) { + background-color: lightgreen; +} +td:nth-child(2) { + background-color: lightblue; +} +table, td { + padding: 0; + border-spacing: 0; +} +</style> +</head> +<body> +<p>This tests that when setting the height of a flex item to a percentage +height, we use the content height with scrollbars. The content should not be +scrollable in any of the test cases below.</p> + +<div class="outer"> + <div style="height: 100%"></div> +</div> + +<div class="outer"> + <div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div> +</div> + +<div class="outer"> + <div style="display:inline-block; height: 50px; width: 50%;"></div><div + style="display:inline-block; height: 50px; width: 50%; background-color: lightblue"></div> +</div> +<div class="outer" style="padding: 10px; height: auto"> + <table style="margin: 0; padding: 0; width: 600px"> + <tr> + <td style="width: 50%; height: 50px"></td> + <td style="width: 50%; height: 50px"></td> + </tr> + </table> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html new file mode 100644 index 0000000000..f0a3225502 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<style> +body { + margin: 0; +} + +.testcase { + position: absolute; +} + +.testcase div { + background-color: green; +} +</style> +</head> +<body> +This test passes if no red is showing. + +<div style="position: relative; background-color: transparent;"> + +<div class="testcase" style="top:0; left: 0"> + <div style="width: 100px; height: 50px"></div> + <div style="width: 100px; overflow-x: scroll"></div> + <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 0; left: 150px"> + <div style="width: 100px"></div> + <div style="overflow-y: scroll"></div> + <div style="width: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 0; left: 300px"> + <div style="width: 100px"></div> + <div style="overflow-y: scroll"></div> + <div style="width: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="top: 0; left: 450px"> + <div style="width: 100px; height: 50px"></div> + <div style="width: 100px; overflow-x: scroll"></div> + <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="top: 100px; left: 0"> + <div style="width: 100px; height: 50px; "></div> + <div style="width: 100px; overflow-x: scroll"></div> + <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 100px; left: 150px"> + <div style="width: 90px; overflow-y: scroll"></div> + <div style="width: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="top: 100px; left: 300px"> + <div style="width: 100px; height: 40px; overflow-x: scroll"></div> + <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 100px; left: 450px"> + <div style="width: 100px"></div> + <div style="overflow-y: scroll"></div> + <div style="width: 10px; position: relative; z-index: -1"></div> +</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/css-box-justify-content-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/css-box-justify-content-ref.html new file mode 100644 index 0000000000..e8377473fd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/css-box-justify-content-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox |css-box-justify-content</title> +<link rel="author" href="mailto:ava656094@gmail.com" title="xiaoxia"> +<style> +#flexbox { + background: green; + display: inline-block; + width: 300px; + height: 40px; + text-align:right; +} +.item{ + display: inline-block; + text-align:left; + width:50px; + height: 30px; + } +</style> + +<p>This test passes if the DIV5's position in the end and the div is Horizontal layout</p> +<div id="flexbox"> + <div class="item" style="background-color: rgb(242, 210, 80); color: rgb(41, 119, 248);">DIV1</div> + <div class="item" style="background-color: rgb(110, 8, 7); color: rgb(162, 152, 22);">DIV2</div> + <div class="item" style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);">DIV3</div> + <div class="item" style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);">DIV4</div> + <div class="item" style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);">DIV5</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/css-flexbox-img-expand-evenly-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/css-flexbox-img-expand-evenly-ref.html new file mode 100644 index 0000000000..146242074b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/css-flexbox-img-expand-evenly-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Eiji Kitamura" href="mailto:agektmr+github@gmail.com"> + <style type="text/css"> + + /* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */ + div.flexbox { + height: 50px; + width: 300px; + border: 2px dotted black; + } + img { + width: 98px; + height: 48px; + background: purple; + border: 1px solid white; + } + + </style> +</head> +<body> + <p>3 rectangular images fill out border.</p> + + <!-- PAGE CONTENT --> + <div class="flexbox"> + <!-- It is important that there is no linebreak between the <img> tags. + The line break would be rendered as whitespace, breaking the test. + --> + <img src="../support/solidblue.png" /><img src="../support/solidblue.png" /><img src="../support/solidblue.png" /> + </div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-center-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-center-ref.html new file mode 100644 index 0000000000..79e5022be2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-center-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - center</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 6em; + width: 20em; + background: red; + margin: 1em; + border: 1px solid black; + } + span:nth-child(3), span:nth-child(4) { + margin: 2em 1em; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 0 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a centered 2*2 table.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-end-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-end-ref.html new file mode 100644 index 0000000000..767ecaf187 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-end-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - flex-end</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 8em; + width: 20em; + background: red; + margin: 1em; + padding-top: 6em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-around-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-around-ref.html new file mode 100644 index 0000000000..98f7b0228b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-around-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - space-between</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + background: red; + margin: 1em; + border: 1px solid black; + } + + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 2.5em 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-between-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-between-ref.html new file mode 100644 index 0000000000..4813bd5608 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-between-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - space-between</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + background: red; + margin: 1em; + border: 1px solid black; + } + .first, .second { + margin-bottom: 112px; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p> + <div class="container"> + <span class="first">first</span> + <span class="second">second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-start-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-start-ref.html new file mode 100644 index 0000000000..5fe4eadd95 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-start-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - flex-start</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + background: red; + margin: 1em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-aspect-ratio-img-row-014-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-aspect-ratio-img-row-014-ref.html new file mode 100644 index 0000000000..ea36ff4030 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-aspect-ratio-img-row-014-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Reference</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> +<style> +span { + display: inline-block; + background-color: green; + height: 225px; + width: 90px; +} + +div { + border: 1px solid black; + height: 225px; + width: 300px; +} +</style> + +<p>Test passes if there is <strong>no red</strong> visible on the page.</p> +<div><span></span></div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-box-float-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-box-float-ref.html new file mode 100644 index 0000000000..726257dbf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-box-float-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>flexible box flex item float effect</title> + <link rel="author" title="zhouli" href="mailto:liz@oupeng.com"> + <style> + #myDiv{ + position: relative; + } + #myDiv p{ + width: 300px; + height: 30px; + display: inline-block; + margin: 0; + } + #first-p{ + background-color: green; + } + #second-p{ + background-color: blue; + } + #myDiv #fail-flag{ + width: 600px; + background-color: red; + position: absolute; + left: 0; + top: 0; + z-index: -1; + } + </style> +</head> +<body> + <p>'float' have no effect on a flex item.</p> + <p>The test passes if there is a green square, a blue square and no red square.</p> +<div id="myDiv"> + <p id="first-p"> </p><p id="second-p"> </p><p id="fail-flag"> </p> +</div> +<script> +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-box-wrap-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-box-wrap-ref.html new file mode 100644 index 0000000000..de24c4609b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-box-wrap-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexbox Test: flex-wrap: wrap</title> + <link rel="author" title="Tsuyoshi Tokuda" href="mailto:tokuda109@gmail.com"> + <style type="text/css"> + + .box { + margin: 0; + padding-left: 0; + width: 200px; + } + .item { + float: left; + list-style-type: none; + width: 120px; + height: 100px; + background-color: green; + } + + </style> +</head> +<body> + <p>There should be a green block with no red.</p> + + <ul class="box"> + <li class="item">width: 120px</li> + <li class="item">width: 120px</li> + </ul> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-container-margin-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-container-margin-ref.html new file mode 100644 index 0000000000..8241c14b7c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-container-margin-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + } + .flex-item.first{ + margin-left:20px; + } + .flex-item.last{ + margin-right: 20px; + } +</style> +</head> +<body> + <div class="flex-container"> + <div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-ref.html new file mode 100644 index 0000000000..90c168766c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex-direction proprety - column</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + background: red; + margin: 1em 0; + border: 1px solid black; + } + span ~ span { + margin: 2em 1em 1em; + } + span { + display: block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arraged vertically.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-reverse-ref.html new file mode 100644 index 0000000000..576a5779e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-reverse-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + background: red; + margin: 1em 0; + border: 1px solid black; + } + span ~ span { + margin: 2em 1em 1em; + } + span { + display: block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arraged vertically and reversed.</p> + <div class="container"> + <span>forth</span> + <span>third</span> + <span>second</span> + <span>first</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-modify.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-modify.html new file mode 100644 index 0000000000..42f9de95a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-modify.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex flow direction</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<style> + .flex-container{ + display: flex; + margin:20px; + background: #333; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + + .flex-container.flex-direction-row{ + flex-direction : row; + } + + .flex-container.flex-direction-row-reverse{ + flex-direction : row-reverse; + } + + .flex-container.flex-direction-column{ + flex-direction : column; + } + .flex-container.flex-direction-column-reverse{ + flex-direction : column-reverse; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div id="flex_container" class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-row-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-row-reverse-ref.html new file mode 100644 index 0000000000..5f9d45f0fb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-row-reverse-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex-direction proprety - row-reverse</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + background: red; + margin: 1em 0; + border: 1px solid black; + text-align: right; + } + span { + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + text-align: left; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arranged horizontally and the order of cells are reversed.</p> + <div class="container"> + <span>forth</span><span>third</span><span>second</span><span>first</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-with-element-insert.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-with-element-insert.html new file mode 100644 index 0000000000..d7faf34eb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-with-element-insert.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex flow direction</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + .flex-container.flex-direction-row{ + flex-direction : row; + } + .flex-container.flex-direction-row-reverse{ + text-align: right; + } + + .flex-container.flex-direction-column{ + padding:20px 0px; + } + + .flex-container.flex-direction-column .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column .flex-item.last{ + margin-bottom:0px; + } + + .flex-container.flex-direction-column-reverse{ + padding:20px 0px; + } + + .flex-container.flex-direction-column-reverse .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column-reverse .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column-reverse .flex-item.last{ + margin-bottom:0px; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">new</div></div> + + <h1>flex-direction:row-reverse</h1> + <div class="flex-container flex-direction-row-reverse"><div class="flex-item">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div> + + <h1>flex-direction:column</h1> + <div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item last">new</div></div> + + <h1>flex-direction:column-reverse</h1> + <div class="flex-container flex-direction-column-reverse"><div class="flex-item first">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction.html new file mode 100644 index 0000000000..27be911458 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex flow direction</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + .flex-container.flex-direction-row{ + flex-direction : row; + } + .flex-container.flex-direction-row-reverse{ + text-align: right; + } + + .flex-container.flex-direction-column{ + padding:20px 0px; + } + + .flex-container.flex-direction-column .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column .flex-item.last{ + margin-bottom:0px; + } + + .flex-container.flex-direction-column-reverse{ + padding:20px 0px; + } + + .flex-container.flex-direction-column-reverse .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column-reverse .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column-reverse .flex-item.last{ + margin-bottom:0px; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <h1>flex-direction:row-reverse</h1> + <div class="flex-container flex-direction-row-reverse"><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div> + + <h1>flex-direction:column</h1> + <div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item last">3</div></div> + + <h1>flex-direction:column-reverse</h1> + <div class="flex-container flex-direction-column-reverse"><div class="flex-item first">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-inline-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-inline-ref.html new file mode 100644 index 0000000000..369de990ff --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-inline-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: display proprety - inline-flex</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + } + .greenSquare { + display: inline-block; + margin-top: -200px; + background: green; + } + </style> +</head> +<body> + <p>The test passed if you see a green block which its text is 'Success!'.</p> + <div class="container"> + <!-- This is the square that should not be visible if the test passes --> + <div class="greenSquare">Success!</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-item-vertical-align-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-item-vertical-align-ref.html new file mode 100644 index 0000000000..82d7a6ea31 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-item-vertical-align-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link href="../support/flexbox.css" rel="stylesheet"> + +<style> +.flexbox { + background-color: lightgrey; +} +</style> + +<div class='flexbox'> + <!-- flex item: block child --> + <div>block</div> + <!-- flex item: anonymous block box around inline content --> + anonymous item 2 + <!-- flex item: inline child --> + <span>item 3</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-item-z-ordering-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-item-z-ordering-001-ref.html new file mode 100644 index 0000000000..a97de6e826 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-item-z-ordering-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<style> +.container > * { + position: absolute; +} +.large { + width: 50px; + height: 50px; +} +.small { + left: 25px; + height: 25px; + width: 50px; +} +</style> +<div>The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div> +<div class="container" style="position:relative"> + <div class="large" style="z-index: 1; background-color: salmon;"></div> + <div class="large" style="z-index: 100; background-color: orange; left: 50px;"></div> + <div class="small" style="z-index: 150; background-color: green"></div> + <div class="small" style="z-index: 50; background-color: purple; top: 25px;"></div> +</div> +<div class="container" style="position:relative; top: 50px"> + <img class="large" style="z-index: 1; background-color: salmon;"></img> + <img class="large" style="z-index: 100; background-color: orange; left: 50px;"></img> + <img class="small" style="z-index: 150; background-color: green"></img> + <img class="small" style="z-index: 50; background-color: purple; top: 25px;"></img> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-margin-no-collapse-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-margin-no-collapse-ref.html new file mode 100644 index 0000000000..eac4ed57d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-margin-no-collapse-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Reference File</title> + <link rel="author" title="Ping Huang" href="mailto:phuangce@gmail.com" /> + <style type="text/css"> + #container { + position: absolute; + top: 100px; + left: 10px; + width: 200px; + height: 300px; + } + + .box { + width: 100px; + height: 100px; + background-color: green; + } + + #box1 { + margin: 50px 0; + } + + #box2 { + margin: 100px 0; + } + + </style> +</head> +<body> + <p>The test passes if there are two green boxes and no red.</p> + <div id="container"> + <div id="box1" class="box"></div> + <div id="box2" class="box"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-vertical-align-effect.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-vertical-align-effect.html new file mode 100644 index 0000000000..0d14362a37 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-vertical-align-effect.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: 'display' property set to 'flex'</title> + <link rel="author" title="Hua Zhao" href="mailto:zhaohua.design@163.com" /> + + <style type="text/css"> + input{ + margin:0; + padding:0; + vertical-align:top; + float: left; + } + </style> +</head> +<body> + + <div id="container"> + <input type="text" value="input1" /> + <input type="radio" /> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-column-percentage-ignored-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-column-percentage-ignored-ref.html new file mode 100644 index 0000000000..812b6797ee --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-column-percentage-ignored-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<style> +.flexbox { + max-height: 10px; + overflow: hidden; +} +</style> + +<body> + +<div class="flexbox"> + <div> + The height here should be ignored. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-ref.htm b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-ref.htm new file mode 100644 index 0000000000..2d52c62122 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-ref.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference: Flexbox direction and wrapping</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <style> + + /* Ref test styles */ + + .flex-wrapper div{ + display: inline-block; + } + + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-wrap-nowrap-ref.htm b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-wrap-nowrap-ref.htm new file mode 100644 index 0000000000..391ddeaa28 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-wrap-nowrap-ref.htm @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference: Flexbox flex-wrap: nowrap</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <style type="text/css"> + div { + width: 120px; + height: 120px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-005-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-005-ref.html new file mode 100644 index 0000000000..6bc8a27f62 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-005-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Reference</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> +<style> +div { + background-color: green; + height: 50px; + width: 100px; +} +br { margin: 50px; } +</style> + +<p>Test passes if there is <strong>no red</strong> visible on the page.</p> +<div></div> +<br> +<div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-006-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-006-ref.html new file mode 100644 index 0000000000..1f1b7dfb24 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-006-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Reference</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> +<style> +.box { + width: 100px; + height: 100px; + background: green; + border: 1px solid black; +} +</style> + +<p>Test passes if there are two 100x100 green squares.</p> +<div class="box"></div> + +<br> + +<div class="box"></div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-order-only-flexitems-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-order-only-flexitems-ref.html new file mode 100644 index 0000000000..74697723c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-order-only-flexitems-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: order only affects flex items</title> + </head> + <body> + <p>Test passes if the paragraph below reads 'First, Second, Third'.</p> + <p>First, Second, Third</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-with-multi-column-property-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-with-multi-column-property-ref.html new file mode 100644 index 0000000000..fbb8fcda3e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-with-multi-column-property-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link href="resources/flexbox.css" rel="stylesheet"> +<style> +.flexbox, .inline-flexbox { + width: 20em; + font-kerning: none; +} +</style> +<div class="flexbox"> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> + +<div class="inline-flexbox"> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox_quirks_body-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox_quirks_body-ref.html new file mode 100644 index 0000000000..164784fbd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox_quirks_body-ref.html @@ -0,0 +1,17 @@ +<!doctype quirks> +<title>CSS Test: Flex body in quirks mode</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org"> +<style> +html { + margin:3px 6px 9px 12px; + padding: 0px; + background-color: green; +} +body { + display: block; + margin: 7px 11px 14px 23px;; + padding: 0px; + background-color: yellow; +} +</style> +Flex body in quirks mode should fill viewport except for margins. diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.html new file mode 100644 index 0000000000..0a8869a145 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Ryuichi Nonaka" href="mailto:ryuichi1com@gmail.com"> + <style type="text/css"> + .container { + position: relative; + + width: 200px; + height: 200px; + } + + .item + { + position: absolute; + + width: 100px; + height:100px; + } + + .item.one + { + top: 0; + right: 0; + + background: red; + } + .item.two + { + top: 100px; + right: 0; + + background: yellow; + } + .item.three + { + top: 0; + right: 100px; + + background: green; + } + .item.four + { + top: 100px; + right: 100px; + + background: blue; + } + </style> +</head> +<body> + <p>The test passes if you see green and red top, blue and yellow bottom.</p> + <div id="test"> + <div class="container"> + <div class="item one"></div> + <div class="item two"></div> + <div class="item three"></div> + <div class="item four"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexible-order-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexible-order-ref.html new file mode 100644 index 0000000000..12e94ba598 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexible-order-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head><title>CSS Test: Change the value of 'order' property</title> +<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" /> + +<style> + +.box { + margin:0 auto; + background:#CCC; + border-radius:5px; + width:600px; +} + +.box div { + margin:0; + width:200px; + float:left; + text-align:center; +} + +.box .red { + background:#F00; +} +.box .blue { + background:#00F; +} +.box .black { + color:#FFF; + background:#000; +} + + + + +</style> + +</head> + +<body> + + +<!-- FLEX CONTAINER --> +<div class="box"> + <div class="blue">B</div> + <div class="red">A</div> + <div class="black">C</div> +</div> + + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexitem-stretch-range-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexitem-stretch-range-ref.html new file mode 100644 index 0000000000..01c617698e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexitem-stretch-range-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<body> +<p>When stretching a range input, the thumb should be centered vertically.</p> +<div style="height: 200px;"> + <input type="range" style="width: 100%; height: 100%; margin: 0; box-sizing: border-box;"> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/item-with-max-height-and-scrollbar-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/item-with-max-height-and-scrollbar-ref.html new file mode 100644 index 0000000000..b0b2469c2c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/item-with-max-height-and-scrollbar-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>css-flexbox: Tests that we correctly size a flex item with a scrollbar and max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> + +<div style="width: 100px;"> + <div style="overflow: scroll; background: green;"> + <div style="height: 100px; width: 100px;"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/justify-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/justify-content-001-ref.html new file mode 100644 index 0000000000..cea76d4c18 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/justify-content-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + #blue { + background: blue; + height: 100px; + width: 150px; + } + #orange { + background: orange; + height: 100px; + left: 150px; + position: relative; + top: -100px; + width: 150px; + } +</style> +<body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="blue"></div> + <div id="orange"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-001-ref.html new file mode 100644 index 0000000000..5174bd1d9f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flex-basis Test</title> + <link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub+github@gmail.com"> + <style type="text/css"> + .flex { + width: 200px; + height: 200px; + } + + .flex > * { + background: green; + height: 200px; + width: 100px; + overflow: scroll; + display: inline-block; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p> + + <div class="flex"> + <div></div><div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-002-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-002-ref.html new file mode 100644 index 0000000000..b3a18185dc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-002-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flex-basis Test</title> + <link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub+github@gmail.com"> + <style type="text/css"> + .flex { + width: 200px; + height: 200px; + } + + .flex > * { + background: green; + height: 100px; + width: 200px; + overflow: scroll; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p> + + <div class="flex"> + <div></div><div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/multiline-column-max-height-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/multiline-column-max-height-ref.html new file mode 100644 index 0000000000..a9601fde2d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/multiline-column-max-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.flex { + height: 200px; + background: blue; +} +</style> +There should only be a blue box below, and the word "FAIL" should +not be seen. +<div class="flex"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/multiline-reverse-wrap-baseline-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/multiline-reverse-wrap-baseline-ref.html new file mode 100644 index 0000000000..d4911b33fc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/multiline-reverse-wrap-baseline-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<style> +table { + border-spacing: 0; + border-collapse: collapse; + margin-bottom: 10px; +} + +td { + padding: 0; + width: 100px; +} +</style> +</head> +<body> + +<table style="background-color: #aaa"> +<tr><td colspan=2 style="height: 5px"></td></tr> +<tr> + <td style="vertical-align: top"><div style="background-color: pink">third</div></td> + <td style="background-color: yellow">fourth<br>fourth</td> +</tr> +<tr> + <td style="background-color: lightblue">first<br>first<br>first</td> + <td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td> +</tr> +</table> + +<table style="background-color: #aaa"> +<tr> + <td style="vertical-align: top"><div style="background-color: pink">third</div></td> + <td style="background-color: yellow">fourth<br>fourth</td> +</tr> +<tr><td colspan=2 style="height: 5px"></td></tr> +<tr> + <td style="background-color: lightblue">first<br>first<br>first</td> + <td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td> +</tr> +</table> + +<table style="background-color: #aaa"> +<tr> + <td style="vertical-align: top; background-color: lightblue; height: 100px">first</td> + <td style="vertical-align: bottom"><div style="background-color: lightgreen">second</div><div> </div></td> + <td style="vertical-align: bottom"><div style="background-color: pink">third<br>third</div></td> +</tr> +</table> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/multiline-shrink-to-fit-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/multiline-shrink-to-fit-ref.html new file mode 100644 index 0000000000..1429b25112 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/multiline-shrink-to-fit-ref.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<html> +<style> +.testcase { + float: left; + background-color: #aaa; +} + +.testcase > :nth-child(1) { + background-color: lightblue; +} +.testcase > :nth-child(2) { + background-color: lightgreen; +} +.testcase > :nth-child(3) { + background-color: pink; +} +.testcase > :nth-child(4) { + background-color: yellow; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} + +td { + padding: 0; + width: 100px; +} + +</style> +<body> + +<div class="testcase" style="height: 60px; width: 100px"> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 20px"></div> +</div> +<p style="clear:left">The grey background should be 100px wide.</p> + +<div class="testcase" style="height: 30px; width: 100px"> + <table> + <td> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px; background-color: lightgreen"></div> + </td> + <td> + <div style="width: 100px; height: 10px; background-color: pink"></div> + <div style="width: 100px; height: 20px; background-color: yellow"></div> + </td> + </table> +</div> +<p style="clear:left">The grey background should be 100px wide.</p> + +<div style="width: 150px"> +<div class="testcase" style="height: 60px; width: 100px"> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 20px"></div> +</div> +</div> +<p style="clear:left">The grey background should be 100px wide.</p> + +<div style="width: 150px"> +<div class="testcase" style="height: 35px; width: 100px;"> + <table> + <td> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px; background-color: lightgreen"></div> + </td> + <td> + <div style="width: 100px; height: 10px; background-color: pink"></div> + <div style="width: 100px; height: 20px; background-color: yellow"></div> + </td> + </table> +</div> +</div> +<p style="clear:left">The grey background should be 100px wide and 5px should +stick out the bottom.</p> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/negative-margins-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/negative-margins-001-ref.html new file mode 100644 index 0000000000..186c5d130c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/negative-margins-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference for negative margins</title> +<link rel="author" title="Google Inc." href="https://www.google.com/"> +<style> + .container { + width: 40px; + height: 10px; + background-color: green; + border: 3px black solid; + } +</style> +<body> + <p>You should see a green rectangle with a black border, 40px wide. You should see no red.</p> + + <div class="container"> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/nested-orthogonal-flexbox-relayout-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/nested-orthogonal-flexbox-relayout-ref.html new file mode 100644 index 0000000000..124ecf843c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/nested-orthogonal-flexbox-relayout-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<style> +#column { + display: flex; + flex-direction: column; + border: 5px solid yellow; + width: 200px; +} + +#row { + display: flex; + flex-direction: row; + border: 5px solid blue; +} + +.item { + border: 5px solid green; +} +</style> +<body> +<div id="column"> + <div id="row"> + <div class="item">This text should not overflow its box</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/order-painting-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/order-painting-ref.html new file mode 100644 index 0000000000..bf7bc30d01 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/order-painting-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> +<body> +<p>This test passes if there is no red showing.</p> + +<div style="width: 100px; height: 100px; background-color: green"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-001-ref.html new file mode 100644 index 0000000000..2c2a825f41 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-001-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<title>CSS Flexbox: scrollable overflow area (LTR)</title> +<style> + +.set { + clear: both; + margin: 1em; +} + +.ref { + display: flex; + overflow: scroll; + border: solid blue; + background: aqua; + margin: 1em 0.5em; + float: left; + width: 80px; + height: 80px; +} +div { + flex: none; +} + +.ref:first-child { + border-color: orange; +} +.ref > div { + border: 30px solid aqua; + width: 30px; + height: 30px; + background: teal; +} +</style> + +<p>Test passes if all blue boxes in each row are identical to its first orange one, +including the size and position of the scrollbar. + +<div class="set"> + <div class="ref"> + <div></div> + </div> + <div class="ref" style="flex-flow: row"> + <div></div> + </div> + <div class="ref" style="flex-flow: row wrap"> + <div></div> + </div> + <div class="ref" style="flex-flow: column"> + <div></div> + </div> + <div class="ref" style="flex-flow: column wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap-reverse"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-002-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-002-ref.html new file mode 100644 index 0000000000..f5d06c6cf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-002-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<title>CSS Flexbox: scrollable overflow area (RTL)</title> +<style> + +.set { + clear: both; + margin: 1em; + direction: rtl; +} + +.ref { + display: flex; + overflow: scroll; + border: solid blue; + background: aqua; + margin: 1em 0.5em; + float: left; + width: 80px; + height: 80px; +} +div { + flex: none; +} + +.ref:first-child { + border-color: orange; +} +.ref > div { + border: 30px solid aqua; + width: 30px; + height: 30px; + background: teal; +} +</style> + +<p>Test passes if all blue boxes in each row are identical to its first orange one, +including the size and position of the scrollbar. + +<div class="set"> + <div class="ref"> + <div></div> + </div> + <div class="ref" style="flex-flow: row"> + <div></div> + </div> + <div class="ref" style="flex-flow: row wrap"> + <div></div> + </div> + <div class="ref" style="flex-flow: column"> + <div></div> + </div> + <div class="ref" style="flex-flow: column wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap-reverse"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-003-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-003-ref.html new file mode 100644 index 0000000000..2d9bf19922 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-003-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexible Box Layout Reference: Test flex container's overflow rect</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + .set { + clear: both; + margin: 1em; + } + + .test { + display: flex; + padding: 10px; + width: 60px; + height: 60px; + background: teal; + margin: 1em 0.5em; + float: left; + } + </style> + + <p>Test passes if all the teal boxes have no scrollbars.</p> + + <!-- This set tests emply flex containers. --> + <div class="set"> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + </div> + + <!-- This set tests flex containers having only abs-pos children, but no flex items. --> + <div class="set"> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + </div> + + <!-- This set tests flex containers having a small centered flex item. --> + <div class="set"> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + </div> + + <!-- This set tests flex containers having a relative positioned flex item. --> + <div class="set"> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-005-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-005-ref.html new file mode 100644 index 0000000000..633623936a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-005-ref.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> +<head> +<style> +.test-row { + display: flex; + margin-bottom: 5px; +} +.test-row > div { + flex: none; +} + +.container { + margin-right: 5px; + border: 5px solid lightgreen; + width: 100px; +} + +.flexbox { + display: block; + height: 100px; + width: 100px; + overflow: auto; +} + +.flexbox > div { + width: 200px; + height: 200px; + background: radial-gradient(at right 60%, red, yellow, green); +} + +.vertical-rl { + writing-mode: vertical-rl; +} + +</style> +</head> +<body> + <p>Scrollbars should work in all the flexboxes.</p> +</body> +<script> +var results = [ + 'left top', 'left top', 'right top', 'left bottom', + 'right top', 'right top', 'right bottom', 'left top', + 'left top', 'left top', 'left bottom', 'right top']; + +var testContents = ''; +for (var i = 0; i < results.length; ++i) { + if (!(i % 4)) + testContents += "<div class='test-row'>"; + + var containerClass = 'container ' + results[i]; + + // Use vertical-rl here because Firefox and WebKit put vertical scrollbars + // on the left in the vertical-rl test cases, and this is the easiest way to + // match that. + let maybe_vertical = ""; + if (i > 3 && i < 8) + maybe_vertical = " vertical-rl"; + + testContents += + "<div class='" + containerClass + "'>" + + "<div class='flexbox" + maybe_vertical + "'>" + + "<div></div>" + + "</div>" + + "</div>"; + if (i % 4 == 3) + testContents += "</div>"; +} + +document.body.innerHTML += testContents; + +Array.prototype.forEach.call(document.querySelectorAll(".left"), function(element) { + element.firstChild.scrollLeft = -1000; +}); + +Array.prototype.forEach.call(document.querySelectorAll(".right"), function(element) { + element.firstChild.scrollLeft = 1000; +}); + +Array.prototype.forEach.call(document.querySelectorAll(".bottom"), function(element) { + element.firstChild.scrollTop = 1000; +}); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-007-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-007-ref.html new file mode 100644 index 0000000000..1cf9eea0e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-007-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<p>This test should not have a horizontal scrollbar</p> + +<div style="width: 400px; height: 100px; overflow-x: hidden; overflow-y: scroll;"> +<br> +<br> +<br> +<br> +<br> +<br> +<br> +<br> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/percentage-descendant-of-anonymous-flex-item-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/percentage-descendant-of-anonymous-flex-item-ref.html new file mode 100644 index 0000000000..78dac9724f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/percentage-descendant-of-anonymous-flex-item-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: percentage heights in descendants of anonymous flex items</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<p>The test PASS if you see a 200x100 green rectangle inside a button.</p> +<button style="width: 200px; height: 100px;"> + <div style="width: 200px; height: 100%; background-color: green;"></div> +</button> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/percentage-size-subitems-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/percentage-size-subitems-001-ref.html new file mode 100644 index 0000000000..b9883c5f2e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/percentage-size-subitems-001-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Refttest Reference: Percentage size on child of a flex item with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.flex { + display: inline-block; + border: solid 5px black; + width: 150px; + height: 100px; + margin: 10px; + vertical-align: top; +} + +.item { + overflow: scroll; + border: solid magenta; + border-width: 12px 9px 6px 3px; + margin: 1px 2px 3px 4px; + padding: 5px 15px 10px 20px; + background: cyan; + width: calc(100% - 6px); + height: calc(100% - 4px); + box-sizing: border-box; +} + +.subitem { + width: 100%; + height: 100%; + background: yellow; +} + +.horizontalTB { writing-mode: horizontal-tb; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +</style> + +<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="flex"> + <div class="item horizontalTB"> + <div class="subitem"></div> + </div> +</div> + +<div class="flex"> + <div class="item horizontalTB"> + <div class="subitem verticalLR"></div> + </div> +</div> + +<div class="flex"> + <div class="item horizontalTB"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalLR"> + <div class="subitem"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalLR"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalLR"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalRL"> + <div class="subitem"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalRL"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalRL"> + <div class="subitem verticalLR"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/position-fixed-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/position-fixed-001-ref.html new file mode 100644 index 0000000000..4943f537f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/position-fixed-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + +<style> +.fixed-pos{ + position: fixed; + background: green; +} +</style> + +<body> + +<p>You should see no red.</p> + +<div class="fixed-pos" > + <div> + XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX + </div> + <div> + YYYY + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/stretch-input-in-column-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/stretch-input-in-column-ref.html new file mode 100644 index 0000000000..85d2a49e3e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/stretch-input-in-column-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<link href="../support/flexbox.css" rel="stylesheet"> +<style> +.flexbox { + background-color: grey; +} +.flexbox > * { + flex: 1; +} +</style> +<body> +<p>This test passes if none of the form controls overflow.</p> +<div class="flexbox"> + <input> +</div> +<div class="flexbox"> + <textarea></textarea> +</div> +<div class="flexbox"> + <input type="button"> +</div> +<div class="flexbox"> + <select></select> +</div> +<div class="flexbox"> + <legend style="border: 2px solid black">legend</legend> +</div> +<div class="flexbox"> + <div type="border: 4px solid black; padding: 10px;"> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/stretching-orthogonal-flows-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/stretching-orthogonal-flows-ref.html new file mode 100644 index 0000000000..3a3efaad5d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/stretching-orthogonal-flows-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> + +<p>You should see no red.</p> + +<div style="height: 40px; background-color: green;"></div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/text-overflow-on-flexbox-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/text-overflow-on-flexbox-001-ref.html new file mode 100644 index 0000000000..571b9a1357 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/text-overflow-on-flexbox-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div.flex { + display: flex; + width: 100px; + overflow: hidden; +} +</style> +</head> +<body> + <div class="flex"> + AAAAAAAAAAAAAAAAAAAA + </div> + <div class="flex"> + <b>bbbbbbbbbbbbbbbbbbbb</b> + </div> + <div class="flex"> + <div>cccccccccccccccccccc</div> + </div> + <div class="flex"> + DDDDDDDDDDDDDDDDDDDD<b>ee</b>FFFFFFFFFFFFFFFFFFFF + </div> +</body> +</html> |