wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 913759 part 2: reftests for percent-sized content in a button. r=bz

Browse Source
This commit is contained in:
Daniel Holbert 2013-09-28 10:24:01 -07:00
parent b04170dc24
commit b97a6ad1e1
9 changed files with 467 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
layout/reftests/forms/button/percent-height-child-1-ref.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<style>
div.button {
display: inline-block;
width: 80px;
border: 0;
padding: 0;
font: 10px sans-serif;
text-align: center;
vertical-align: top;
color: black;
background: gray;
}
div.p80 {
background: pink;
}
div.p100 {
background: yellow;
}
</style>
</head>
<body>
<!--Button has explicit height for us to resolve against: -->
<div class="button" style="height: 100px">
<div class="p80" style="margin-top: 10px; height: 80px">abc</div>
</div>
<div class="button" style="height: 100px">
<div class="p100" style="height: 100px">abc</div>
</div>
<!--Button is using intrinsic height: -->
<div class="button">
<div class="p80">abc</div>
</div>
<div class="button">
<div class="p100">abc</div>
</div>
</body>
</html>

60
layout/reftests/forms/button/percent-height-child-1.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- This test verifies that we honor percent heights on content inside of
a <button> element (resolving the percent against the <button>).
(In this testcase, the button has no focus-border/padding.) -->
<html>
<head>
<style>
button {
width: 80px;
border: 0;
padding: 0;
font: 10px sans-serif;
vertical-align: top;
color: black;
background: gray;
-moz-appearance: none;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
div.p80 {
height: 80%;
background: pink;
}
div.p100 {
height: 100%;
background: yellow;
}
</style>
</head>
<body>
<!--Button has explicit height for us to resolve against: -->
<button style="height: 100px">
<div class="p80">abc</div>
</button>
<button style="height: 100px">
<div class="p100">abc</div>
</button>
<!--Button is using intrinsic height: -->
<button>
<div class="p80">abc</div>
</button>
<button>
<div class="p100">abc</div>
</button>
</body>
</html>

54
layout/reftests/forms/button/percent-height-child-2-ref.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<style>
div.button {
display: inline-block;
width: 78px;
border: 0;
/* Padding to match the -moz-focus-inner border/padding in testcase: */
padding: 7px 1px 3px;
font: 10px sans-serif;
text-align: center;
vertical-align: top;
color: black;
background: gray;
}
div.p80 {
background: pink;
}
div.p100 {
background: yellow;
}
</style>
</head>
<body>
<!--Button has explicit height for us to resolve against: -->
<div class="button" style="height: 100px">
<div class="p80" style="margin-top: 10px; height: 80px">abc</div>
</div>
<div class="button" style="height: 100px">
<div class="p100" style="height: 100px">abc</div>
</div>
<!--Button is using intrinsic height: -->
<div class="button">
<div class="p80">abc</div>
</div>
<div class="button">
<div class="p100">abc</div>
</div>
</body>
</html>

63
layout/reftests/forms/button/percent-height-child-2.html Normal file
View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- This test verifies that we honor percent heights on content inside of
a <button> element (resolving the percent against the <button>).
(In this testcase, the button has some focus-border/padding, which
occupies part of the button's content-box and which we'll have to
subtract out from the button's size before using it to resolve
percentages sizes.) -->
<html>
<head>
<style>
button {
width: 80px;
border: 0;
padding: 0;
font: 10px sans-serif;
vertical-align: top;
color: black;
background: gray;
-moz-appearance: none;
}
button::-moz-focus-inner {
padding: 6px 0 2px;
border: 1px dotted transparent;
}
div.p80 {
height: 80%;
background: pink;
}
div.p100 {
height: 100%;
background: yellow;
}
</style>
</head>
<body>
<!--Button has explicit height for us to resolve against: -->
<button style="height: 110px">
<div class="p80">abc</div>
</button>
<button style="height: 110px">
<div class="p100">abc</div>
</button>
<!--Button is using intrinsic height: -->
<button>
<div class="p80">abc</div>
</button>
<button>
<div class="p100">abc</div>
</button>
</body>
</html>

53
layout/reftests/forms/button/percent-width-child-1-ref.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<style>
div.button {
display: inline-block;
border: 0;
padding: 0;
font: 10px sans-serif;
text-align: center;
vertical-align: top;
color: black;
background: gray;
}
div.p80 {
width: 80%;
background: pink;
}
div.p100 {
width: 100%;
background: yellow;
}
</style>
</head>
<body>
<!--Button has explicit width for us to resolve against: -->
<div class="button" style="width: 100px">
<div class="p80">abc</div>
</div>
<div class="button" style="width: 100px">
<div class="p100">abc</div>
</div>
<!--Button is using intrinsic width: -->
<div class="button">
<div class="p80">abc</div>
</div>
<div class="button">
<div class="p100">abc</div>
</div>
</body>
</html>

59
layout/reftests/forms/button/percent-width-child-1.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- This test verifies that we honor percent widths on content inside of
a <button> element (resolving the percent against the <button>).
(In this testcase, the button has no focus-border/padding.) -->
<html>
<head>
<style>
button {
border: 0;
padding: 0;
font: 10px sans-serif;
vertical-align: top;
color: black;
background: gray;
-moz-appearance: none;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
div.p80 {
width: 80%;
background: pink;
}
div.p100 {
width: 100%;
background: yellow;
}
</style>
</head>
<body>
<!--Button has explicit width for us to resolve against: -->
<button style="width: 100px">
<div class="p80">abc</div>
</button>
<button style="width: 100px">
<div class="p100">abc</div>
</button>
<!--Button is using intrinsic width: -->
<button>
<div class="p80">abc</div>
</button>
<button>
<div class="p100">abc</div>
</button>
</body>
</html>

55
layout/reftests/forms/button/percent-width-child-2-ref.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<style>
div.button {
display: inline-block;
border: 0;
/* Padding to match the -moz-focus-inner border/padding in testcase: */
padding: 1px 7px 1px 3px;
font: 10px sans-serif;
text-align: center;
vertical-align: top;
color: black;
background: gray;
}
div.p80 {
width: 80%;
background: pink;
}
div.p100 {
width: 100%;
background: yellow;
}
</style>
</head>
<body>
<!--Button has explicit width for us to resolve against: -->
<div class="button" style="width: 100px">
<div class="p80">abc</div>
</div>
<div class="button" style="width: 100px">
<div class="p100">abc</div>
</div>
<!--Button is using intrinsic width: -->
<div class="button">
<div class="p80">abc</div>
</div>
<div class="button">
<div class="p100">abc</div>
</div>
</body>
</html>

62
layout/reftests/forms/button/percent-width-child-2.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- This test verifies that we honor percent widths on content inside of
a <button> element (resolving the percent against the <button>).
(In this testcase, the button has some focus-border/padding, which
occupies part of the button's content-box and which we'll have to
subtract out from the button's size before using it to resolve
percentages sizes.) -->
<html>
<head>
<style>
button {
border: 0;
padding: 0;
font: 10px sans-serif;
vertical-align: top;
color: black;
background: gray;
-moz-appearance: none;
}
button::-moz-focus-inner {
padding: 0 6px 0 2px;
border: 1px dotted transparent;
}
div.p80 {
width: 80%;
background: pink;
}
div.p100 {
width: 100%;
background: yellow;
}
</style>
</head>
<body>
<!--Button has explicit width for us to resolve against: -->
<button style="width: 110px">
<div class="p80">abc</div>
</button>
<button style="width: 110px">
<div class="p100">abc</div>
</button>
<!--Button is using intrinsic width: -->
<button>
<div class="p80">abc</div>
</button>
<button>
<div class="p100">abc</div>
</button>
</body>
</html>

9
layout/reftests/forms/button/reftest.list
View File

@ -2,4 +2,13 @@ asserts(2) == first-letter-1.html first-letter-1-ref.html
asserts(1) != first-letter-1.html first-letter-1-noref.html
== max-height.html max-height-ref.html
== min-height.html min-height-ref.html
# The buttons in these tests have some fancy shading applied to their corners
# on B2G, despite their "-moz-appearance: none; background: gray", so they
# don't quite match the reference case's normal <div>. That's why they're fuzzy.
fuzzy-if(B2G,125,20) == percent-height-child-1.html percent-height-child-1-ref.html
fuzzy-if(B2G,125,80) == percent-height-child-2.html percent-height-child-2-ref.html
fuzzy-if(B2G,125,20) == percent-width-child-1.html percent-width-child-1-ref.html
fuzzy-if(B2G,125,80) == percent-width-child-2.html percent-width-child-2-ref.html
== vertical-centering.html vertical-centering-ref.html