Bug 1183431 - Tests for hypothetical box computation (to determine static position of abspos element) where orthogonal writing modes are involved. r=dholbert
authorJonathan Kew <jkew@mozilla.com>
Thu, 06 Aug 2015 21:00:45 +0100
changeset 288344 b1f46ed83467c00cbd7b8f1a2bcee1e67df5da6e
parent 288343 f3e4d353f5798e3947a152c0aaea5e022c3cc27c
child 288345 2debc63507da51f9f884a0e6e7c3bd9bac254dc3
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1183431
milestone42.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1183431 - Tests for hypothetical box computation (to determine static position of abspos element) where orthogonal writing modes are involved. r=dholbert
layout/generic/crashtests/1183431.html
layout/generic/crashtests/crashtests.list
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1-ref.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1a.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1b.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1c.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2-ref.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2a.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2b.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2c.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3-ref.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3a.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3b.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3c.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4-ref.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4a.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4b.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4c.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5-ref.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5a.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5b.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5c.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6-ref.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6a.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6b.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6c.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7-ref.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7a.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7b.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7c.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8-ref.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8a.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8b.html
layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8c.html
layout/reftests/writing-mode/abspos/blue-32x32.png
layout/reftests/writing-mode/abspos/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/generic/crashtests/1183431.html
@@ -0,0 +1,6 @@
+<!DOCTYPE>
+<html>
+<body>
+<div style="writing-mode: vertical-lr;"><div style="position: fixed;"></div></div>
+</body>
+</html>
--- a/layout/generic/crashtests/crashtests.list
+++ b/layout/generic/crashtests/crashtests.list
@@ -582,8 +582,9 @@ asserts(0-3) load 1134667.html
 asserts(0-3) load 1134667.html
 load 1146103.html
 load 1146107.html
 load 1146114.html
 load 1156222.html
 load 1157011.html
 load 1169420-1.html
 load 1169420-2.html
+asserts(1) load 1183431.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px;
+       writing-mode: vertical-lr; position: absolute; left: 0; top: 0; }
+.test { background: #aaa; position: absolute; left: 0; top: 0; width: 2em; height: 100%; }
+.rel { position: relative; }
+img { position: absolute; left: 0; top: 34px;
+      width: 30px; height: 40px; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="rel">
+  <div class="test"><span class="abc">abc</span><img src=""></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vlr">
+  <div class="test"><span class="abc">abc</span><img src=""></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vlr rel">
+  <div class="test"><span class="abc">abc</span><img src=""></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1c.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vlr">
+  <div class="test rel"><span class="abc">abc</span><img src=""></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px;
+       writing-mode: vertical-lr; position: absolute; left: 0; top: 0; }
+.test { background: #aaa; position: absolute; left: 0; top: 0; width: 2em; height: 100%; }
+.rel { position: relative; }
+img { position: absolute; left: 0; top: 34px;
+      background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="rel">
+  <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+img { position: absolute; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vlr">
+  <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+img { position: absolute; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vlr rel">
+  <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2c.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+img { position: absolute; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vlr">
+  <div class="test rel"><span class="abc">abc</span><img src="blue-32x32.png"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; }
+.vlr { writing-mode: vertical-lr; }
+span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; }
+p { margin: 0; padding: 2px; border: 2px solid green; inline-size: -moz-fit-content; }
+</style>
+<body>
+<div>
+  <div class="vlr"><span>abc def</span><p>xyzzy</p></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3a.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; }
+p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; }
+</style>
+<body>
+<div class="vlr">
+  <div><span>abc def</span><p>xyzzy</p></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3b.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; }
+p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; }
+</style>
+<body>
+<div class="vlr rel">
+  <div><span>abc def</span><p>xyzzy</p></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3c.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; }
+p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; }
+</style>
+<body>
+<div class="vlr">
+  <div class="rel"><span>abc def</span><p>xyzzy</p></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px;
+       position: absolute; right: 0; top: 0; }
+.test { writing-mode: vertical-rl; background: #aaa;
+        position: absolute; right: 0; top: 0; width: 2em; height: 100%; }
+.rel { position: relative; }
+img { position: absolute; right: 0; top: 34px;
+      width: 30px; height: 40px; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="rel">
+  <div class="test"><span class="abc">abc</span><img src=""></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vrl">
+  <div class="test"><span class="abc">abc</span><img src=""></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vrl rel">
+  <div class="test"><span class="abc">abc</span><img src=""></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4c.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vrl">
+  <div class="test rel"><span class="abc">abc</span><img src=""></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px;
+       position: absolute; right: 0; top: 0; }
+.test { writing-mode: vertical-rl; background: #aaa;
+        position: absolute; right: 0; top: 0; width: 2em; height: 100%; }
+.rel { position: relative; }
+img { position: absolute; right: 0; top: 34px;
+      background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="rel">
+  <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+img { position: absolute; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vrl">
+  <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+img { position: absolute; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vrl rel">
+  <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5c.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+img { position: absolute; background: green; border: 5px solid yellow; }
+</style>
+<body>
+<div class="vrl">
+  <div class="test rel"><span class="abc">abc</span><img src="blue-32x32.png"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; }
+.vrl { writing-mode: vertical-rl; }
+span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; }
+p { margin: 0; padding: 2px; border: 2px solid green; inline-size: -moz-fit-content; }
+</style>
+<body>
+<div class="vrl">
+  <div><span>abc def</span><p>xyzzy</p></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6a.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; }
+p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; }
+</style>
+<body>
+<div class="vrl">
+  <div><span>abc def</span><p>xyzzy</p></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6b.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; }
+p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; }
+</style>
+<body>
+<div class="vrl rel">
+  <div><span>abc def</span><p>xyzzy</p></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6c.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; }
+p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; }
+</style>
+<body>
+<div class="vrl">
+  <div class="rel"><span>abc def</span><p>xyzzy</p></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px;
+       writing-mode: vertical-lr; position: absolute; left: 0; top: 0; }
+.test { background: #aaa; position: absolute; left: 0; top: 0; width: 2em; height: 100%; }
+.rel { position: relative; }
+iframe {
+  position: absolute; left: 0; top: 34px;
+  background: yellow; border: 5px solid green;
+  width: 150px; height: 300px; /* XXX this is probably wrong, pending CSSWG clarification */
+}
+</style>
+<body>
+<div class="rel">
+  <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+iframe { position: absolute; background: yellow; border: 5px solid green; }
+</style>
+<body>
+<div class="vlr">
+  <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+iframe { position: absolute; background: yellow; border: 5px solid green; }
+</style>
+<body>
+<div class="vlr rel">
+  <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7c.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vlr { writing-mode: vertical-lr; }
+.rel { position: relative; }
+iframe { position: absolute; background: yellow; border: 5px solid green; }
+</style>
+<body>
+<div class="vlr">
+  <div class="test rel"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px;
+       writing-mode: vertical-rl; position: absolute; right: 0; top: 0; }
+.test { background: #aaa; position: absolute; right: 0; top: 0; width: 2em; height: 100%; }
+.rel { position: relative; }
+iframe {
+  position: absolute; right: 0; top: 34px;
+  background: yellow; border: 5px solid green;
+  width: 150px; height: 300px; /* XXX this is probably wrong, pending CSSWG clarification */
+}
+</style>
+<body>
+<div class="rel">
+  <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+iframe { position: absolute; background: yellow; border: 5px solid green; }
+</style>
+<body>
+<div class="vrl">
+  <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+iframe { position: absolute; background: yellow; border: 5px solid green; }
+</style>
+<body>
+<div class="vrl rel">
+  <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8c.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<style>
+body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; }
+.abc { display: inline-block; border: 2px solid red; inline-size: 30px; }
+.test { background: #aaa; width: 2em; }
+.vrl { writing-mode: vertical-rl; }
+.rel { position: relative; }
+iframe { position: absolute; background: yellow; border: 5px solid green; }
+</style>
+<body>
+<div class="vrl">
+  <div class="test rel"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div>
+</div>
copy from layout/reftests/writing-mode/blue-32x32.png
copy to layout/reftests/writing-mode/abspos/blue-32x32.png
--- a/layout/reftests/writing-mode/abspos/reftest.list
+++ b/layout/reftests/writing-mode/abspos/reftest.list
@@ -94,8 +94,33 @@ fuzzy-if(cocoaWidget,15,5) fuzzy-if(d2d,
 fuzzy-if(cocoaWidget,15,5) fuzzy-if(d2d,102,164) == s71-abs-pos-non-replaced-vrl-082.xht s71-abs-pos-non-replaced-vrl-082-ref.xht
 fuzzy-if(cocoaWidget,15,5) fuzzy-if(d2d,102,164) == s71-abs-pos-non-replaced-vrl-084.xht s71-abs-pos-non-replaced-vrl-084-ref.xht
 fuzzy-if(cocoaWidget,15,5) fuzzy-if(d2d,102,164) == s71-abs-pos-non-replaced-vrl-086.xht s71-abs-pos-non-replaced-vrl-086-ref.xht
 fuzzy-if(cocoaWidget,15,5) fuzzy-if(d2d,102,164) == s71-abs-pos-non-replaced-vrl-088.xht s71-abs-pos-non-replaced-vrl-088-ref.xht
 fuzzy-if(cocoaWidget,15,5) fuzzy-if(d2d,102,164) == s71-abs-pos-non-replaced-vrl-090.xht s71-abs-pos-non-replaced-vrl-090-ref.xht
 fuzzy-if(cocoaWidget,15,5) fuzzy-if(d2d,102,164) == s71-abs-pos-non-replaced-vrl-092.xht s71-abs-pos-non-replaced-vrl-092-ref.xht
 fuzzy-if(cocoaWidget,15,5) fuzzy-if(d2d,102,164) == s71-abs-pos-non-replaced-vrl-094.xht s71-abs-pos-non-replaced-vrl-094-ref.xht
 fuzzy-if(cocoaWidget,15,5) fuzzy-if(d2d,102,164) == s71-abs-pos-non-replaced-vrl-096.xht s71-abs-pos-non-replaced-vrl-096-ref.xht
+
+asserts(2) fails == 1183431-orthogonal-modes-1a.html 1183431-orthogonal-modes-1-ref.html
+== 1183431-orthogonal-modes-1b.html 1183431-orthogonal-modes-1-ref.html
+== 1183431-orthogonal-modes-1c.html 1183431-orthogonal-modes-1-ref.html
+asserts(2) fails == 1183431-orthogonal-modes-2a.html 1183431-orthogonal-modes-2-ref.html
+== 1183431-orthogonal-modes-2b.html 1183431-orthogonal-modes-2-ref.html
+== 1183431-orthogonal-modes-2c.html 1183431-orthogonal-modes-2-ref.html
+asserts(2) fails == 1183431-orthogonal-modes-3a.html 1183431-orthogonal-modes-3-ref.html
+== 1183431-orthogonal-modes-3b.html 1183431-orthogonal-modes-3-ref.html
+== 1183431-orthogonal-modes-3c.html 1183431-orthogonal-modes-3-ref.html
+asserts(2) fails == 1183431-orthogonal-modes-4a.html 1183431-orthogonal-modes-4-ref.html
+== 1183431-orthogonal-modes-4b.html 1183431-orthogonal-modes-4-ref.html
+== 1183431-orthogonal-modes-4c.html 1183431-orthogonal-modes-4-ref.html
+asserts(2) fails == 1183431-orthogonal-modes-5a.html 1183431-orthogonal-modes-5-ref.html
+== 1183431-orthogonal-modes-5b.html 1183431-orthogonal-modes-5-ref.html
+== 1183431-orthogonal-modes-5c.html 1183431-orthogonal-modes-5-ref.html
+asserts(2) fails == 1183431-orthogonal-modes-6a.html 1183431-orthogonal-modes-6-ref.html
+== 1183431-orthogonal-modes-6b.html 1183431-orthogonal-modes-6-ref.html
+fails == 1183431-orthogonal-modes-6c.html 1183431-orthogonal-modes-6-ref.html
+asserts(2) fails == 1183431-orthogonal-modes-7a.html 1183431-orthogonal-modes-7-ref.html
+== 1183431-orthogonal-modes-7b.html 1183431-orthogonal-modes-7-ref.html
+== 1183431-orthogonal-modes-7c.html 1183431-orthogonal-modes-7-ref.html
+asserts(2) fails == 1183431-orthogonal-modes-8a.html 1183431-orthogonal-modes-8-ref.html
+== 1183431-orthogonal-modes-8b.html 1183431-orthogonal-modes-8-ref.html
+== 1183431-orthogonal-modes-8c.html 1183431-orthogonal-modes-8-ref.html