[css-flexbox] Move floated-flexitem.html test from css3/flexbox to WPT
Migrate this test out of third_party/blink/web_tests/css3/flexbox
and into the WPT-specific directory, adding links to the relevant
specs, a test assertion describing its purpose, and a ref link.
Bug: 1063749
Change-Id: I0d0850d82caaf1ac3bdfb55e28179592ea5bdf67
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2120080
Reviewed-by: Robert Ma <robertma@chromium.org>
Reviewed-by: David Grogan <dgrogan@chromium.org>
Commit-Queue: Julie Kim <jkim@igalia.com>
Cr-Commit-Position: refs/heads/master@{#753488}
diff --git a/css/css-flexbox/floated-flexitem.html b/css/css-flexbox/floated-flexitem.html
new file mode 100644
index 0000000..e205003
--- /dev/null
+++ b/css/css-flexbox/floated-flexitem.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: Ensure flex item proper formatting context.</title>
+<link rel="match" href="reference/floated-flexitem-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
+<meta name="assert" content="This test checks that the flex items of a flex container participate in their container’s flex formatting context, not in a block formatting context.">
+<style>
+#flexbox {
+ background-color: lightgrey;
+ align-items: flex-start;
+}
+#flexbox > * {
+ border: 1px solid green;
+}
+</style>
+<body>
+<p>
+This example is from the spec. There should be four flex items. Anonymous item 3 shouldn't have
+a green border because the anonymous block is the flex item.
+</p>
+<div id="flexbox" style="display: flex">
+
+ <!-- flex item: block child -->
+ <div id="item1">block</div>
+
+ <!-- flex item: floated element; floating is ignored -->
+ <div id="item2" style="float: left;">float</div>
+
+ <!-- flex item: anonymous block box around inline content -->
+ anonymous item 3
+
+ <!-- flex item: inline child -->
+ <span>
+ item 4
+ <!-- flex items do not split around blocks -->
+ <div id=not-an-item>item 4</div>
+ item 4
+ </span>
+</div>
+</body>
+</html>
diff --git a/css/css-flexbox/reference/floated-flexitem-ref.html b/css/css-flexbox/reference/floated-flexitem-ref.html
new file mode 100644
index 0000000..ae0cd2e
--- /dev/null
+++ b/css/css-flexbox/reference/floated-flexitem-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<style>
+#flexbox {
+ background-color: lightgrey;
+}
+#flexbox > * {
+ border: 1px solid green;
+ vertical-align: top;
+}
+</style>
+<body>
+<p>
+This example is from the spec. There should be four flex items. Anonymous item 3 shouldn't have
+a green border because the anonymous block is the flex item.
+</p>
+<div id="flexbox">
+ <div style="display: inline-block">block</div><div
+ style="display: inline-block">float</div><div
+ style="display: inline-block; border: 0">anonymous item 3</div><div
+ style="display: inline-block">
+ item 4<br>
+ item 4<br>
+ item 4
+ </div>
+</div>
+</body>
+</html>
