diff options
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-flexbox')
11 files changed, 214 insertions, 0 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-001.html b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-001.html new file mode 100644 index 00000000000..e1c6ec6d8ae --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - contiguous text runs - node removal</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="anonymous-flex-item-ref.html"> +<p>There should be a space between "two" and "words" below.</p> +<div style="display:flex">two <span id="spanRemove"></span>words</div> +<script> + document.body.offsetTop; + spanRemove.remove(); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-002.html b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-002.html new file mode 100644 index 00000000000..4b571fe5fc3 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-002.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - contiguous text runs - display:none</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="anonymous-flex-item-ref.html"> +<p>There should be a space between "two" and "words" below.</p> +<div style="display:flex">two <span style="display:none"></span>words</div> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-003.html b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-003.html new file mode 100644 index 00000000000..1449e1df60e --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-003.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - contiguous text runs - display:none dynamic</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="anonymous-flex-item-ref.html"> +<p>There should be a space between "two" and "words" below.</p> +<div style="display:flex">two <span id="noneSpan"></span>words</div> +<script> + document.body.offsetTop; + noneSpan.style.display = "none"; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-004.html b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-004.html new file mode 100644 index 00000000000..471fce3680e --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-004.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - contiguous text runs - position:absolute</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="anonymous-flex-item-ref.html"> +<p>There should be a space between "two" and "words" below.</p> +<div style="display:flex">two <span style="position:absolute"></span>words</div> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-005.html b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-005.html new file mode 100644 index 00000000000..c4a75e5000b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-005.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - contiguous text runs - position:absolute dynamic</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="anonymous-flex-item-ref.html"> +<p>There should be a space between "two" and "words" below.</p> +<div style="display:flex">two <span id="absSpan"></span>words</div> +<script> + document.body.offsetTop; + absSpan.style.position = "absolute"; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-006.html b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-006.html new file mode 100644 index 00000000000..8544618efa4 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-006.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - contiguous text runs - position:absolute and node removal</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="anonymous-flex-item-ref.html"> +<style>.abs { position:absolute }</style> +<p>There should be a space between "two" and "words" below.</p> +<div style="display:flex">two <span class="abs"></span><span id="spanRemove"></span><span class="abs"></span>words</div> +<script> + document.body.offsetTop; + spanRemove.remove(); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-ref.html b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-ref.html new file mode 100644 index 00000000000..4a2285400c9 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/anonymous-flex-item-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<p>There should be a space between "two" and "words" below.</p> +two words diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-004-ref.html b/tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-004-ref.html new file mode 100644 index 00000000000..ffb44a82b53 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-004-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Percentages in stretched container</title> +<link rel="author" title="Google" href="https://www.google.com/" /> + +<style> +#outer { + height: 10em; + display: inline-block; + background: green; + vertical-align: top; +} + +#middle { + overflow-x: scroll; + height: 100%; +} + +#inner { + width: 200px; +} + +#outer2 { + height: 10em; + display: inline-block; +} + +#middle2 { + overflow-x: scroll; + height: 10em; +} + +#inner2 { + width: 200px; + height: 100%; + background: green; +} +</style> + +<p>You should not see red nor a vertical scrollbar</p> + +<div id="outer"> + <div id="middle"> + <div id="inner"> + hello + </div> + </div> +</div> + +<div id="outer2"> + <div id="middle2"> + <div id="inner2"> + hello + </div> + </div> +</div> + diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-004.html b/tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-004.html new file mode 100644 index 00000000000..4f162487a71 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-004.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Percentages in stretched container</title> +<link rel="author" title="Google" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes" /> +<link rel="match" href="percentage-heights-004-ref.html"> + +<style> +#outer { + height: 10em; + display: inline-flex; + background: red; +} + +#middle { + overflow-x: scroll; +} + +#inner { + height: 100%; + width: 200px; + background: green; +} + +#outer2 { + height: 10em; + display: inline-flex; + flex-direction: column; + background: red; +} + +#middle2 { + overflow-x: scroll; + flex: 1.0; +} + +#inner2 { + height: 100%; + width: 200px; + background: green; +} +</style> + +<p>You should not see red nor a vertical scrollbar</p> + +<div id="outer"> + <div id="middle"> + <div id="inner"> + hello + </div> + </div> +</div> + +<div id="outer2"> + <div id="middle2"> + <div id="inner2"> + hello + </div> + </div> +</div> + diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-narrow-content.html b/tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-narrow-content.html new file mode 100644 index 00000000000..31cf1125181 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-narrow-content.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: Flex item as table with narrow content</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<meta name="assert" content="A flex item as a table uses the sizing algorithm of the flexbox"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:flex; width:200px;"> + <div style="display:table; flex:1 0; background:green;"> + <div style="width:10px; height:100px;"></div> + </div> + <div style="flex:1 0;"></div> +</div> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-wide-content.html b/tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-wide-content.html new file mode 100644 index 00000000000..475adf548fd --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-wide-content.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: Flex item as table with wide content</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<meta name="assert" content="A flex item as a table uses the sizing algorithm of the flexbox"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:flex; width:100px;"> + <div style="min-width:0; flex:1 1; display:table; background:green;"> + <div style="width:500px; height:100px;"></div> + </div> +</div> |