Add Gecko tests, which are failing with gfx-hal backend

This commit is contained in:
Zakor Gyula 2019-03-06 14:32:03 +01:00
parent 9513544e91
commit a519e31a34
62 changed files with 2457 additions and 4 deletions

View file

@ -6905,6 +6905,306 @@
{}
]
],
"gfx-rs-gecko/1035611-1.html": [
[
"/_mozilla/gfx-rs-gecko/1035611-1.html",
[
[
"/_mozilla/gfx-rs-gecko/1035611-1-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/240933-2.html": [
[
"/_mozilla/gfx-rs-gecko/240933-2.html",
[
[
"/_mozilla/gfx-rs-gecko/240933-2-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/356774-1.html": [
[
"/_mozilla/gfx-rs-gecko/356774-1.html",
[
[
"/_mozilla/gfx-rs-gecko/356774-1-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/block-first-child-6-dyn.html": [
[
"/_mozilla/gfx-rs-gecko/block-first-child-6-dyn.html",
[
[
"/_mozilla/gfx-rs-gecko/block-first-child-6-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/block-first-child-7-dyn.html": [
[
"/_mozilla/gfx-rs-gecko/block-first-child-7-dyn.html",
[
[
"/_mozilla/gfx-rs-gecko/block-first-child-7-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/block-first-child-8a-dyn.html": [
[
"/_mozilla/gfx-rs-gecko/block-first-child-8a-dyn.html",
[
[
"/_mozilla/gfx-rs-gecko/block-first-child-8-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/block-first-child-8b-dyn.html": [
[
"/_mozilla/gfx-rs-gecko/block-first-child-8b-dyn.html",
[
[
"/_mozilla/gfx-rs-gecko/block-first-child-8-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/block-first-child-8c-dyn.html": [
[
"/_mozilla/gfx-rs-gecko/block-first-child-8c-dyn.html",
[
[
"/_mozilla/gfx-rs-gecko/block-first-child-8-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/border-collapse-bevels-1b.html": [
[
"/_mozilla/gfx-rs-gecko/border-collapse-bevels-1b.html",
[
[
"/_mozilla/gfx-rs-gecko/border-collapse-bevels-1-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/border-collapse-bevels-1c.html": [
[
"/_mozilla/gfx-rs-gecko/border-collapse-bevels-1c.html",
[
[
"/_mozilla/gfx-rs-gecko/border-collapse-bevels-1-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/border-collapse-bevels-1d.html": [
[
"/_mozilla/gfx-rs-gecko/border-collapse-bevels-1d.html",
[
[
"/_mozilla/gfx-rs-gecko/border-collapse-bevels-1-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/border-collapse-bevels-1e.html": [
[
"/_mozilla/gfx-rs-gecko/border-collapse-bevels-1e.html",
[
[
"/_mozilla/gfx-rs-gecko/border-collapse-bevels-1-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/color-2a.html": [
[
"/_mozilla/gfx-rs-gecko/color-2a.html",
[
[
"/_mozilla/gfx-rs-gecko/color-2-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/column-balancing-nested-001.html": [
[
"/_mozilla/gfx-rs-gecko/column-balancing-nested-001.html",
[
[
"/_mozilla/gfx-rs-gecko/column-balancing-nested-001-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/descriptor-ranges.html": [
[
"/_mozilla/gfx-rs-gecko/descriptor-ranges.html",
[
[
"/_mozilla/gfx-rs-gecko/descriptor-ranges-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/display-block-baselines-1.html": [
[
"/_mozilla/gfx-rs-gecko/display-block-baselines-1.html",
[
[
"/_mozilla/gfx-rs-gecko/display-block-baselines-1-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/downscale-2f.html": [
[
"/_mozilla/gfx-rs-gecko/downscale-2f.html",
[
[
"/_mozilla/gfx-rs-gecko/blank.html",
"!="
]
],
{}
]
],
"gfx-rs-gecko/element-paint-recursion.html": [
[
"/_mozilla/gfx-rs-gecko/element-paint-recursion.html",
[
[
"/_mozilla/gfx-rs-gecko/element-paint-recursion-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/emoji-1.html": [
[
"/_mozilla/gfx-rs-gecko/emoji-1.html",
[
[
"/_mozilla/gfx-rs-gecko/emoji-1-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/grid-item-align-002.html": [
[
"/_mozilla/gfx-rs-gecko/grid-item-align-002.html",
[
[
"/_mozilla/gfx-rs-gecko/grid-item-align-002-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/grid-item-justify-001.html": [
[
"/_mozilla/gfx-rs-gecko/grid-item-justify-001.html",
[
[
"/_mozilla/gfx-rs-gecko/grid-item-justify-001-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/hScrollAbsHeight.html": [
[
"/_mozilla/gfx-rs-gecko/hScrollAbsHeight.html",
[
[
"/_mozilla/gfx-rs-gecko/greenbox.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/hScrollSimpleHeight.html": [
[
"/_mozilla/gfx-rs-gecko/hScrollSimpleHeight.html",
[
[
"/_mozilla/gfx-rs-gecko/greenbox.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/image-zoom-1.html": [
[
"/_mozilla/gfx-rs-gecko/image-zoom-1.html",
[
[
"/_mozilla/gfx-rs-gecko/image-zoom-ref.html",
"=="
]
],
{}
]
],
"gfx-rs-gecko/opacity-background-1.html": [
[
"/_mozilla/gfx-rs-gecko/opacity-background-1.html",
[
[
"/_mozilla/gfx-rs-gecko/opacity-background-1-ref.html",
"=="
]
],
{}
]
],
"mozilla/FileAPI/blob_url_upload.html": [
[
"/_mozilla/mozilla/FileAPI/blob_url_upload.html",
@ -10279,6 +10579,136 @@
{}
]
],
"gfx-rs-gecko/1035611-1-ref.html": [
[
{}
]
],
"gfx-rs-gecko/240933-2-ref.html": [
[
{}
]
],
"gfx-rs-gecko/356774-1-ref.html": [
[
{}
]
],
"gfx-rs-gecko/Chunkfive.otf": [
[
{}
]
],
"gfx-rs-gecko/big.png": [
[
{}
]
],
"gfx-rs-gecko/black-border-top.png": [
[
{}
]
],
"gfx-rs-gecko/blank.html": [
[
{}
]
],
"gfx-rs-gecko/block-first-child-6-ref.html": [
[
{}
]
],
"gfx-rs-gecko/block-first-child-7-ref.html": [
[
{}
]
],
"gfx-rs-gecko/block-first-child-8-ref.html": [
[
{}
]
],
"gfx-rs-gecko/border-collapse-bevels-1-ref.html": [
[
{}
]
],
"gfx-rs-gecko/color-2-ref.html": [
[
{}
]
],
"gfx-rs-gecko/colr-unset.ttf": [
[
{}
]
],
"gfx-rs-gecko/column-balancing-nested-001-ref.html": [
[
{}
]
],
"gfx-rs-gecko/descriptor-ranges-ref.html": [
[
{}
]
],
"gfx-rs-gecko/descriptor-ranges.js": [
[
{}
]
],
"gfx-rs-gecko/display-block-baselines-1-ref.html": [
[
{}
]
],
"gfx-rs-gecko/element-paint-recursion-ref.html": [
[
{}
]
],
"gfx-rs-gecko/emoji-1-ref.html": [
[
{}
]
],
"gfx-rs-gecko/greenbox.html": [
[
{}
]
],
"gfx-rs-gecko/grid-item-align-002-ref.html": [
[
{}
]
],
"gfx-rs-gecko/grid-item-justify-001-ref.html": [
[
{}
]
],
"gfx-rs-gecko/image-zoom-1-ref.html": [
[
{}
]
],
"gfx-rs-gecko/opacity-background-1-ref.html": [
[
{}
]
],
"gfx-rs-gecko/size-4x4.png": [
[
{}
]
],
"gfx-rs-gecko/small.png": [
[
{}
]
],
"lint.whitelist": [
[
{}
@ -12676,7 +13106,9 @@
"mozilla/globals/entry.worker.js": [
[
"/_mozilla/mozilla/globals/entry.worker.html",
{}
{
"script_metadata": []
}
]
],
"mozilla/history.html": [
@ -12856,7 +13288,9 @@
"mozilla/interfaces.worker.js": [
[
"/_mozilla/mozilla/interfaces.worker.html",
{}
{
"script_metadata": []
}
]
],
"mozilla/invalid-this.html": [
@ -13198,11 +13632,25 @@
"mozilla/task_queue_throttling.any.js": [
[
"/_mozilla/mozilla/task_queue_throttling.any.html",
{}
{
"script_metadata": [
[
"title",
"Throttling the performance timeline task queue."
]
]
}
],
[
"/_mozilla/mozilla/task_queue_throttling.any.worker.html",
{}
{
"script_metadata": [
[
"title",
"Throttling the performance timeline task queue."
]
]
}
]
],
"mozilla/textcontent.html": [
@ -19038,6 +19486,210 @@
"dd2b2cf3e565b61717c7e0e6fae484fd56edb0c2",
"testharness"
],
"gfx-rs-gecko/1035611-1-ref.html": [
"05cb06dee6e7135405332ac5767c4d8d11c7e154",
"support"
],
"gfx-rs-gecko/1035611-1.html": [
"fcc528481b56d673d0a7037bd9c956fe1ea9dd50",
"reftest"
],
"gfx-rs-gecko/240933-2-ref.html": [
"7dbc082a58a5fbf494ab1e6e5a1dca1369516264",
"support"
],
"gfx-rs-gecko/240933-2.html": [
"76b072e85097cd5bb3d74abb70a428a284513a04",
"reftest"
],
"gfx-rs-gecko/356774-1-ref.html": [
"e781b795a141efd24673782d860288ea352bbc8c",
"support"
],
"gfx-rs-gecko/356774-1.html": [
"ecbf77806560c00a1d3a3c575102cd21f7d10e39",
"reftest"
],
"gfx-rs-gecko/Chunkfive.otf": [
"33d53d53e05c013509d68f3112e23805f93847a1",
"support"
],
"gfx-rs-gecko/big.png": [
"76a32497c7593087f40a0a0eb899ad84fd6b6f0c",
"support"
],
"gfx-rs-gecko/black-border-top.png": [
"fc6e69e02aa1b6d51fb34db1d2720452d336024d",
"support"
],
"gfx-rs-gecko/blank.html": [
"0e76edd65b7baf5316fc9d0c4da59a3502e4c27a",
"support"
],
"gfx-rs-gecko/block-first-child-6-dyn.html": [
"98aae16cc0f507b761500fe627e0e40457f0d110",
"reftest"
],
"gfx-rs-gecko/block-first-child-6-ref.html": [
"2a2d8d9bf8ad11e32562de4d98b96da3383e1e3b",
"support"
],
"gfx-rs-gecko/block-first-child-7-dyn.html": [
"54e5a4a49660f90f50466db66e8668b80122a45a",
"reftest"
],
"gfx-rs-gecko/block-first-child-7-ref.html": [
"545006bc0e3da5b96a6736979340e784c3d9b817",
"support"
],
"gfx-rs-gecko/block-first-child-8-ref.html": [
"18ae4f0b6ed2e8a68f60b638877614251439f61e",
"support"
],
"gfx-rs-gecko/block-first-child-8a-dyn.html": [
"1df7087fb5fd51073d4b00e107f12734ebb47373",
"reftest"
],
"gfx-rs-gecko/block-first-child-8b-dyn.html": [
"b11b5ddf5adcefc7d04f5884106bdc352980518a",
"reftest"
],
"gfx-rs-gecko/block-first-child-8c-dyn.html": [
"6e1711ac839c2a2d62c9b6e23e7230af1704cab6",
"reftest"
],
"gfx-rs-gecko/border-collapse-bevels-1-ref.html": [
"5d5a43058970f0b055dc669bde1df87488e7adfa",
"support"
],
"gfx-rs-gecko/border-collapse-bevels-1b.html": [
"554f051fa25a7db16070ff808bcc77cc4ab1bf19",
"reftest"
],
"gfx-rs-gecko/border-collapse-bevels-1c.html": [
"4e2510771914986eaf88b5d8823795a526f96bc7",
"reftest"
],
"gfx-rs-gecko/border-collapse-bevels-1d.html": [
"28904c86e7a7175a523e9d9dd1be8f05ae585f32",
"reftest"
],
"gfx-rs-gecko/border-collapse-bevels-1e.html": [
"299dbdc2bef9e8b2f40541d714046f6b6c1f79cd",
"reftest"
],
"gfx-rs-gecko/color-2-ref.html": [
"d3354b3192c4076d80dec6800bcdca24f2c6acff",
"support"
],
"gfx-rs-gecko/color-2a.html": [
"b80652cb16fdecbecc35f6725e0eacbfa7a16974",
"reftest"
],
"gfx-rs-gecko/colr-unset.ttf": [
"a78fd30a5923edfe1b0967c942aa0611ddf0ccce",
"support"
],
"gfx-rs-gecko/column-balancing-nested-001-ref.html": [
"736ca5368ccce5484241a0b36405b337ada2427b",
"support"
],
"gfx-rs-gecko/column-balancing-nested-001.html": [
"96dac315b2cc580c08a070eff9d0c1e218f02058",
"reftest"
],
"gfx-rs-gecko/descriptor-ranges-ref.html": [
"a2e6888a9d58ce9d3d41103384665f611e520253",
"support"
],
"gfx-rs-gecko/descriptor-ranges.html": [
"79630aee3c12a27b8b8013c6f46f9bbe53022737",
"reftest"
],
"gfx-rs-gecko/descriptor-ranges.js": [
"e59bd0d45c03f8976be7b66c73f9c676af9c1b0e",
"support"
],
"gfx-rs-gecko/display-block-baselines-1-ref.html": [
"aeac413c0d35d9a3f2ae418ba6e36cafa67f72b8",
"support"
],
"gfx-rs-gecko/display-block-baselines-1.html": [
"0051525c907bf975323c92b6c2f4d50f45041337",
"reftest"
],
"gfx-rs-gecko/downscale-2f.html": [
"a5a755accee61837f99489b45704cf909fe2b6a4",
"reftest"
],
"gfx-rs-gecko/element-paint-recursion-ref.html": [
"e37ec29806e22e9d654b632c2ce966a8dfc627a2",
"support"
],
"gfx-rs-gecko/element-paint-recursion.html": [
"220e8f9d14836c9db52010051c371f07ef88e908",
"reftest"
],
"gfx-rs-gecko/emoji-1-ref.html": [
"871f2cf00d313fd111145b552b175d06f3245a94",
"support"
],
"gfx-rs-gecko/emoji-1.html": [
"a299bb0cff431401af0469707258e49c29ca5eec",
"reftest"
],
"gfx-rs-gecko/greenbox.html": [
"fc44641112a4e968bbd468f2c0851245a392eb4d",
"support"
],
"gfx-rs-gecko/grid-item-align-002-ref.html": [
"de59dea26d0487702b9a24fe2b7d529c498caf50",
"support"
],
"gfx-rs-gecko/grid-item-align-002.html": [
"1d923678e066058f3176b20103fe90ec7a0a05cf",
"reftest"
],
"gfx-rs-gecko/grid-item-justify-001-ref.html": [
"cfe109554620548da1dd40427281f4c1382cab9a",
"support"
],
"gfx-rs-gecko/grid-item-justify-001.html": [
"52ba438e352abb5d5bb3897b829d5d8934e61b12",
"reftest"
],
"gfx-rs-gecko/hScrollAbsHeight.html": [
"b56c823f26f74b40826d0e9384f4b78ec68ff465",
"reftest"
],
"gfx-rs-gecko/hScrollSimpleHeight.html": [
"a35443779900c0228e447d2a7818bc9fcbf50346",
"reftest"
],
"gfx-rs-gecko/image-zoom-1-ref.html": [
"58bd5b8c694e451bf260124dfec7f1ccb358c3d3",
"support"
],
"gfx-rs-gecko/image-zoom-1.html": [
"1ac842e2863d5590684ec8bd48953fa352d29ac5",
"reftest"
],
"gfx-rs-gecko/opacity-background-1-ref.html": [
"c80ed888666be52434a8436214032dd59e923cb0",
"support"
],
"gfx-rs-gecko/opacity-background-1.html": [
"2d0bbb8cc047cf8ea3a86a788fef2650ab2265ec",
"reftest"
],
"gfx-rs-gecko/size-4x4.png": [
"e6afafd89ac86972d6ba8d67f0333d0e5a69ac72",
"support"
],
"gfx-rs-gecko/small.png": [
"9ff11a99327a8f9d2cd62755b793e65c2f7e5d13",
"support"
],
"lint.whitelist": [
"4e9dcc5ddf894bc85224a634349663b832dd8c24",
"support"

View file

@ -0,0 +1,2 @@
[border-collapse-bevels-1d.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[border-collapse-bevels-1e.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[color-2a.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[column-balancing-nested-001.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[display-block-baselines-1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[element-paint-recursion.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[grid-item-align-002.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[grid-item-justify-001.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-zoom-1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[opacity-background-1.html]
expected: FAIL

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Testcase, bug 1035611</title>
<meta charset=UTF-8>
<style type="text/css">
#outer {
width: 500px;
height: 100px;
overflow:hidden;
background: orange;
}
#inner {
width: 36px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<link rel="match" href="1035611-1-ref.html">
<html lang="en-US" reftest-zoom="1.0">
<head>
<title>Testcase, bug 1035611</title>
<meta charset=UTF-8>
<style type="text/css">
#outer1 {
width: 500px;
height: 100px;
overflow:hidden;
background: blue;
}
#outer2 {
width: 250px;
height: 100px;
perspective: 125px;
}
#inner {
transform-origin: 0px 0px 70px;
transform: rotate3d(0, 1, 0, -54deg);
width: 128px;
height: 128px;
background: orange;
}
</style>
</head>
<body>
<div id="outer1">
<div id="outer2">
<div id="inner"></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<body onload="setup()">
<textarea id="ta" dir="rtl">
&#x05d0;a&#x05d1;
</textarea>
<textarea id="tb">
abc
</textarea>
<div id="coords1"></div>
<div id="coords2"></div>
<script>
function setup() {
document.getElementById("ta").selectionStart = 3;
document.getElementById("ta").selectionEnd = 3;
document.getElementById("coords1").innerHTML = document.getElementById("ta").selectionStart;
document.getElementById("tb").selectionStart = 3;
document.getElementById("tb").selectionEnd = 3;
document.getElementById("coords2").innerHTML = document.getElementById("tb").selectionStart;
}
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="match" href="240933-2-ref.html">
<html>
<body>
<textarea id="ta" dir="rtl">
&#x05d0;a&#x05d1;
</textarea>
<textarea id="tb">
abc
</textarea>
<div id="coords1">3</div>
<div id="coords2">3</div>
</body>
</html>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<style>
table {
border: .1mm solid black;
}
</style>
<body>
<table cellspacing="0">
<tr>
<td>border: .1mm, collapsed</td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="match" href="356774-1-ref.html">
<html>
<style>
table {
border: .1mm solid black;
border-collapse: collapse;
}
</style>
<body>
<table>
<tr>
<td>border: .1mm, collapsed</td>
</tr>
</table>
</body>
</html>

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4 KiB

View file

@ -0,0 +1 @@
<!DOCTYPE html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<link rel="match" href="block-first-child-6-ref.html">
<html class="reftest-wait">
<head>
<style type="text/css">
#separator {
height: 20px;
background-color: green;
}
#first-child {
height: 20px;
margin-top: 20px;
background-color: blue;
}
#parent {
margin-top: 0px;
}
</style>
<script type="text/javascript">
function test() {
document.getElementById('parent').style.marginTop = '-20px';
document.documentElement.removeAttribute('class');
}
document.addEventListener('DOMContentLoaded', test);
</script>
</head>
<body>
<div id="separator"></div>
<div id="parent">
<div id="first-child"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#separator {
height: 20px;
background-color: green;
}
#first-child {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="separator"></div>
<div id="parent">
<div id="first-child"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<link rel="match" href="block-first-child-7-ref.html">
<html class="reftest-wait">
<head>
<style type="text/css">
#separator {
height: 20px;
background-color: green;
}
#first-child {
height: 20px;
margin-top: 20px;
background-color: blue;
}
#parent {
margin-top: 0;
}
</style>
<script type="text/javascript">
function test() {
document.getElementById('parent').style.marginTop = '-30px';
document.documentElement.removeAttribute('class');
}
document.addEventListener('DOMContentLoaded', test);
</script>
</head>
<body>
<div id="separator"></div>
<div id="parent">
<div id="first-child"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#separator {
height: 10px;
background-color: green;
}
#first-child {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="separator"></div>
<div id="parent">
<div id="first-child"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#separator {
height: 20px;
background-color: green;
}
#first-child {
height: 40px;
background-color: blue;
}
</style>
</head>
<body>
<div id="separator"></div>
<div id="parent">
<div id="first-child"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<link rel="match" href="block-first-child-8-ref.html">
<html class="reftest-wait">
<head>
<style type="text/css">
#separator {
height: 40px;
background-color: green;
}
#first-child {
display: none;
height: 40px;
margin-top: -20px;
background-color: blue;
}
#parent {
margin-top: -10px;
}
</style>
<script type="text/javascript">
function test() {
document.getElementById('first-child').style.display = 'block';
document.documentElement.removeAttribute('class');
}
document.addEventListener('DOMContentLoaded', test);
</script>
</head>
<body>
<div id="separator"></div>
<div id="parent">
<div id="first-child"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<link rel="match" href="block-first-child-8-ref.html">
<html class="reftest-wait">
<head>
<style type="text/css">
#separator {
height: 40px;
background-color: green;
}
#first-child {
display: none;
height: 40px;
margin-top: -10px;
background-color: blue;
}
#parent {
margin-top: -20px;
}
</style>
<script type="text/javascript">
function test() {
document.getElementById('first-child').style.display = 'block';
document.documentElement.removeAttribute('class');
}
document.addEventListener('DOMContentLoaded', test);
</script>
</head>
<body>
<div id="separator"></div>
<div id="parent">
<div id="first-child"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<link rel="match" href="block-first-child-8-ref.html">
<html class="reftest-wait">
<head>
<style type="text/css">
#separator {
height: 40px;
background-color: green;
}
#first-child {
display: none;
height: 40px;
margin-top: -20px;
background-color: blue;
}
#parent {
margin-top: -20px;
}
</style>
<script type="text/javascript">
function test() {
document.getElementById('first-child').style.display = 'block';
document.documentElement.removeAttribute('class');
}
document.addEventListener('DOMContentLoaded', test);
</script>
</head>
<body>
<div id="separator"></div>
<div id="parent">
<div id="first-child"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style>
table {
margin: 10px;
border-spacing: 0;
border-collapse: collapse;
}
td {
border-top: 10px solid rgba(0,0,255,0.3);
border-right: 20px solid rgba(255,0,0,0.3);
border-bottom: 30px solid rgba(0,255,0,0.3);
border-left: 40px solid rgba(255,0,255,0.3);
width: 50px;
height: 50px;
padding: 0;
}
</style>
</head>
<body>
<div>
<table>
<tr><td> </td></tr>
</table>
</div>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<link rel="match" href="border-collapse-bevels-1-ref.html">
<html>
<head>
<meta charset=utf-8>
<style>
table {
margin: 10px;
border-spacing: 0;
border-collapse: collapse;
writing-mode: vertical-lr;
}
td {
border-top: 10px solid rgba(0,0,255,0.3);
border-right: 20px solid rgba(255,0,0,0.3);
border-bottom: 30px solid rgba(0,255,0,0.3);
border-left: 40px solid rgba(255,0,255,0.3);
width: 50px;
height: 50px;
padding: 0;
}
</style>
</head>
<body>
<div>
<table>
<tr><td> </td></tr>
</table>
</div>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<link rel="match" href="border-collapse-bevels-1-ref.html">
<html>
<head>
<meta charset=utf-8>
<style>
table {
margin: 10px;
border-spacing: 0;
border-collapse: collapse;
writing-mode: vertical-rl;
}
td {
border-top: 10px solid rgba(0,0,255,0.3);
border-right: 20px solid rgba(255,0,0,0.3);
border-bottom: 30px solid rgba(0,255,0,0.3);
border-left: 40px solid rgba(255,0,255,0.3);
width: 50px;
height: 50px;
padding: 0;
}
</style>
</head>
<body>
<div>
<table>
<tr><td> </td></tr>
</table>
</div>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<link rel="match" href="border-collapse-bevels-1-ref.html">
<html>
<head>
<meta charset=utf-8>
<style>
table {
margin: 10px;
border-spacing: 0;
border-collapse: collapse;
writing-mode: vertical-lr;
direction: rtl;
}
td {
border-top: 10px solid rgba(0,0,255,0.3);
border-right: 20px solid rgba(255,0,0,0.3);
border-bottom: 30px solid rgba(0,255,0,0.3);
border-left: 40px solid rgba(255,0,255,0.3);
width: 50px;
height: 50px;
padding: 0;
}
</style>
</head>
<body>
<div>
<table>
<tr><td> </td></tr>
</table>
</div>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<link rel="match" href="border-collapse-bevels-1-ref.html">
<html>
<head>
<meta charset=utf-8>
<style>
table {
margin: 10px;
border-spacing: 0;
border-collapse: collapse;
writing-mode: vertical-rl;
direction: rtl;
}
td {
border-top: 10px solid rgba(0,0,255,0.3);
border-right: 20px solid rgba(255,0,0,0.3);
border-bottom: 30px solid rgba(0,255,0,0.3);
border-left: 40px solid rgba(255,0,255,0.3);
width: 50px;
height: 50px;
padding: 0;
}
</style>
</head>
<body>
<div>
<table>
<tr><td> </td></tr>
</table>
</div>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
@font-face {
font-family: colr-unset;
src: url("colr-unset.ttf");
}
span {
font-family: colr-unset;
font-size: 25pt;
}
</style>
</head>
<body>
<span>A</span><span>B</span><span>C</span>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<link rel="match" href="color-2-ref.html">
<html>
<head>
<meta charset="UTF-8"/>
<style>
@font-face {
font-family: colr-unset;
src: url("colr-unset.ttf");
}
span {
font-family: colr-unset;
font-size: 25pt;
}
</style>
</head>
<body>
<span>A</span><span style="color: #00FF00FF">A</span><span style="color: #0000FFFF">A</span>
</body>
</html>

Binary file not shown.

View file

@ -0,0 +1,64 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
-->
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Testing nested balancing column sets</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053">
<style type="text/css">
html,body {
color:black; background-color:white; font-family:monospace; font-size:16px; padding:0; margin:0;
}
.colset {
-moz-column-count: 2;
-moz-column-gap: 0px;
-moz-column-rule: 1px solid black;
margin-bottom:1em;
width:30ch;
}
.colset.lvl2 {
-moz-column-rule: 1px solid blue;
}
.colset.lvl3 {
-moz-column-rule: 1px solid red;
}
p { margin: 0; }
.non-balancing {
-moz-column-count: 1;
}
.fixed-height.lvl2 {
-moz-column-count: 2;
}
.fixed-height {
-moz-column-count: 1;
height:3em;
}
</style>
</head>
<body>
<div class="colset">
<p>one one one one one</p>
<div class="colset non-balancing lvl2">
<p>two two two two<br>two</p>
</div>
</div>
<div class="colset">
<p>one one one one one<br>one</p>
<div class="colset fixed-height lvl2">
<p>two two two two two</p>
</div>
</div>
<div class="colset">
<p>one<br>one</p>
<div class="colset lvl2">
<p>two</p>
<div class="colset fixed-height lvl3">
<p>three three three three three three</p>
</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,61 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
-->
<!DOCTYPE html>
<link rel="match" href="column-balancing-nested-001-ref.html">
<html lang="en-US">
<head>
<title>Testing nested balancing column sets</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053">
<style type="text/css">
html,body {
color:black; background-color:white; font-family:monospace; font-size:16px; padding:0; margin:0;
}
.colset {
-moz-column-count: 2;
-moz-column-gap: 0px;
-moz-column-rule: 1px solid black;
margin-bottom:1em;
width:30ch;
}
.colset.lvl2 {
-moz-column-rule: 1px solid blue;
}
.colset.lvl3 {
-moz-column-rule: 1px solid red;
}
p { margin: 0; }
.non-balancing {
-moz-column-fill: auto;
}
.fixed-height {
height:3em;
}
</style>
</head>
<body>
<div class="colset">
<p>one one one one one</p>
<div class="colset non-balancing lvl2">
<p>two two two two two</p>
</div>
</div>
<div class="colset">
<p>one one one one one<br>one</p>
<div class="colset fixed-height lvl2">
<p>two two two two two</p>
</div>
</div>
<div class="colset">
<p>one<br>one</p>
<div class="colset lvl2">
<p>two</p>
<div class="colset fixed-height lvl3">
<p>three three three three three three</p>
</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset=utf-8>
<style id="dynamicStyles">
</style>
<div id="testContents" style="columns: 2; font-size: 10px;">
</div>
<script>
/* Reference file creates only a single face in each test font-family,
so that it will always have the expected rendering without relying
on the font-matching algorithm to choose between faces. */
function createFontFaceRules(family, descriptor, expectedMatch, unexpectedMatch) {
return `@font-face { font-family: ${family}; src: url(Chunkfive.otf); ${descriptor}: ${expectedMatch}; }\n`;
}
</script>
<script src="descriptor-ranges.js"></script>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<link rel="match" href="descriptor-ranges-ref.html">
<meta charset=utf-8>
<style id="dynamicStyles">
</style>
<div id="testContents" style="columns: 2; font-size: 10px;">
</div>
<script>
/* Create font-family with two faces; the testcase to use the face with the
'expectedMatch' descriptor, and not the 'unexpectedMatch'. So any testcase
whose text is replaced by Ahem glyphs has failed font-matching. */
function createFontFaceRules(family, descriptor, expectedMatch, unexpectedMatch) {
return `@font-face { font-family: ${family}; src: url(Chunkfive.otf); ${descriptor}: ${expectedMatch}; }\n` +
`@font-face { font-family: ${family}; src: url(/fonts/Ahem.ttf); ${descriptor}: ${unexpectedMatch}; }\n`;
}
</script>
<script src="descriptor-ranges.js"></script>

View file

@ -0,0 +1,79 @@
/* Script used by descriptor-ranges.html and descriptor-ranges-ref.html
to create @font-face rules and test elements for a collection of
font-matching testcases. */
// To create unique font-family names for each testcase.
let serial = 0;
// Accumulators for the lists of @font-face rules and test elements.
let fontFaceRules = "";
let testElements = "";
// Create a <div> element with the font properties to match. Its text reports
// the property-value and corresponding pair of descriptors being tested.
// (The associated createFontFaceRules() function is defined separately in the
// test and reference files.)
function createTestElement(family, weight, style, stretch, value, expected, unexpected) {
return `<div style="font-family:${family}; font-weight:${weight}; font-style:${style}; font-stretch:${stretch};">` +
`${family} ${value} (${expected} vs ${unexpected})</div>\n`;
}
// Create testcases for the given descriptor.
// Each testcase has a test property value, and a list of @font-face descriptors
// to be matched against the property, where each descriptor in the list should
// be preferred over the next.
function testDescriptor(descriptorName, testCases) {
testElements += `<div style="background:yellow;padding:0.5em">Tests of ${descriptorName} descriptor:</div>\n`;
testCases.forEach(function (testCase) {
// Go though test cases, checking each descriptor has higher priority than next in the list
for (let i = 0; i < testCase.testDescriptors.length - 1; i++) {
serial++;
let expectedMatch = testCase.testDescriptors[i];
let unexpectedMatch = testCase.testDescriptors[i + 1];
let familyName = "test_" + serial;
fontFaceRules += createFontFaceRules(familyName, descriptorName, expectedMatch, unexpectedMatch);
let testWeight = (descriptorName == "font-weight") ? testCase.value : "normal";
let testStyle = (descriptorName == "font-style") ? testCase.value : "normal";
let testStretch = (descriptorName == "font-stretch") ? testCase.value : "normal";
testElements += createTestElement(familyName, testWeight, testStyle, testStretch,
testCase.value, expectedMatch, unexpectedMatch);
}
});
}
// Testcases (from web-platform/tests/css/css-fonts/variations/at-font-face-font-matching.html,
// with a couple of extras). In each case, for the given property value, the testDescriptors
// are listed from 'best' to 'worse' match, as evaluated by the font-matching algorithm in
// https://drafts.csswg.org/css-fonts-4/#font-style-matching.
testDescriptor("font-weight", [
{ value: "400", testDescriptors: ["400", "450 460", "500", "350 399", "351 398", "501 550", "502 560"] },
{ value: "430", testDescriptors: ["420 440", "450 460", "500", "400 425", "350 399", "340 398", "501 550", "502 560"] },
{ value: "500", testDescriptors: ["500", "450 460", "400", "350 399", "351 398", "501 550", "502 560"] },
{ value: "501", testDescriptors: ["501", "502 510", "503 520", "500", "450 460", "390 410", "300 350"] },
{ value: "399", testDescriptors: ["350 399", "340 360", "200 300", "400", "450 460", "500 501", "502 510"] },
{ value: "350", testDescriptors: ["200 300", "250 280", "420 450", "430 440", "445"] },
{ value: "550", testDescriptors: ["600 800", "700 900", "420 450", "430 440", "425"] }
]);
testDescriptor("font-stretch", [
{ value: "100%", testDescriptors: ["100%", "110% 120%", "115% 116%"] },
{ value: "110%", testDescriptors: ["110% 120%", "115% 116%", "105%", "100%", "50% 80%", "60% 70%"] },
{ value: "90%", testDescriptors: ["90% 100%", "50% 80%", "60% 70%", "110% 140%", "120% 130%"] },
]);
testDescriptor("font-style", [
{ value: "normal", testDescriptors: ["normal", "oblique 0deg", "oblique 10deg 40deg", "oblique 20deg 30deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
{ value: "italic", testDescriptors: ["italic", "oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 5deg 10deg", "oblique 5deg", "normal", "oblique 0deg", "oblique -60deg -30deg", "oblique -50deg -40deg" ] },
{ value: "oblique 20deg", testDescriptors: ["oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
{ value: "oblique 21deg", testDescriptors: ["oblique 21deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 20deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
{ value: "oblique 10deg", testDescriptors: ["oblique 10deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
{ value: "oblique 0deg", testDescriptors: ["oblique 0deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
{ value: "oblique -10deg", testDescriptors: ["oblique -10deg", "oblique -5deg", "oblique -1deg 0deg", "oblique -20deg -15deg", "oblique -60deg -30deg", "oblique -50deg -40deg", "italic", "oblique 0deg 10deg", "oblique 40deg 50deg" ] },
{ value: "oblique -20deg", testDescriptors: ["oblique -20deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
{ value: "oblique -21deg", testDescriptors: ["oblique -21deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
]);
// Stuff the @font-face rules and test elements into the document.
// Any testcases that render Ahem glyphs are failures.
document.getElementById("dynamicStyles").innerHTML = fontFaceRules;
document.getElementById("testContents").innerHTML = testElements;

View file

@ -0,0 +1,91 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: Testcase #1 for bug 1330962</title>
<style type="text/css">
@font-face {
src: url(/fonts/Ahem.ttf);
font-family: Ahem;
}
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
* { font:16px/1 Ahem; }
.block { display: block; }
.grid { display: grid; }
.no-theme {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
padding: 20px 0;
border: none;
background: white;
}
.scroll {
overflow-y: scroll;
}
.no-scroll {
overflow: visible;
}
</style>
</head>
<body>
<div>
<div style="display:inline-grid">
A<img class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
</div>
B
</div>
<div>
<div style="display:inline-grid">
A
<input type="image" class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
</div>
B
</div>
<div>
<div style="display:inline-block">
A<br>
<div style="display:inline-block"><input type="text" value="text"></div>
</div>
B
</div>
<div>
<div style="display:inline-block">
A<br>
<div style="display:inline-block"><input type="text" value="text"></div>
</div>
B
</div>
<div>
<div style="display:inline-block">
A<br>
<div style="display:inline-block"><input type="text"></div>
</div>
B
</div>
<div>
<div style="display:inline-block">
A<br>
<div style="display:inline-block"><input class="no-theme" type="text" value="text"></div>
</div>
B
</div>
</body>
</html>

View file

@ -0,0 +1,93 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<link rel="match" href="display-block-baselines-1-ref.html">
<html><head>
<meta charset="utf-8">
<title>Testcase #1 for bug 1330962</title>
<style type="text/css">
@font-face {
src: url(/fonts/Ahem.ttf);
font-family: Ahem;
}
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
* { font:16px/1 Ahem; }
.block { display: block; }
.grid { display: grid; }
.no-theme {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
padding: 20px 0;
border: none;
background: white;
}
.scroll {
overflow-y: scroll;
}
.no-scroll {
overflow: visible;
}
</style>
</head>
<body>
<div>
<div style="display:inline-block">
A
<img class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
</div>
B
</div>
<div>
<div style="display:inline-block">
A
<input type="image" class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
</div>
B
</div>
<div>
<div style="display:inline-block">
A
<input class="block" type="text" value="text">
</div>
B
</div>
<div>
<div style="display:inline-block">
A
<input class="block scroll" type="text" value="text">
</div>
B
</div>
<div>
<div style="display:inline-block">
A
<input class="block" type="text">
</div>
B
</div>
<div>
<div style="display:inline-block">
A
<input class="block no-theme" type="text" value="text">
</div>
B
</div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<link rel="mismatch" href="blank.html">
<html reftest-zoom="0.3" class="reftest-wait">
<head>
<script>
function snapshot() {
document.documentElement.removeAttribute('class');
}
</script>
</head>
<!-- NOTE: Using setTimeout to wait for high-quality downscaled version of
image to be ready, because there's nothing better we can do. If we fix
Bug 1006883, we can do away with this setTimeout.
For now, the setTimeout is just here to increase the likelihood that we
actually test the high-quality downscaled version of the image. If the
setTimeout happens to fire before the high-quality downscaled rendering is
ready, then this the test will pass without testing what it's trying to
test, which is fine as long as that's rare. -->
<body style="margin: 0px" onload="setTimeout(snapshot, 50)">
<script>
var args = location.search.substring(1).split(',');
var image = document.createElement('img');
image.width = 205;
image.height = 53;
image.src = 'black-border-top.png';
document.body.appendChild(image);
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
-->
<html>
<body>
<p style="width:90px; height:90px; border:10px solid black; border-top:20px solid black; border-left:20px solid black;"></p>
<div style="width:90px; height:90px; border:10px solid blue; border-top:20px solid blue; border-left:20px solid blue;"></div>
<p style="width:100px; height:100px; border:10px solid green; background:yellow;"></div>
<div style="width:100px; height:100px; border:10px solid cyan;">
<div style="width:90px; height:90px; border-left:10px solid magenta; border-top:10px solid magenta;">
<div style="width:80px; height:80px; border-left:10px solid cyan; border-top:10px solid cyan;"></div>
</div>
</div>
<div style="width:100px; height:100px; border:10px solid magenta;">
<div style="width:90px; height:90px; border-left:10px solid cyan; border-top:10px solid cyan;">
<div style="width:80px; height:80px; border-left:10px solid magenta; border-top:10px solid magenta;"></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
Test painting elements recursively using each other as background.
-->
<html>
<link rel="match" href="element-paint-recursion-ref.html">
<body>
<p id="d" style="width:100px; height:100px; border:10px solid black;
background:-moz-element(#d);"></p>
<div id="e">
<div style="width:100px; height:100px; border:10px solid blue;
background:-moz-element(#e);"></div>
</div>
<div id="f"></div>
<!-- test zero-sized images -->
<p style="width:100px; height:100px; border:10px solid green;
background:-moz-element(#f) yellow;"></div>
<div id="g">
<div style="width:100px; height:100px; border:10px solid cyan;
background:-moz-element(#h);"></div>
</div>
<div id="h">
<div style="width:100px; height:100px; border:10px solid magenta;
background:-moz-element(#g);"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style>
.test {
width: 6em;
border: 1px solid silver;
margin: 1em;
padding: 2px;
}
.wrapped {
word-wrap: break-word;
}
</style>
</head>
<body>
The emoji should wrap within the box in both cases:
<div class="test">
abcde fghij klmno pqrst uvw xyz
&#x1f600;&#x1f601;&#x1f602;&#x1f603; &#x1f604;&#x1f605;&#x1f606;&#x1f607;
&#x1f608;&#x1f609;&#x1f60a;&#x1f60b; &#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
abcdefghijklmnopqrstuvwxyz
<span class="wrapped">&#x1f600;&#x1f601;&#x1f602;&#x1f603;&#x1f604;&#x1f605;&#x1f606;&#x1f607;<!--
-->&#x1f608;&#x1f609;&#x1f60a;&#x1f60b;&#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;</span>
</div>
<div class="test wrapped">
abcde fghij klmno pqrst uvw xyz
&#x1f600;&#x1f601;&#x1f602;&#x1f603; &#x1f604;&#x1f605;&#x1f606;&#x1f607;
&#x1f608;&#x1f609;&#x1f60a;&#x1f60b; &#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
abcdefghijklmnopqrstuvwxyz
&#x1f600;&#x1f601;&#x1f602;&#x1f603;&#x1f604;&#x1f605;&#x1f606;&#x1f607;<!--
-->&#x1f608;&#x1f609;&#x1f60a;&#x1f60b;&#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
</div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<link rel="match" href="emoji-1-ref.html">
<html>
<head>
<meta charset=utf-8>
<style>
.test {
width: 6em;
border: 1px solid silver;
margin: 1em;
padding: 2px;
}
.wrapped {
word-wrap: break-word;
}
</style>
</head>
<body>
The emoji should wrap within the box in both cases:
<div class=test>
abcde fghij klmno pqrst uvw xyz
&#x1f600;&#x1f601;&#x1f602;&#x1f603; &#x1f604;&#x1f605;&#x1f606;&#x1f607;
&#x1f608;&#x1f609;&#x1f60a;&#x1f60b; &#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
abcdefghijklmnopqrstuvwxyz
&#x1f600;&#x1f601;&#x1f602;&#x1f603;&#x1f604;&#x1f605;&#x1f606;&#x1f607;<!--
-->&#x1f608;&#x1f609;&#x1f60a;&#x1f60b;&#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
</div>
<div class="test wrapped">
abcde fghij klmno pqrst uvw xyz
&#x1f600;&#x1f601;&#x1f602;&#x1f603; &#x1f604;&#x1f605;&#x1f606;&#x1f607;
&#x1f608;&#x1f609;&#x1f60a;&#x1f60b; &#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
abcdefghijklmnopqrstuvwxyz
&#x1f600;&#x1f601;&#x1f602;&#x1f603;&#x1f604;&#x1f605;&#x1f606;&#x1f607;<!--
-->&#x1f608;&#x1f609;&#x1f60a;&#x1f60b;&#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
</div>
</body>
</html>

View file

@ -0,0 +1 @@
<div style="height:200px;width:200px; background:green">

View file

@ -0,0 +1,127 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: align-self (part 2 of 2)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border: 1px solid;
/* border-block-start: 2px solid blue; */
border-block-start: 2px solid black;
inline-size: 36px;
block-size: 25px;
margin-right: 4px;
background: lightgrey;
}
wrap {
display: block;
position: relative;
inset-inline-start:1px;
background: white;
block-size:20px;
inline-size:32px;
border-block-start: 3px solid lightgrey;
}
span {
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
justify-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;display:none;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { margin-right:2px; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:0; }
.astretch3 { align-self:stretch; height:0; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:0; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:0; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
.vr .aend, .vr .aflexend { margin-right:3px; }
.vlr .aend, .vlr .aflexend { margin-left:4px; }
.vlr .acenter { margin-left:3px; }
.vrl .aend, .vrl .aflexend { margin-right:3px; }
.astretch6 { width:13px; }
.astretch5 { width:14px; }
.astretch4, .astretch7 { width:15px; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var wrap = document.createElement("wrap");
div.appendChild(wrap);
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
wrap.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>

View file

@ -0,0 +1,108 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: align-self (part 2 of 2)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
<link rel="match" href="grid-item-align-002-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-block-start: 2px solid blue; */
border-block-start: 2px solid black;
grid-template: 3px 20px 2px / 1px 32px 3px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
justify-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>

View file

@ -0,0 +1,121 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: justify-self (part 1 of 2)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
inline-size: 36px;
block-size: 25px;
margin-right: 4px;
background: lightgrey;
}
wrap {
display: block;
position: relative;
inset-inline-start: 1px;
background: white;
block-size: 20px;
inline-size: 32px;
border-block-start: 3px solid lightgrey;
}
span {
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
align-self: start;
}
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
.hl .jend, .hl .jflexend, .hl .jright { margin-left: 16px; }
.hr .jend, .hr .jflexend { margin-right: 15px; }
.hl .jcenter { margin-left: 9px; }
.vl .jend, .vl .jflexend { margin-right:3px; }
.hr .jcenter { margin-right: 8px; }
.hr .jleft { margin-right: 15px; }
.hl .jstretch5, .hl .jstretch7, .hr .jstretch5, .hr .jstretch7 { width:14px; }
.jstretch4 { width:27px; }
.vl .jstretch4 { width:0px; }
.vl .jstretch2, .vl .jstretch3 { height:27px; }
.vl .jstretch6, .vl .jstretch7 { height:9px; }
.vl .jend, .vl .jflexend, .vl .jright { margin-top: 19px; }
.vl .jcenter { margin-top: 10px; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var wrap = document.createElement("wrap");
div.appendChild(wrap);
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
wrap.appendChild(span);
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>

View file

@ -0,0 +1,108 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: justify-self (part 1 of 2)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
<link rel="match" href="grid-item-justify-001-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 3px 20px 2px / 1px 32px 3px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
align-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>

View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="match" href="greenbox.html">
<div style="overflow:auto; width:200px; position:absolute; height:200px;">
<div style="position:absolute; width:300px; height:100%; background:green">
</div>
</div>

View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="match" href="greenbox.html">
<div style="overflow:auto; width:200px; height:200px;">
<div style="width:300px; height:100%; background:green">
</div>
</div>

View file

@ -0,0 +1,16 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
-->
<html>
<head>
<title>reference image-rendering: -moz-crisp-edges</title>
<style>
img { position:absolute;left:20px;top:20px; }
</style>
</head>
<body>
<img width="10" height="10" src="big.png"/>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
-->
<link rel="match" href="image-zoom-ref.html">
<html reftest-zoom="5">
<head>
<title>test image-rendering: -moz-crisp-edges</title>
<style>
img {
position:absolute;
left: 40px;
top: 40px;
transform: scale(5);
}
</style>
</head>
<body>
<img style="image-rendering: -moz-crisp-edges;" width="10" height="10" src="small.png"/>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<style>
.main {
top: 0px;
left: 0px;
width: 100px;
height: 100px;
position: absolute;
background-color: red;
}
.background {
background-color: white;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
opacity: 0.9;
}
.container {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
overflow: scroll;
}
.message {
position: absolute;
top: 0px;
left: 0px;
width: 101%;
height: 101%;
}
</style>
</head>
<body>
<div class="main">
<div class="background"></div>
<div class="container">
<div class="message">foo</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<link rel="match" href="opacity-background-1-ref.html">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<style>
.main {
top: 0px;
left: 0px;
width: 100px;
height: 100px;
position: absolute;
background-color: red;
}
.background {
background: linear-gradient(#ffffff, #ffffff);
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
opacity: 0.9;
}
.container {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
overflow: scroll;
}
.message {
position: absolute;
top: 0px;
left: 0px;
width: 101%;
height: 101%;
}
</style>
</head>
<body>
<div class="main">
<div class="background"></div>
<div class="container">
<div class="message">foo</div>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 B