summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html')
-rw-r--r--testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html50
1 files changed, 50 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html b/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html
new file mode 100644
index 0000000000..5502ba7ef1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+ <title>CSS Writing Modes Test Reference: positioning of a sideways-lr block alongside vertical-lr floats</title>
+
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+ <meta content="image" name="flags">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+
+ div {
+ block-size: 100px;
+ }
+
+ div#first-olive-float {
+ background-color: olive;
+ float: left;
+ inline-size: 50%;
+ }
+
+ div#second-blue-float-with-clear {
+ background-color: blue;
+ clear: left;
+ float: left;
+ inline-size: 25%;
+ }
+
+ div#orange-bfc {
+ background-color: orange;
+ inline-size: 75%;
+ display: flow-root; /* Establishes a block formatting context */
+ }
+ </style>
+
+ <body>
+ <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
+ <!--
+ The image says:
+ Test passes if the orange rectangle
+ is below the blue rectangle.
+ -->
+
+ <div id="first-olive-float">&nbsp;</div>
+ <div id="second-blue-float-with-clear">&nbsp;</div>
+ <div id="orange-bfc">&nbsp;</div>
+ </body>
+</html>