diff options
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-flexbox/reference')
2 files changed, 110 insertions, 0 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/reference/columns-center-with-margins-and-wrap-001-ref.html b/tests/wpt/web-platform-tests/css/css-flexbox/reference/columns-center-with-margins-and-wrap-001-ref.html new file mode 100644 index 00000000000..415a36f42de --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/reference/columns-center-with-margins-and-wrap-001-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/tests/wpt/web-platform-tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html b/tests/wpt/web-platform-tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html new file mode 100644 index 00000000000..f0a3225502e --- /dev/null +++ b/tests/wpt/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> |