Tests for bug 1172774, r=jfkthame
authorSimon Montagu <smontagu@smontagu.org>
Wed, 10 Jun 2015 23:43:26 -0700
changeset 248262 6fd48f8bf7b4e2006bb66062ac3986030023b216
parent 248261 bcaca4f837e80a7e28d0fa44cc0a1c5d335fd6a7
child 248263 4b0acc875712213509627ae3fc0c1a1c62bfc447
push id28893
push userkwierso@gmail.com
push dateFri, 12 Jun 2015 00:02:58 +0000
treeherderautoland@8cf9d3e497f9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjfkthame
bugs1172774
milestone41.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
Tests for bug 1172774, r=jfkthame
layout/reftests/writing-mode/1172774-percent-horizontal-ref.html
layout/reftests/writing-mode/1172774-percent-margin-1.html
layout/reftests/writing-mode/1172774-percent-margin-2.html
layout/reftests/writing-mode/1172774-percent-margin-3.html
layout/reftests/writing-mode/1172774-percent-margin-4.html
layout/reftests/writing-mode/1172774-percent-padding-1.html
layout/reftests/writing-mode/1172774-percent-padding-2.html
layout/reftests/writing-mode/1172774-percent-padding-3.html
layout/reftests/writing-mode/1172774-percent-padding-4.html
layout/reftests/writing-mode/1172774-percent-vertical-ref.html
layout/reftests/writing-mode/blue-yellow-165w-206h.png
layout/reftests/writing-mode/blue-yellow-206w-165h.png
layout/reftests/writing-mode/reftest.list
layout/reftests/writing-mode/swatch-yellow.png
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-horizontal-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-rl'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ </head>
+ <body>
+  <div id="reference"><img src="blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled"></div>
+ </body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-margin-1.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-rl'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <meta content="This test checks that percentages on the margin are calculated with respect to the inline-size (width) of the containing block if 'writing-mode' of such containing block is 'horizontal-tb'. In this test, div.outer's computed 'writing-mode' value is 'horizontal-tb' and it is the div.inner's containing block." name="assert">
+  <style type="text/css">
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 0.5em auto;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+      -ah-writing-mode: vertical-rl;
+      -webkit-writing-mode: vertical-rl;
+      writing-mode: tb-rl; /* IE11 */
+      writing-mode: vertical-rl;
+    }
+
+  div.foo
+    {
+      margin-bottom: 2.5%; /* 5px */
+      margin-left: 50%; /* 100px */
+      margin-right: 25%; /* 50px */
+      margin-top: 10%; /* 20px */
+    }
+
+  div.bar
+    {
+      margin-bottom: 10%;
+      margin-left: 25%;
+      margin-right: 50%;
+      margin-top: 2.5%;
+    }
+  </style>
+ </head>
+
+ <body>
+  <div class="outer">
+    <div class="inner foo"></div>
+    <hr>
+    <div class="inner bar"></div>
+  </div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-margin-2.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-lr'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <meta content="This test checks that percentages on the margin are calculated with respect to the inline-size (width) of the containing block if 'writing-mode' of such containing block is 'horizontal-tb'. In this test, div.outer's computed 'writing-mode' value is 'horizontal-tb' and it is the div.inner's containing block." name="assert">
+  <style type="text/css">
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 0.5em auto;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+      -ah-writing-mode: vertical-lr;
+      -webkit-writing-mode: vertical-lr;
+      writing-mode: tb-lr; /* IE11 */
+      writing-mode: vertical-lr;
+    }
+
+  div.foo
+    {
+      margin-bottom: 2.5%; /* 5px */
+      margin-left: 50%; /* 100px */
+      margin-right: 25%; /* 50px */
+      margin-top: 10%; /* 20px */
+    }
+
+  div.bar
+    {
+      margin-bottom: 10%;
+      margin-left: 25%;
+      margin-right: 50%;
+      margin-top: 2.5%;
+    }
+  </style>
+ </head>
+
+ <body>
+  <div class="outer">
+    <div class="inner foo"></div>
+    <hr>
+    <div class="inner bar"></div>
+  </div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-margin-3.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-rl'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <meta content="This test checks that percentages on the margin are calculated with respect to the inline size (height!) of the containing block if 'writing-mode' of such containing block is 'vertical-rl'. In this test, div.outer's computed 'writing-mode' value is 'vertical-rl' and it is the div.inner's containing block." name="assert">
+  <style type="text/css">
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      height: 200px;
+      -ah-writing-mode: vertical-rl;
+      -webkit-writing-mode: vertical-rl;
+      writing-mode: tb-rl; /* IE11 */
+      writing-mode: vertical-rl;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      width: 3px;
+      margin: auto 0.5em;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+      -ah-writing-mode: horizontal-tb;
+      -webkit-writing-mode: horizontal-tb;
+      writing-mode: lr-tb; /* IE11 */
+      writing-mode: horizontal-tb;
+    }
+
+  div.foo
+    {
+      margin-left: 2.5%; /* 5px */
+      margin-top: 50%; /* 100px */
+      margin-bottom: 25%; /* 50px */
+      margin-right: 10%; /* 20px */
+    }
+
+  div.bar
+    {
+      margin-left: 10%;
+      margin-top: 25%;
+      margin-bottom: 50%;
+      margin-right: 2.5%;
+    }
+  </style>
+ </head>
+
+ <body>
+  <div class="outer">
+    <div class="inner foo"></div>
+    <hr>
+    <div class="inner bar"></div>
+  </div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-margin-4.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-lr'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <meta content="This test checks that percentages on the margin are calculated with respect to the inline size (height!) of the containing block if 'writing-mode' of such containing block is 'vertical-lr'. In this test, div.outer's computed 'writing-mode' value is 'vertical-lr' and it is the div.inner's containing block." name="assert">
+  <style type="text/css">
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      height: 200px;
+      -ah-writing-mode: vertical-lr;
+      -webkit-writing-mode: vertical-lr;
+      writing-mode: tb-lr; /* IE11 */
+      writing-mode: vertical-lr;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      width: 3px;
+      margin: auto 0.5em;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+      -ah-writing-mode: horizontal-tb;
+      -webkit-writing-mode: horizontal-tb;
+      writing-mode: lr-tb; /* IE11 */
+      writing-mode: horizontal-tb;
+    }
+
+  div.foo
+    {
+      margin-left: 2.5%; /* 5px */
+      margin-top: 50%; /* 100px */
+      margin-bottom: 25%; /* 50px */
+      margin-right: 10%; /* 20px */
+    }
+
+  div.bar
+    {
+      margin-left: 10%;
+      margin-top: 25%;
+      margin-bottom: 50%;
+      margin-right: 2.5%;
+    }
+  </style>
+ </head>
+
+ <body>
+  <div class="outer">
+    <div class="inner bar"></div>
+    <hr>
+    <div class="inner foo"></div>
+  </div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-padding-1.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: padding percentage and 'vertical-rl'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <meta content="This test checks that percentages on the padding are calculated with respect to the inline-size (width) of the containing block if 'writing-mode' of such containing block is 'horizontal-tb'. In this test, div.outer's computed 'writing-mode' value is 'horizontal-tb' and it is the div.inner's containing block." name="assert">
+  <style type="text/css">
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 3px auto;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      height: 50px;
+      -ah-writing-mode: vertical-rl;
+      -webkit-writing-mode: vertical-rl;
+      writing-mode: tb-rl; /* IE11 */
+      writing-mode: vertical-rl;
+    }
+
+  div.foo
+    {
+      padding-bottom: 2.5%; /* 5px */
+      padding-left: 50%; /* 100px */
+      padding-right: 25%; /* 50px */
+      padding-top: 10%; /* 20px */
+    }
+
+  div.bar
+    {
+      padding-bottom: 10%;
+      padding-left: 25%;
+      padding-right: 50%;
+      padding-top: 2.5%;
+    }
+  </style>
+ </head>
+ <body>
+  <div class="outer">
+    <div class="inner foo"><img src="swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled"></div>
+    <hr>
+    <div class="inner bar"><img src="swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled"></div>
+  </div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-padding-2.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: padding percentage and 'vertical-lr'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <meta content="This test checks that percentages on the padding are calculated with respect to the inline-size (width) of the containing block if 'writing-mode' of such containing block is 'horizontal-tb'. In this test, div.outer's computed 'writing-mode' value is 'horizontal-tb' and it is the div.inner's containing block." name="assert">
+  <style type="text/css">
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 3px auto;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      height: 50px;
+      -ah-writing-mode: vertical-lr;
+      -webkit-writing-mode: vertical-lr;
+      writing-mode: tb-lr; /* IE11 */
+      writing-mode: vertical-lr;
+    }
+
+  div.foo
+    {
+      padding-bottom: 2.5%; /* 5px */
+      padding-left: 50%; /* 100px */
+      padding-right: 25%; /* 50px */
+      padding-top: 10%; /* 20px */
+    }
+
+  div.bar
+    {
+      padding-bottom: 10%;
+      padding-left: 25%;
+      padding-right: 50%;
+      padding-top: 2.5%;
+    }
+  </style>
+ </head>
+
+ <body>
+  <div class="outer">
+    <div class="inner foo"><img src="swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled"></div>
+    <hr>
+    <div class="inner bar"><img src="swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled"></div>
+  </div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-padding-3.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: padding percentage and 'vertical-rl'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <meta content="This test checks that percentages on the padding are calculated with respect to the inline size (height!) of the containing block if 'writing-mode' of such containing block is 'vertical-rl'. In this test, div.outer's computed 'writing-mode' value is 'vertical-rl' and it is the div.inner's containing block." name="assert">
+  <style type="text/css">
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      height: 200px;
+      -ah-writing-mode: vertical-rl;
+      -webkit-writing-mode: vertical-rl;
+      writing-mode: tb-rl; /* IE11 */
+      writing-mode: vertical-rl;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      width: 3px;
+      margin: auto 3px;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      width: 50px;
+      -ah-writing-mode: horizontal-tb;
+      -webkit-writing-mode: horizontal-tb;
+      writing-mode: lr-tb; /* IE11 */
+      writing-mode: horizontal-tb;
+    }
+
+  div.foo
+    {
+      padding-left: 2.5%; /* 5px */
+      padding-top: 50%; /* 100px */
+      padding-bottom: 25%; /* 50px */
+      padding-right: 10%; /* 20px */
+    }
+
+  div.bar
+    {
+      padding-left: 10%;
+      padding-top: 25%;
+      padding-bottom: 50%;
+      padding-right: 2.5%;
+    }
+  </style>
+ </head>
+
+ <body>
+  <div class="outer">
+    <div class="inner foo"><img src="swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled"></div>
+    <hr>
+    <div class="inner bar"><img src="swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled"></div>
+  </div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-padding-4.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: padding percentage and 'vertical-lr'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <meta content="This test checks that percentages on the padding are calculated with respect to the inline size (height!) of the containing block if 'writing-mode' of such containing block is 'vertical-lr'. In this test, div.outer's computed 'writing-mode' value is 'vertical-lr' and it is the div.inner's containing block." name="assert">
+  <style type="text/css">
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      height: 200px;
+      -ah-writing-mode: vertical-lr;
+      -webkit-writing-mode: vertical-lr;
+      writing-mode: tb-lr; /* IE11 */
+      writing-mode: vertical-lr;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      width: 3px;
+      margin: auto 3px;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      width: 50px;
+      -ah-writing-mode: horizontal-tb;
+      -webkit-writing-mode: horizontal-tb;
+      writing-mode: lr-tb; /* IE11 */
+      writing-mode: horizontal-tb;
+    }
+
+  div.foo
+    {
+      padding-left: 2.5%; /* 5px */
+      padding-top: 50%; /* 100px */
+      padding-bottom: 25%; /* 50px */
+      padding-right: 10%; /* 20px */
+    }
+
+  div.bar
+    {
+      padding-left: 10%;
+      padding-top: 25%;
+      padding-bottom: 50%;
+      padding-right: 2.5%;
+    }
+  </style>
+ </head>
+
+ <body>
+  <div class="outer">
+    <div class="inner bar"><img src="swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled"></div>
+    <hr>
+    <div class="inner foo"><img src="swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled"></div>
+  </div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1172774-percent-vertical-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-rl'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ </head>
+ <body>
+  <div id="reference"><img src="blue-yellow-165w-206h.png" width="165" height="206" alt="Image download support must be enabled"></div>
+ </body>
+</html>
\ No newline at end of file
new file mode 100644
index 0000000000000000000000000000000000000000..3d70889ee25e01a2036b5bd49c189e700325deb6
GIT binary patch
literal 460
zc%17D@N?(olHy`uVBq!ia0vp^OM&<t2NRIIP!%cyq&N#aB8wRq_>O=u<5X=vX`mo`
ziKnkC`+YVp4lTt;0doQv7#OoXT^vIyZoR#`k@tWCkE`Q<jo<5Yeog66I`o~*p=omF
z+*NwLFF&&EIU0?MW^b?PMnmTLAH~qoy+^v}D7m_S&ZW8X_jEUQ9k2O}q2uE-3>}Zo
zMia2#Z;F;T!@k%(>kiiZK2H^=uATeF+~7XR4#92utcy%Xk8sV5d0;FEj0px$S3j3^
HP6<r_`xxb|
new file mode 100644
index 0000000000000000000000000000000000000000..47ceb84d3fbd2b09831616b9b53f565cf18bec07
GIT binary patch
literal 463
zc%17D@N?(olHy`uVBq!ia0vp^=YV)A2NRH-?H3A?U`coMb!1@J*w6hZkrl}2Ebxdd
zW?<ku0>X?_wfUrhg6t)pzOL-|8RZ!a4Sp%b+A=UO#(BCphE&{od-ot`LjaG<!Pt%e
zrzP`pIZc_#<y7%x$saZ0iu;MI9=t0XuS}2%VqU3e3Z$H~6ik<}0VxmOC2dz6vcS?m
zdM|Uy&3Jie<*lp#BX?!Nv}|TVD48Gyq`)SC3<8?~GzcOMq`=bn>{)X;C5JH_zZ#tq
zz4`gexR+<us=i-EjwJ+KS`#nK|LxH#Vzf3}>s8ltc}hL=z5xt;22WQ%mvv4FO#q-B
Bp}+tD
--- a/layout/reftests/writing-mode/reftest.list
+++ b/layout/reftests/writing-mode/reftest.list
@@ -135,11 +135,19 @@ fails == 1147834-relative-overconstraine
 fails == 1147834-relative-overconstrained-vertical-rl-rtl.html 1147834-top-left-ref.html # bug 1131451
 == 1151993-1-orthogonal-block-size.html 1151993-1-orthogonal-block-size-ref.html
 == 1152941-1-orthogonal-blocksize-overflow.html 1152941-1-orthogonal-blocksize-overflow-ref.html
 == 1156021-text-indent-percent.html 1156021-text-indent-percent-ref.html
 == 1157752-upright-bidi.html 1157752-upright-bidi-ref.html
 == 1157758-1-vertical-arabic.html 1157758-1-vertical-arabic-ref.html
 == 1158549-1-vertical-block-size-constraints.html 1158549-1-vertical-block-size-constraints-ref.html
 == 1163238-orthogonal-auto-margins.html 1163238-orthogonal-auto-margins-ref.html
+== 1172774-percent-margin-1.html 1172774-percent-horizontal-ref.html
+== 1172774-percent-margin-2.html 1172774-percent-horizontal-ref.html
+== 1172774-percent-margin-3.html 1172774-percent-vertical-ref.html
+== 1172774-percent-margin-4.html 1172774-percent-vertical-ref.html
+== 1172774-percent-padding-1.html 1172774-percent-horizontal-ref.html
+== 1172774-percent-padding-2.html 1172774-percent-horizontal-ref.html
+== 1172774-percent-padding-3.html 1172774-percent-vertical-ref.html
+== 1172774-percent-padding-4.html 1172774-percent-vertical-ref.html
 
 # Suite of tests from Gérard Talbot in bug 1079151
 include abspos/reftest.list
new file mode 100644
index 0000000000000000000000000000000000000000..1591aa0e2e274854ed836cf582235ea0202f9c8e
GIT binary patch
literal 84
zc%17D@N?(olHy`uVBq!ia0vp^{2<K83?vyP*g1g|bAV5X>;L}@UB|w-0=Yb%E{-7;
dw~`YS7=b)p2FBl7!dgHUgQu&X%Q~loCIDbL5Y7Mq