Update web-platform-tests to revision d04c0d50dbbf7752c27957005a5a659701b781ad

This commit is contained in:
WPT Sync Bot 2018-02-15 20:09:00 -05:00
parent ff58cb0a3f
commit 44c252aede
56 changed files with 1921 additions and 67 deletions

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<title>A zero-width new formatting context should fit in a zero-width layout opportunity between floats</title>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="container" style="position:relative; width:200px;">
<div style="float:left; width:100px; height:200px;"></div>
<div style="float:right; width:100px; height:200px;"></div>
<div data-offset-x="100" data-offset-y="0" style="overflow:hidden; width:0; height:200px;"></div>
</div>
<script>
checkLayout("#container");
</script>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>A zero-width new formatting context should fit in a zero-width layout opportunity between floats, above a 100% wide float</title>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="container" style="position:relative; width:200px;">
<div style="float:left; width:100px; height:200px;"></div>
<div style="float:right; width:100px; height:200px;"></div>
<div style="float:right; width:100%; height:10px;"></div>
<div data-offset-x="100" data-offset-y="0" style="overflow:hidden; width:0; height:200px;"></div>
</div>
<script>
checkLayout("#container");
</script>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Zero-width new formatting context with clearance</title>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="container" style="position:relative; width:200px;">
<div style="float:left; width:100px; height:100px;"></div>
<div style="float:right; width:100px; height:100px;"></div>
<div style="float:right; width:100%; height:100px;"></div>
<div data-offset-x="0" data-offset-y="100" style="overflow:hidden; clear:left; width:0;"></div>
</div>
<script>
checkLayout("#container");
</script>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Zero-width new formatting context with clearance</title>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="container" style="position:relative; width:200px;">
<div style="float:left; width:100px; height:100px;"></div>
<div style="float:right; width:100px; height:100px;"></div>
<div style="float:right; width:100%; height:100px;"></div>
<div data-offset-x="0" data-offset-y="200" style="overflow:hidden; clear:right; width:0;"></div>
</div>
<script>
checkLayout("#container");
</script>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference</title>
<link rel="author" title="Mike Bremford" href="http://bfo.com">
<style>
div { font-weight: 100 }
</style>
<body>
<p>Test passes if the lines of "Filler Text" below match.</p>
<div>Filler Text</div>
<div>Filler Text</div>
</body>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference</title>
<link rel="author" title="Mike Bremford" href="http://bfo.com">
<style>
div { font-weight: 900 }
</style>
<body>
<p>Test passes if the lines of "Filler Text" below match.</p>
<div>Filler Text</div>
<div>Filler Text</div>
</body>

View file

@ -5,7 +5,7 @@
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-boldness" />
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-weight-prop" />
<link rel="match" href="font-weight-bold-ref.html" />
<link rel="match" href="font-weight-900-ref.html" />
<meta name="flags" content="" />
<meta name="assert" content="The 'font-weight' property set to 'bolder' does not increase the value of font weight when the parent values is already set at 900." />
<style type="text/css">

View file

@ -5,7 +5,7 @@
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-boldness" />
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-weight-prop" />
<link rel="match" href="font-weight-normal-ref.html" />
<link rel="match" href="font-weight-100-ref.html" />
<meta name="flags" content="" />
<meta name="assert" content="A font weight of 'lighter' selects the next lighter weight compared to its parent's weight." />
<style type="text/css">

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Cascade Green Right Square Reference File</title>
<link rel="author" title="David Burns" href="http://www.theautomatedtester.co.uk">
<style>
#success {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<div id="success"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Cascade: Important</title>
<link rel="author" title="David Burns" href="http://www.theautomatedtester.co.uk">
<link rel="help" href="https://drafts.csswg.org/css-cascade/#importance">
<link rel="match" href="important-prop-ref.html">
<meta name="flags" content="">
<style>
@keyframes override{
from, to{background-color: #f00;}
}
.square {
color:#00f;
animation: override 1s infinite;
width: 100px;
height: 100px;
}
.green {
background-color:green !important;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="square green"></div>
</body>
</html>

View file

@ -2,3 +2,4 @@
@yunxiaoxie
@nattokirai
@litherum
@drott

View file

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>
.outer {
height: 100px;
width: 800px;
background: rgba(0, 0, 255, 0.3);
position: relative;
}
.blueborders {
position: absolute;
top: 0;
left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */
width: 200px; /* 188px second column + (16px gap - 4px rule) */
height: 100px;
border-right: blue solid 4px;
border-left: blue solid 4px;
}
.innerbg {
height: 100px;
width: 188px;
background: rgba(255, 0, 255, 0.3);
position: absolute;
top: 0;
}
.inner {
height: 100px;
width: 86px;
font: 16px/1.25 sans-serif;
position: absolute;
top: 0;
}
.lefthalf {
border-right: 2px solid fuchsia;
padding-right: 7px;
}
.righthalf {
padding-left: 7px;
}
</style>
<div class="outer">
<div class="blueborders"></div>
<div class="innerbg" style="left: 0"></div>
<div class="inner lefthalf" style="left: 0; height: 60px">
AAAAA<br>
BBBBB<br>
CCCCC
</div>
<div class="inner righthalf" style="left: 95px">
DDDDD<br>
EEEEE
</div>
<div class="innerbg" style="left: 204px"></div>
<div class="innerbg" style="left: 408px"></div>
</div>

View file

@ -0,0 +1,39 @@
<!DOCTYPE HTML>
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
<link rel="match" href="multicol-breaking-000-ref.html">
<style>
.outer {
height: 100px;
column-fill: auto;
width: 800px;
column-count: 4;
column-rule: 4px solid blue;
column-gap: 16px;
background: rgba(0, 0, 255, 0.3);
}
.inner {
column-count: 2;
column-rule: 2px solid fuchsia;
column-gap: 16px;
background: rgba(255, 0, 255, 0.3);
font: 16px/1.25 sans-serif;
}
</style>
<div class="outer">
<div class="inner" style="height: 300px">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE<br>
</div>
</div>

View file

@ -0,0 +1,82 @@
<!DOCTYPE HTML>
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>
.outer {
height: 100px;
width: 800px;
background: rgba(0, 0, 255, 0.3);
position: relative;
}
.blueborders {
position: absolute;
top: 0;
left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */
width: 200px; /* 188px second column + (16px gap - 4px rule) */
height: 100px;
border-right: blue solid 4px;
border-left: blue solid 4px;
}
.innerbg {
height: 100px;
width: 188px;
background: rgba(255, 0, 255, 0.3);
position: absolute;
top: 0;
}
.inner {
height: 100px;
width: 86px;
font: 16px/1.25 sans-serif;
position: absolute;
top: 0;
}
.lefthalf {
border-right: 2px solid fuchsia;
padding-right: 7px;
}
.righthalf {
padding-left: 7px;
}
</style>
<div class="outer">
<div class="blueborders"></div>
<div class="innerbg" style="left: 0"></div>
<div class="inner lefthalf" style="left: 0">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE
</div>
<div class="inner righthalf" style="left: 95px">
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ
</div>
<div class="innerbg" style="left: 204px"></div>
<div class="inner lefthalf" style="left: 204px; height: 80px">
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN
</div>
<div class="inner righthalf" style="left: 299px">
OOOOO<br>
PPPPP<br>
QQQQQ<br>
</div>
<div class="innerbg" style="left: 408px"></div>
</div>

View file

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
<link rel="match" href="multicol-breaking-001-ref.html">
<style>
.outer {
height: 100px;
column-fill: auto;
width: 800px;
column-count: 4;
column-rule: 4px solid blue;
column-gap: 16px;
background: rgba(0, 0, 255, 0.3);
}
.inner {
column-count: 2;
column-rule: 2px solid fuchsia;
column-gap: 16px;
background: rgba(255, 0, 255, 0.3);
font: 16px/1.25 sans-serif;
}
</style>
<div class="outer">
<div class="inner" style="height: 300px">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE<br>
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ<br>
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO<br>
PPPPP<br>
QQQQQ
</div>
</div>

View file

@ -0,0 +1,99 @@
<!DOCTYPE HTML>
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>
.outer {
height: 100px;
width: 800px;
background: rgba(0, 0, 255, 0.3);
position: relative;
}
.blueborders {
position: absolute;
top: 0;
left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */
width: 200px; /* 188px second column + (16px gap - 4px rule) */
height: 100px;
border-right: blue solid 4px;
border-left: blue solid 4px;
}
.innerbg {
height: 100px;
width: 188px;
background: rgba(255, 0, 255, 0.3);
position: absolute;
top: 0;
}
.inner {
height: 100px;
width: 86px;
font: 16px/1.25 sans-serif;
position: absolute;
top: 0;
}
.lefthalf {
border-right: 2px solid fuchsia;
padding-right: 7px;
}
.righthalf {
padding-left: 7px;
}
</style>
<div class="outer">
<div class="blueborders"></div>
<div class="innerbg" style="left: 0"></div>
<div class="inner lefthalf" style="left: 0">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE
</div>
<div class="inner righthalf" style="left: 95px">
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ
</div>
<div class="innerbg" style="left: 204px"></div>
<div class="inner lefthalf" style="left: 204px">
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO
</div>
<div class="inner righthalf" style="left: 299px">
PPPPP<br>
QQQQQ<br>
RRRRR<br>
SSSSS<br>
TTTTT
</div>
<div class="innerbg" style="left: 408px"></div>
<div class="inner lefthalf" style="left: 408px">
UUUUU<br>
VVVVV<br>
WWWWW<br>
XXXXX<br>
YYYYY
</div>
<div class="inner righthalf" style="left: 503px">
ZZZZZ<br>
aaaaa<br>
bbbbb<br>
ccccc<br>
ddddd
</div>
</div>

View file

@ -0,0 +1,64 @@
<!DOCTYPE HTML>
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
<link rel="match" href="multicol-breaking-002-ref.html">
<style>
.outer {
height: 100px;
column-fill: auto;
width: 800px;
column-count: 4;
column-rule: 4px solid blue;
column-gap: 16px;
background: rgba(0, 0, 255, 0.3);
}
.inner {
column-count: 2;
column-rule: 2px solid fuchsia;
column-gap: 16px;
background: rgba(255, 0, 255, 0.3);
font: 16px/1.25 sans-serif;
}
</style>
<div class="outer">
<div class="inner" style="height: 300px">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE<br>
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ<br>
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO<br>
PPPPP<br>
QQQQQ<br>
RRRRR<br>
SSSSS<br>
TTTTT<br>
UUUUU<br>
VVVVV<br>
WWWWW<br>
XXXXX<br>
YYYYY<br>
ZZZZZ<br>
aaaaa<br>
bbbbb<br>
ccccc<br>
ddddd
</div>
</div>

View file

@ -0,0 +1,82 @@
<!DOCTYPE HTML>
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>
.outer {
height: 100px;
width: 800px;
background: rgba(0, 0, 255, 0.3);
position: relative;
}
.blueborders {
position: absolute;
top: 0;
left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */
width: 200px; /* 188px second column + (16px gap - 4px rule) */
height: 100px;
border-right: blue solid 4px;
border-left: blue solid 4px;
}
.innerbg {
height: 100px;
width: 188px;
background: rgba(255, 0, 255, 0.3);
position: absolute;
top: 0;
}
.inner {
height: 100px;
width: 86px;
font: 16px/1.25 sans-serif;
position: absolute;
top: 0;
}
.lefthalf {
border-right: 2px solid fuchsia;
padding-right: 7px;
}
.righthalf {
padding-left: 7px;
}
</style>
<div class="outer">
<div class="blueborders"></div>
<div class="innerbg" style="left: 0"></div>
<div class="inner lefthalf" style="left: 0">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE
</div>
<div class="inner righthalf" style="left: 95px">
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ
</div>
<div class="innerbg" style="left: 204px"></div>
<div class="inner lefthalf" style="left: 204px">
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO
</div>
<div class="inner righthalf" style="left: 299px">
PPPPP<br>
QQQQQ
</div>
<div class="innerbg" style="left: 408px"></div>
</div>

View file

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
<link rel="match" href="multicol-breaking-003-ref.html">
<style>
.outer {
height: 100px;
column-fill: auto;
width: 800px;
column-count: 4;
column-rule: 4px solid blue;
column-gap: 16px;
background: rgba(0, 0, 255, 0.3);
}
.inner {
column-count: 2;
column-rule: 2px solid fuchsia;
column-gap: 16px;
background: rgba(255, 0, 255, 0.3);
font: 16px/1.25 sans-serif;
}
</style>
<div class="outer">
<div class="inner" style="height: 300px; column-fill: auto">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE<br>
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ<br>
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO<br>
PPPPP<br>
QQQQQ
</div>
</div>

View file

@ -0,0 +1,44 @@
<!DOCTYPE HTML>
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>
.outer {
height: 100px;
width: 800px;
background: rgba(0, 0, 255, 0.3);
position: relative;
}
.inner {
height: 100px;
width: 86px;
font: 16px/1.25 sans-serif;
position: absolute;
top: 0;
}
.lefthalf {
border-right: 2px solid fuchsia;
padding-right: 7px;
}
.righthalf {
padding-left: 7px;
}
</style>
<div class="outer">
<div class="inner lefthalf" style="left: 0; height: 60px">
AAAAA<br>
BBBBB<br>
CCCCC
</div>
<div class="inner righthalf" style="left: 95px">
DDDDD<br>
EEEEE
</div>
</div>

View file

@ -0,0 +1,37 @@
<!DOCTYPE HTML>
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
<link rel="match" href="multicol-breaking-nobackground-000-ref.html">
<style>
.outer {
height: 100px;
column-fill: auto;
width: 800px;
column-count: 4;
column-gap: 16px;
background: rgba(0, 0, 255, 0.3);
}
.inner {
column-count: 2;
column-rule: 2px solid fuchsia;
column-gap: 16px;
font: 16px/1.25 sans-serif;
}
</style>
<div class="outer">
<div class="inner" style="height: 300px">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE<br>
</div>
</div>

View file

@ -0,0 +1,60 @@
<!DOCTYPE HTML>
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>
.outer {
height: 100px;
width: 800px;
background: rgba(0, 0, 255, 0.3);
position: relative;
}
.inner {
height: 100px;
width: 86px;
font: 16px/1.25 sans-serif;
position: absolute;
top: 0;
}
.lefthalf {
border-right: 2px solid fuchsia;
padding-right: 7px;
}
.righthalf {
padding-left: 7px;
}
</style>
<div class="outer">
<div class="inner lefthalf" style="left: 0">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE
</div>
<div class="inner righthalf" style="left: 95px">
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ
</div>
<div class="inner lefthalf" style="left: 204px; height: 80px">
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN
</div>
<div class="inner righthalf" style="left: 299px">
OOOOO<br>
PPPPP<br>
QQQQQ<br>
</div>
</div>

View file

@ -0,0 +1,49 @@
<!DOCTYPE HTML>
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
<link rel="match" href="multicol-breaking-nobackground-001-ref.html">
<style>
.outer {
height: 100px;
column-fill: auto;
width: 800px;
column-count: 4;
column-gap: 16px;
background: rgba(0, 0, 255, 0.3);
}
.inner {
column-count: 2;
column-rule: 2px solid fuchsia;
column-gap: 16px;
font: 16px/1.25 sans-serif;
}
</style>
<div class="outer">
<div class="inner" style="height: 300px">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE<br>
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ<br>
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO<br>
PPPPP<br>
QQQQQ
</div>
</div>

View file

@ -0,0 +1,77 @@
<!DOCTYPE HTML>
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>
.outer {
height: 100px;
width: 800px;
background: rgba(0, 0, 255, 0.3);
position: relative;
}
.inner {
height: 100px;
width: 86px;
font: 16px/1.25 sans-serif;
position: absolute;
top: 0;
}
.lefthalf {
border-right: 2px solid fuchsia;
padding-right: 7px;
}
.righthalf {
padding-left: 7px;
}
</style>
<div class="outer">
<div class="inner lefthalf" style="left: 0">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE
</div>
<div class="inner righthalf" style="left: 95px">
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ
</div>
<div class="inner lefthalf" style="left: 204px">
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO
</div>
<div class="inner righthalf" style="left: 299px">
PPPPP<br>
QQQQQ<br>
RRRRR<br>
SSSSS<br>
TTTTT
</div>
<div class="inner lefthalf" style="left: 408px">
UUUUU<br>
VVVVV<br>
WWWWW<br>
XXXXX<br>
YYYYY
</div>
<div class="inner righthalf" style="left: 503px">
ZZZZZ<br>
aaaaa<br>
bbbbb<br>
ccccc<br>
ddddd
</div>
</div>

View file

@ -0,0 +1,62 @@
<!DOCTYPE HTML>
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
<link rel="match" href="multicol-breaking-nobackground-002-ref.html">
<style>
.outer {
height: 100px;
column-fill: auto;
width: 800px;
column-count: 4;
column-gap: 16px;
background: rgba(0, 0, 255, 0.3);
}
.inner {
column-count: 2;
column-rule: 2px solid fuchsia;
column-gap: 16px;
font: 16px/1.25 sans-serif;
}
</style>
<div class="outer">
<div class="inner" style="height: 300px">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE<br>
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ<br>
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO<br>
PPPPP<br>
QQQQQ<br>
RRRRR<br>
SSSSS<br>
TTTTT<br>
UUUUU<br>
VVVVV<br>
WWWWW<br>
XXXXX<br>
YYYYY<br>
ZZZZZ<br>
aaaaa<br>
bbbbb<br>
ccccc<br>
ddddd
</div>
</div>

View file

@ -0,0 +1,60 @@
<!DOCTYPE HTML>
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>
.outer {
height: 100px;
width: 800px;
background: rgba(0, 0, 255, 0.3);
position: relative;
}
.inner {
height: 100px;
width: 86px;
font: 16px/1.25 sans-serif;
position: absolute;
top: 0;
}
.lefthalf {
border-right: 2px solid fuchsia;
padding-right: 7px;
}
.righthalf {
padding-left: 7px;
}
</style>
<div class="outer">
<div class="inner lefthalf" style="left: 0">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE
</div>
<div class="inner righthalf" style="left: 95px">
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ
</div>
<div class="inner lefthalf" style="left: 204px">
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO
</div>
<div class="inner righthalf" style="left: 299px">
PPPPP<br>
QQQQQ
</div>
</div>

View file

@ -0,0 +1,49 @@
<!DOCTYPE HTML>
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
<link rel="match" href="multicol-breaking-nobackground-003-ref.html">
<style>
.outer {
height: 100px;
column-fill: auto;
width: 800px;
column-count: 4;
column-gap: 16px;
background: rgba(0, 0, 255, 0.3);
}
.inner {
column-count: 2;
column-rule: 2px solid fuchsia;
column-gap: 16px;
font: 16px/1.25 sans-serif;
}
</style>
<div class="outer">
<div class="inner" style="height: 300px; column-fill: auto">
AAAAA<br>
BBBBB<br>
CCCCC<br>
DDDDD<br>
EEEEE<br>
FFFFF<br>
GGGGG<br>
HHHHH<br>
IIIII<br>
JJJJJ<br>
KKKKK<br>
LLLLL<br>
MMMMM<br>
NNNNN<br>
OOOOO<br>
PPPPP<br>
QQQQQ
</div>
</div>

View file

@ -0,0 +1,23 @@
<!doctype html>
<meta charset="utf-8">
<title>'vertical-align' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runPropertyTests('vertical-align', [
{ syntax: 'baseline'},
// and other keywords
{ syntax: '<length>' },
{ syntax: '<percentage>' }
]);
</script>

View file

@ -0,0 +1,22 @@
<!doctype html>
<meta charset="utf-8">
<title>'visibility' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runPropertyTests('visibility', [
{ syntax: 'visible'},
{ syntax: 'hidden' }
// and other keywords
]);
</script>

View file

@ -0,0 +1,22 @@
<!doctype html>
<meta charset="utf-8">
<title>'white-space' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runPropertyTests('white-space', [
{ syntax: 'normal'},
{ syntax: 'nowrap' }
// and other keywords
]);
</script>

View file

@ -0,0 +1,23 @@
<!doctype html>
<meta charset="utf-8">
<title>'z-index' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runPropertyTests('z-index', [
{ syntax: 'auto'},
// FIXME: This also supports <integer> but the testharness
// doesn't support that yet.
// { syntax: '<integer>' }
]);
</script>

View file

@ -0,0 +1,40 @@
<!doctype html>
<title>Empty URLs behaviour</title>
<link rel=help href=https://drafts.csswg.org/css-values/#url-empty>
<link rel=help href=https://github.com/w3c/csswg-drafts/issues/2211#issuecomment-365677844>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
#inline-unquoted {
background-image: url();
}
#inline-quoted {
background-image: url("");
}
</style>
<link rel=stylesheet href=support/empty-urls.css>
<div id="inline-unquoted"></div>
<div id="inline-quoted"></div>
<div id="external-unquoted"></div>
<div id="external-quoted"></div>
<script>
const ids = [
"inline-unquoted",
"inline-quoted",
"external-unquoted",
"external-quoted"
];
const inline_url = location.href;
const external_url = new URL(document.querySelector("link[rel=stylesheet]").href, location.href).href;
for (let id of ids) {
test(function() {
const el = document.getElementById(id);
const expected = id.startsWith("inline-") ? inline_url : external_url;
const style = window.getComputedStyle(el);
assert_equals(style["background-image"], 'url("' + expected + '")');
}, "empty URL: " + id);
}
</script>

View file

@ -0,0 +1,7 @@
#external-unquoted {
background-image: url();
}
#external-quoted {
background-image: url("");
}