Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 14:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'

Browse source
This commit is contained in:
WPT Sync Bot 2021-09-07 11:16:33 +00:00 • committed by cybai
parent 35e95f55a1
commit 58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
Download patch file Download diff file Expand all files Collapse all files

24
tests/wpt/web-platform-tests/css/css-position/crashtests/position-absolute-crash-014.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="help" href="https://crbug.com/1021676">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<style>
#htmlvar00005 {
filter: drop-shadow(-1px -1px 1px yellow);
float: left;
line-height: 71vw;
}
#htmlvar00006 {
overflow-x: scroll;
position: absolute;
}
.class8 {
font: 52px sans-serif;
}
</style>
<ol id="htmlvar00005">
<li id="htmlvar00006">
<details class="class8"></details>
</li>
</ol>

2
tests/wpt/web-platform-tests/css/css-position/fixed-z-index-blend-ref.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<title>fixed position, z-index, and mix-blend-mode</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel="author" href="mailto:masonf@chromium.org">
<div style="width: 100px; height:4000px;"></div>
<div style="background: green; width: 100px; height:100px;"></div>

2
tests/wpt/web-platform-tests/css/css-position/fixed-z-index-blend.html
View file

@ -6,7 +6,7 @@
<link rel="help" href="https://www.w3.org/TR/compositing-1/#mix-blend-mode">
<meta name="assert" content="Tests fixed, z-index, and mix-blend-mode.
Passes if there is a green box when the page is scrolled to the bottom.">
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel="author" href="mailto:masonf@chromium.org">
<link rel="match" href="fixed-z-index-blend-ref.html">
<div class="blend"></div>

21
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vlr-in-multicol-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<style>
body { writing-mode: vertical-lr; }
.container {
background: green;
inline-size: 80px;
block-size: 600px;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
</style>
There should be no red.
<div class="multicol">
<div class="container"></div>
</div>

60
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vlr-ltr-ltr-in-multicol.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vlr-in-multicol-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-lr; }
.container {
position: relative;
background: green;
font: 16px/1 Ahem;
inline-size: 80px;
block-size: 100px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
.red { color: red; }
.cb {
position: relative;
inset-block-start: 15px;
inset-inline-start: 20px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
</style>
There should be no red.
<div class="multicol">
<div class="container ltr">
X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="ltr cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="ltr cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container ltr">
<span class="cb">X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
</div>
<div class="container ltr">
<span class="cb">X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
</div>
</div>

60
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vlr-ltr-rtl-in-multicol.tentative.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vlr-in-multicol-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-lr; }
.container {
position: relative;
background: green;
font: 16px/1 Ahem;
inline-size: 80px;
block-size: 100px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
.red { color: red; }
.cb {
position: relative;
inset-block-start: 15px;
inset-inline-start: 20px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
</style>
There should be no red.
<div class="multicol">
<div class="container ltr">
X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container ltr">
<span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
</div>
<div class="container ltr">
<span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
</div>
</div>

60
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vlr-rtl-ltr-in-multicol.tentative.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vlr-in-multicol-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-lr; }
.container {
position: relative;
background: green;
font: 16px/1 Ahem;
inline-size: 80px;
block-size: 100px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
.red { color: red; }
.cb {
position: relative;
inset-block-start: 15px;
inset-inline-start: 20px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
</style>
There should be no red.
<div class="multicol">
<div class="container rtl">
X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="ltr cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="ltr cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container rtl">
<span class="cb">X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
</div>
<div class="container rtl">
<span class="cb">X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
</div>
</div>

60
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vlr-rtl-rtl-in-multicol.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vlr-in-multicol-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-lr; }
.container {
position: relative;
background: green;
font: 16px/1 Ahem;
inline-size: 80px;
block-size: 100px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
.red { color: red; }
.cb {
position: relative;
inset-block-start: 15px;
inset-inline-start: 20px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
</style>
There should be no red.
<div class="multicol">
<div class="container rtl">
X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container rtl">
<span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
</div>
<div class="container rtl">
<span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
</div>
</div>

21
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vrl-in-multicol-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<style>
body { writing-mode: vertical-rl; }
.container {
background: green;
inline-size: 80px;
block-size: 600px;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
</style>
There should be no red.
<div class="multicol">
<div class="container"></div>
</div>

60
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vrl-ltr-ltr-in-multicol.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vrl-in-multicol-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-rl; }
.container {
position: relative;
background: green;
font: 16px/1 Ahem;
inline-size: 80px;
block-size: 100px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
.red { color: red; }
.cb {
position: relative;
inset-block-start: 15px;
inset-inline-start: 20px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
</style>
There should be no red.
<div class="multicol">
<div class="container ltr">
X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="ltr cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="ltr cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container ltr">
<span class="cb">X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
</div>
<div class="container ltr">
<span class="cb">X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
</div>
</div>

60
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vrl-ltr-rtl-in-multicol.tentative.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vrl-in-multicol-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-rl; }
.container {
position: relative;
background: green;
font: 16px/1 Ahem;
inline-size: 80px;
block-size: 100px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
.red { color: red; }
.cb {
position: relative;
inset-block-start: 15px;
inset-inline-start: 20px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
</style>
There should be no red.
<div class="multicol">
<div class="container ltr">
X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container ltr">
X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container ltr">
<span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
</div>
<div class="container ltr">
<span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
</div>
</div>

60
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vrl-rtl-ltr-in-multicol.tentative.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vrl-in-multicol-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-rl; }
.container {
position: relative;
background: green;
font: 16px/1 Ahem;
inline-size: 80px;
block-size: 100px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
.red { color: red; }
.cb {
position: relative;
inset-block-start: 15px;
inset-inline-start: 20px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
</style>
There should be no red.
<div class="multicol">
<div class="container rtl">
X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="ltr cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="ltr cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container rtl">
<span class="cb">X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
</div>
<div class="container rtl">
<span class="cb">X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
</div>
</div>

60
tests/wpt/web-platform-tests/css/css-position/multicol/static-position/vrl-rtl-rtl-in-multicol.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vrl-in-multicol-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-rl; }
.container {
position: relative;
background: green;
font: 16px/1 Ahem;
inline-size: 80px;
block-size: 100px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 100px;
inline-size: 160px;
}
.red { color: red; }
.cb {
position: relative;
inset-block-start: 15px;
inset-inline-start: 20px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
</style>
There should be no red.
<div class="multicol">
<div class="container rtl">
X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
</div>
<div class="container rtl">
X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
</div>
<div class="container rtl">
<span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
</div>
<div class="container rtl">
<span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-position/multicol/vlr-in-multicols-ref.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<style>
body { writing-mode: vertical-lr; }
.container {
background: green;
inline-size: 80px;
block-size: 120px;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
</style>
There should be no red.
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>

97
tests/wpt/web-platform-tests/css/css-position/multicol/vlr-ltr-ltr-in-multicols.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vlr-in-multicols-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-lr; }
.container {
position: relative;
background: green;
font: 20px/1 Ahem;
inline-size: 80px;
block-size: 120px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
.red { color: red; }
.cb { position: relative; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
.inset-start { inset-block-start: 0; inset-inline-start: 0; }
.inset-end { inset-block-end: 0; inset-inline-end: 0; }
</style>
There should be no red.
<div class="multicol">
<div class="container ltr">
<span class="red">XX</span><span class="ltr">X
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX XX<span class="red">XX</span>
<div class="abs inline inset-start">XX</div>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="red">XX</span><span class="ltr">X
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs block inset-start">XX</div>
<br>XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
X<span class="ltr cb"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs inline inset-start">XX</div>
XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
X<span class="ltr cb"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="cb"><span class="red">XX</span><span class="ltr">X
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs inline inset-start">XX</div>
X<span class="red">XX</span>
</span></span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="cb"><span class="red">XX</span><span class="ltr">X
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br>X<span class="red">XX</span>
</span></span>
</div>
</div>

97
tests/wpt/web-platform-tests/css/css-position/multicol/vlr-ltr-rtl-in-multicols.tentative.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vlr-in-multicols-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-lr; }
.container {
position: relative;
background: green;
font: 20px/1 Ahem;
inline-size: 80px;
block-size: 120px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
.red { color: red; }
.cb { position: relative; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
.inset-start { inset-block-start: 0; inset-inline-start: 0; }
.inset-end { inset-block-end: 0; inset-inline-end: 0; }
</style>
There should be no red.
<div class="multicol">
<div class="container ltr">
XX<span class="rtl"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX <span class="red">XX</span>XX
<div class="abs inline inset-start">XX</div>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
XX<span class="rtl"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>XX
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
XX<span class="rtl cb"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs inline inset-start">XX</div>
XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
XX<span class="rtl cb"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br>XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="cb">X<span class="rtl"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs inline inset-start">XX</div>
<span class="red">XX</span>X
</span></span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="cb">X<span class="rtl"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>X
</span></span>
</div>
</div>

97
tests/wpt/web-platform-tests/css/css-position/multicol/vlr-rtl-ltr-in-multicols.tentative.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vlr-in-multicols-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-lr; }
.container {
position: relative;
background: green;
font: 20px/1 Ahem;
inline-size: 80px;
block-size: 120px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
.red { color: red; }
.cb { position: relative; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
.inset-start { inset-block-start: 0; inset-inline-start: 0; }
.inset-end { inset-block-end: 0; inset-inline-end: 0; }
</style>
There should be no red.
<div class="multicol">
<div class="container rtl">
<span class="red">XX</span><span class="ltr">XX
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX XX<span class="red">XX</span>
<div class="abs inline inset-start">XX</div>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="red">XX</span><span class="ltr">XX
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs block inset-start">XX</div>
<br>XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="red">XX</span><span class="ltr cb">XX
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs inline inset-start">XX</div>
XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
X<span class="ltr cb"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="cb"><span class="red">XX</span><span class="ltr">X
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs inline inset-start">XX</div>
X<span class="red">XX</span>
</span></span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="cb"><span class="red">XX</span><span class="ltr">X
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br>X<span class="red">XX</span>
</span></span>
</div>
</div>

97
tests/wpt/web-platform-tests/css/css-position/multicol/vlr-rtl-rtl-in-multicols.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vlr-in-multicols-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-lr; }
.container {
position: relative;
background: green;
font: 20px/1 Ahem;
inline-size: 80px;
block-size: 120px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
.red { color: red; }
.cb { position: relative; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
.inset-start { inset-block-start: 0; inset-inline-start: 0; }
.inset-end { inset-block-end: 0; inset-inline-end: 0; }
</style>
There should be no red.
<div class="multicol">
<div class="container rtl">
X<span class="rtl"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX <span class="red">XX</span>XX
<div class="abs inline inset-start">XX</div>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
X<span class="rtl"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>XX
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
X<span class="rtl cb"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs inline inset-start">XX</div>
<span class="red">XX</span>XX
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
X<span class="rtl cb"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="cb">X<span class="rtl"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs inline inset-start">XX</div>
<span class="red">XX</span>X
</span></span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="cb">X<span class="rtl"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>X
</span></span>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-position/multicol/vrl-in-multicols-ref.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<style>
body { writing-mode: vertical-rl; }
.container {
background: green;
inline-size: 80px;
block-size: 120px;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
</style>
There should be no red.
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>
<div class="multicol">
<div class="container"></div>
</div>

97
tests/wpt/web-platform-tests/css/css-position/multicol/vrl-ltr-ltr-in-multicols.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vrl-in-multicols-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-rl; }
.container {
position: relative;
background: green;
font: 20px/1 Ahem;
inline-size: 80px;
block-size: 120px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
.red { color: red; }
.cb { position: relative; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
.inset-start { inset-block-start: 0; inset-inline-start: 0; }
.inset-end { inset-block-end: 0; inset-inline-end: 0; }
</style>
There should be no red.
<div class="multicol">
<div class="container ltr">
<span class="red">XX</span><span class="ltr">X
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX XX<span class="red">XX</span>
<div class="abs inline inset-start">XX</div>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="red">XX</span><span class="ltr">X
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs block inset-start">XX</div>
<br>XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
X<span class="ltr cb"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs inline inset-start">XX</div>
XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
X<span class="ltr cb"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="cb"><span class="red">XX</span><span class="ltr">X
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs inline inset-start">XX</div>
X<span class="red">XX</span>
</span></span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="cb"><span class="red">XX</span><span class="ltr">X
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br>X<span class="red">XX</span>
</span></span>
</div>
</div>

97
tests/wpt/web-platform-tests/css/css-position/multicol/vrl-ltr-rtl-in-multicols.tentative.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vrl-in-multicols-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-rl; }
.container {
position: relative;
background: green;
font: 20px/1 Ahem;
inline-size: 80px;
block-size: 120px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
.red { color: red; }
.cb { position: relative; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
.inset-start { inset-block-start: 0; inset-inline-start: 0; }
.inset-end { inset-block-end: 0; inset-inline-end: 0; }
</style>
There should be no red.
<div class="multicol">
<div class="container ltr">
XX<span class="rtl"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX <span class="red">XX</span>XX
<div class="abs inline inset-start">XX</div>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
XX<span class="rtl"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>XX
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
XX<span class="rtl cb"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs inline inset-start">XX</div>
XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
XX<span class="rtl cb"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br>XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="cb">X<span class="rtl"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs inline inset-start">XX</div>
<span class="red">XX</span>X
</span></span>
</div>
</div>
<div class="multicol">
<div class="container ltr">
<span class="cb">X<span class="rtl"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>X
</span></span>
</div>
</div>

97
tests/wpt/web-platform-tests/css/css-position/multicol/vrl-rtl-ltr-in-multicols.tentative.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vrl-in-multicols-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-rl; }
.container {
position: relative;
background: green;
font: 20px/1 Ahem;
inline-size: 80px;
block-size: 120px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
.red { color: red; }
.cb { position: relative; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
.inset-start { inset-block-start: 0; inset-inline-start: 0; }
.inset-end { inset-block-end: 0; inset-inline-end: 0; }
</style>
There should be no red.
<div class="multicol">
<div class="container rtl">
<span class="red">XX</span><span class="ltr">XX
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX XX<span class="red">XX</span>
<div class="abs inline inset-start">XX</div>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="red">XX</span><span class="ltr">XX
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs block inset-start">XX</div>
<br>XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="red">XX</span><span class="ltr cb">XX
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs inline inset-start">XX</div>
XX<span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
X<span class="ltr cb"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="cb"><span class="red">XX</span><span class="ltr">X
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs inline inset-start">XX</div>
X<span class="red">XX</span>
</span></span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="cb"><span class="red">XX</span><span class="ltr">X
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br>X<span class="red">XX</span>
</span></span>
</div>
</div>

97
tests/wpt/web-platform-tests/css/css-position/multicol/vrl-rtl-rtl-in-multicols.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
<link rel="match" href="vrl-in-multicols-ref.html">
<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { writing-mode: vertical-rl; }
.container {
position: relative;
background: green;
font: 20px/1 Ahem;
inline-size: 80px;
block-size: 120px;
color: green;
}
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0;
block-size: 60px;
inline-size: 160px;
}
.red { color: red; }
.cb { position: relative; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }
.abs { position: absolute; }
.inset-start { inset-block-start: 0; inset-inline-start: 0; }
.inset-end { inset-block-end: 0; inset-inline-end: 0; }
</style>
There should be no red.
<div class="multicol">
<div class="container rtl">
X<span class="rtl"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX <span class="red">XX</span>XX
<div class="abs inline inset-start">XX</div>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
X<span class="rtl"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>XX
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
X<span class="rtl cb"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XXXX
<div class="abs inline inset-start">XX</div>
<span class="red">XX</span>XX
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
X<span class="rtl cb"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>
</span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="cb">X<span class="rtl"><span class="red">XX</span>
<div class="abs inline inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs inline inset-start">XX</div>
<span class="red">XX</span>X
</span></span>
</div>
</div>
<div class="multicol">
<div class="container rtl">
<span class="cb">X<span class="rtl"><span class="red">XX</span>
<div class="abs block inset-end">XX</div>
XXXX XXXX XXXX XX
<div class="abs block inset-start">XX</div>
<br><span class="red">XX</span>X
</span></span>
</div>
</div>

28
tests/wpt/web-platform-tests/css/css-position/parsing/inset-after-computed.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedStyle().insetAfter</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-after">
<meta name="assert" content="inset-after lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("inset-after", "auto");
test_computed_value("inset-after", "calc(10px + 0.5em)", "30px");
test_computed_value("inset-after", "calc(10px - 0.5em)", "-10px");
test_computed_value("inset-after", "-40%");
test_computed_value("inset-after", "calc(50% + 60px)");
</script>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-position/parsing/inset-after-invalid.html
View file

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-after with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-after">
<meta name="assert" content="inset-after supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("inset-after", "min-content");
test_invalid_value("inset-after", "60");
test_invalid_value("inset-after", "10px 20%");
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-position/parsing/inset-after-valid.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-after with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-after">
<meta name="assert" content="inset-after supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("inset-after", "auto");
test_valid_value("inset-after", "-10px");
test_valid_value("inset-after", "-20%");
test_valid_value("inset-after", "calc(2em + 3ex)");
</script>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-position/parsing/inset-before-computed.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedStyle().insetBefore</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-before">
<meta name="assert" content="inset-before lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("inset-before", "auto");
test_computed_value("inset-before", "calc(10px + 0.5em)", "30px");
test_computed_value("inset-before", "calc(10px - 0.5em)", "-10px");
test_computed_value("inset-before", "-40%");
test_computed_value("inset-before", "calc(50% + 60px)");
</script>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-position/parsing/inset-before-invalid.html
View file

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-before with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-before">
<meta name="assert" content="inset-before supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("inset-before", "min-content");
test_invalid_value("inset-before", "60");
test_invalid_value("inset-before", "10px 20%");
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-position/parsing/inset-before-valid.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-before with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-before">
<meta name="assert" content="inset-before supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("inset-before", "auto");
test_valid_value("inset-before", "-10px");
test_valid_value("inset-before", "-20%");
test_valid_value("inset-before", "calc(2em + 3ex)");
</script>
</body>
</html>

42
tests/wpt/web-platform-tests/css/css-position/parsing/inset-computed.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module: getComputedStyle() for inset properties</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#insets">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
const values = [
// [input, serialized(optional)]
["auto"],
["calc(10px + 0.5em)", "30px"],
["calc(10px - 0.5em)", "-10px"],
["-40%"],
["calc(50% + 60px)"]
];
function test_inset_longhand(longhand_property) {
for (let value of values) {
if (value[1] === undefined)
test_computed_value(longhand_property, value[0]);
else
test_computed_value(longhand_property, value[0], value[1]);
}
}
test_inset_longhand("inset-block-start");
test_inset_longhand("inset-block-end");
test_inset_longhand("inset-inline-start");
test_inset_longhand("inset-inline-end");
</script>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-position/parsing/inset-end-computed.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedStyle().insetEnd</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-end">
<meta name="assert" content="inset-end lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("inset-end", "auto");
test_computed_value("inset-end", "calc(10px + 0.5em)", "30px");
test_computed_value("inset-end", "calc(10px - 0.5em)", "-10px");
test_computed_value("inset-end", "-40%");
test_computed_value("inset-end", "calc(50% + 60px)");
</script>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-position/parsing/inset-end-invalid.html
View file

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-end with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-end">
<meta name="assert" content="inset-end supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("inset-end", "min-content");
test_invalid_value("inset-end", "60");
test_invalid_value("inset-end", "10px 20%");
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-position/parsing/inset-end-valid.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-end with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-end">
<meta name="assert" content="inset-end supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("inset-end", "auto");
test_valid_value("inset-end", "-10px");
test_valid_value("inset-end", "-20%");
test_valid_value("inset-end", "calc(2em + 3ex)");
</script>
</body>
</html>

42
tests/wpt/web-platform-tests/css/css-position/parsing/inset-invalid.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module: parsing inset with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#insets">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
const single_values = [
"0deg",
"calc(20deg)",
"10"
];
const double_values = [
"inherit auto",
"inherit inherit"
];
function test_inset_longhand(longhand_property) {
for (let value of single_values)
test_invalid_value(longhand_property, value);
}
function test_inset_shorthand(shorthand_property) {
for (let value of single_values)
test_invalid_value(shorthand_property, value);
for (let value of double_values)
test_invalid_value(shorthand_property, value);
}
test_inset_longhand("inset-block-start");
test_inset_longhand("inset-block-end");
test_inset_longhand("inset-inline-start");
test_inset_longhand("inset-inline-end");
test_inset_shorthand("inset-block");
test_inset_shorthand("inset-inline");
</script>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-position/parsing/inset-start-computed.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedStyle().insetStart</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-start">
<meta name="assert" content="inset-start lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("inset-start", "auto");
test_computed_value("inset-start", "calc(10px + 0.5em)", "30px");
test_computed_value("inset-start", "calc(10px - 0.5em)", "-10px");
test_computed_value("inset-start", "-40%");
test_computed_value("inset-start", "calc(50% + 60px)");
</script>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-position/parsing/inset-start-invalid.html
View file

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-start with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-start">
<meta name="assert" content="inset-start supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("inset-start", "min-content");
test_invalid_value("inset-start", "60");
test_invalid_value("inset-start", "10px 20%");
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-position/parsing/inset-start-valid.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-start with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-start">
<meta name="assert" content="inset-start supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("inset-start", "auto");
test_valid_value("inset-start", "-10px");
test_valid_value("inset-start", "-20%");
test_valid_value("inset-start", "calc(2em + 3ex)");
</script>
</body>
</html>

62
tests/wpt/web-platform-tests/css/css-position/parsing/inset-valid.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module: parsing inset with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#insets">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
const single_values = [
// [input, serialized(optional)]
["0", "0px"],
["auto"],
["10%"],
["1rem"],
["-10px"],
["-20%"],
["calc(2em + 3ex)"],
];
const double_values = [
// [input, serialized(optional)]
["auto auto", "auto"],
["100px 100px", "100px"],
["10% -5px"],
["1rem calc(0px)"]
];
function test_inset_longhand(longhand_property) {
for (let value of single_values) {
if (value[1] === undefined)
test_valid_value(longhand_property, value[0]);
else
test_valid_value(longhand_property, value[0], value[1]);
}
}
function test_inset_shorthand(shorthand_property) {
for (let value of single_values) {
if (value[1] === undefined)
test_valid_value(shorthand_property, value[0]);
else
test_valid_value(shorthand_property, value[0], value[1]);
}
for (let value of double_values) {
if (value[1] === undefined)
test_valid_value(shorthand_property, value[0]);
else
test_valid_value(shorthand_property, value[0], value[1]);
}
}
test_inset_longhand("inset-block-start");
test_inset_longhand("inset-block-end");
test_inset_longhand("inset-inline-start");
test_inset_longhand("inset-inline-end");
test_inset_shorthand("inset-block");
test_inset_shorthand("inset-inline");
</script>
</body>
</html>

14
tests/wpt/web-platform-tests/css/css-position/position-absolute-dynamic-auto-overflow.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1225548">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: fixed; background: red; max-height: 150px; overflow-y: auto;">
<div id="target" style="width: 100px; background: green;"></div>
</div>
<script>
document.body.offsetTop;
const target = document.getElementById('target');
target.style.height = '200px';
document.body.offsetTop;
target.style.height = '100px';
</script>

1
tests/wpt/web-platform-tests/css/css-position/position-absolute-dynamic-list-marker.html
View file

@ -19,6 +19,7 @@ ul {
height: 100px;
background: green;
}
::marker { color: white; }
</style>
<p>Test passes if there is a filled green square.</p>
<ul>

11
tests/wpt/web-platform-tests/css/css-position/position-absolute-fit-content.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1135207">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1232439">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; width: 100px; height: 200px;">
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; max-height: fit-content; background: green;">
<div style="height: 100px;"></div>
</div>
</div>

21
tests/wpt/web-platform-tests/css/css-position/position-absolute-iframe-print-001.sub.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html>
<title>an abs-pos iframe in the first page but its hypothetical position is in the second page</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#valdef-position-absolute">
<link rel="match" href="position-absolute-iframe-print-ref.html">
<!-- Allow some text antialias pixels to be different. -->
<meta name="fuzzy" content="0-255;0-20">
<style>
body {
margin: 0
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<div style="height:200vh;"></div>
<iframe frameborder=0 scrolling=no
src="//{{hosts[alt][www]}}:{{ports[http][0]}}{{location[path]}}/../resources/position-absolute-iframe-child.html"></iframe>

21
tests/wpt/web-platform-tests/css/css-position/position-absolute-iframe-print-002.sub.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html>
<title>an abs-pos iframe in the first page but its hypothetical position is in the second page</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#valdef-position-absolute">
<link rel="match" href="position-absolute-iframe-print-ref.html">
<!-- Allow some text antialias pixels to be different. -->
<meta name="fuzzy" content="0-255;0-20">
<style>
body {
margin: 0;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<div style="height:200vh;"></div>
<iframe frameborder=0 scrolling=no
src="//{{hosts[alt][www]}}:{{ports[http][0]}}{{location[path]}}/../resources/position-absolute-iframe-child-002.sub.html"></iframe>

6
tests/wpt/web-platform-tests/css/css-position/position-absolute-iframe-print-ref.html Normal file
View file

@ -0,0 +1,6 @@
<!doctype html>
<style>
body { margin: 0 }
</style>
<div style="position:absolute; top:0; left:0;">This text should be visible in the first page</div>
<div style="height:200vh;"></div>

30
tests/wpt/web-platform-tests/css/css-position/position-absolute-in-inline-003.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#def-cb">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#container {
font: 20px/1 Ahem;
color: white;
}
.abs {
position: absolute;
background-color: green;
height: 100px;
width: 100px;
top: -60px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container" style="height: 100px; width: 100px; background-color: red;">
<div style="height: 60px;"></div>
B
<span style="position: relative;">
<div></div>
AA
<div class="abs"></div>
</span>
</div>

33
tests/wpt/web-platform-tests/css/css-position/position-absolute-in-inline-004.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#container {
height: 100px;
width: 100px;
font: 20px/1 Ahem;
color: white;
background-color: red;
}
.abs {
position: absolute;
background-color: green;
height: 100px;
width: 50px;
top: -50px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div style="height: 50px;"></div>
BBBB
<span style="position: relative;">
<div class="abs" style="left: -30px;"></div>
AA A AA AAAA
<div class="abs" style="left: -80px;"></div>
</span>
</div>

59
tests/wpt/web-platform-tests/css/css-position/position-absolute-padding-percentage.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<title>CSS Position Absolute: css-position-3</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-positioning-containing-block">
<link rel="help" href="https://drafts.csswg.org/css-box-4/#padding-physical">
<meta name="assert" content="abspos resolves padding %-ge sizes correctly.">
<style>
#outer-horizontal-padding {
position: relative;
padding: 10px;
width: 30px;
height: 80px;
background: green;
}
#inner-horizontal-padding {
position: absolute;
left: 50px;
height: 100px;
top: 0px;
padding-left: 50%;
padding-right: 50%;
background: green;
}
#outer-vertical-padding {
position: relative;
padding: 10px;
width: 30px;
height: 80px;
background: green;
}
#inner-vertical-padding {
position: absolute;
left: 50px;
width: 50px;
top: 0px;
padding-top: 100%;
padding-bottom: 100%;
background: green;
}
</style>
<div id="outer-horizontal-padding">
<div id="inner-horizontal-padding"></div>
</div>
<div id="outer-vertical-padding">
<div id="inner-vertical-padding"></div>
</div>
<script>
document.body.offsetTop;
test(() => {
let target = document.querySelector("#inner-horizontal-padding");
assert_equals(target.offsetWidth, 50);
}, 'absolute positioned element should resolve padding left+right against container padding-box width' );
test(() => {
let target = document.querySelector("#inner-vertical-padding");
assert_equals(target.offsetHeight, 100);
}, 'absolute positioned element should resolve padding top+bottom against container padding-box width' );
</script>

7
tests/wpt/web-platform-tests/css/css-position/position-absolute-replaced-intrinsic-size.tentative.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-replaced-width">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="position: relative;">
<img style="position: absolute; height: 100px; min-width: max-content; background: green;" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><rect width='100%' height='100%' fill='green'/></svg>">
</div>

7
tests/wpt/web-platform-tests/css/css-position/position-absolute-replaced-no-intrinsic-size.tentative.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-replaced-width">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="position: relative; width: 200; height: 200px; margin-top: -50px;">
<img style="position: absolute; top: 0; bottom: 0; height: max-content; margin: auto; width: 100px; background: green;" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><rect width='100%' height='100%' fill='green'/></svg>">
</div>

21
tests/wpt/web-platform-tests/css/css-position/position-fixed-overflow-print-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html>
<title>Test reference</title>
<style>
body { margin: 0 }
#outer, #inner {
background-color: purple;
width: 50%;
height: 100vh;
}
#inner {
position: absolute;
background-color: blue;
top: 0;
left: 50%;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>

26
tests/wpt/web-platform-tests/css/css-position/position-fixed-overflow-print.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<title>position: fixed doesn't overflow the margin area</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1714513">
<link rel="help" href="https://drafts.csswg.org/css-position/#abspos-insets">
<link rel="match" href="position-fixed-overflow-print-ref.html">
<style>
body { margin: 0 }
#outer, #inner {
background-color: purple;
width: 100vw;
height: 100vh;
}
#inner {
position: fixed;
background-color: blue;
top: 0;
left: 50%;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>

14
tests/wpt/web-platform-tests/css/css-position/position-relative-008.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1227884">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="top: 100% doesn't resolve if the parent doesn't have a height specified.">
<p>Test passes if there is a filled green square.</p>
<table style="border-spacing: 0; background: red;">
<tbody>
<tr style="position: relative; top: 100%;">
<td style="padding: 0;">
<div style="width: 100px; height: 100px; background: green;"></div>
</td>
</tr>
</tbody>
</table>

14
tests/wpt/web-platform-tests/css/css-position/position-relative-009.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1227884">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="top: 100% doesn't resolve if the parent doesn't have a height specified.">
<p>Test passes if there is a filled green square.</p>
<table style="border-spacing: 0; background: red;">
<tbody style="position: relative; top: 100%;">
<tr>
<td style="padding: 0;">
<div style="width: 100px; height: 100px; background: green;"></div>
</td>
</tr>
</tbody>
</table>

14
tests/wpt/web-platform-tests/css/css-position/position-relative-010.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1227884">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="top: 100% doesn't resolve if the parent doesn't have a height specified.">
<p>Test passes if there is a filled green square.</p>
<table style="border-spacing: 0; background: red;">
<tbody>
<tr>
<td style="position: relative; top: 100%; padding: 0;">
<div style="width: 100px; height: 100px; background: green;"></div>
</td>
</tr>
</tbody>
</table>

14
tests/wpt/web-platform-tests/css/css-position/position-relative-011.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1227884">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="top: 100% doesn't resolves against the specified parent height (not the used height).">
<p>Test passes if there is a filled green square.</p>
<table style="border-spacing: 0; background: red;">
<tbody style="height: 10px;">
<tr style="position: relative; top: 100%;">
<td style="padding: 0;">
<div style="position: relative; top: -10px; width: 100px; height: 100px; background: green;"></div>
</td>
</tr>
</tbody>
</table>

14
tests/wpt/web-platform-tests/css/css-position/position-relative-012.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1227884">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="top: 100% doesn't resolves against the specified parent height (not the used height).">
<p>Test passes if there is a filled green square.</p>
<table style="border-spacing: 0; background: red; height: 10px;">
<tbody style="position: relative; top: 100%;">
<tr>
<td style="padding: 0;">
<div style="position: relative; top: -10px; width: 100px; height: 100px; background: green;"></div>
</td>
</tr>
</tbody>
</table>

14
tests/wpt/web-platform-tests/css/css-position/position-relative-013.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1227884">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="top: 100% doesn't resolves against the specified parent height (not the used height).">
<p>Test passes if there is a filled green square.</p>
<table style="border-spacing: 0; background: red;">
<tbody>
<tr style="height: 10px;">
<td style="position: relative; top: 100%; padding: 0;">
<div style="position: relative; top: -10px; width: 100px; height: 100px; background: green;"></div>
</td>
</tr>
</tbody>
</table>

16
tests/wpt/web-platform-tests/css/css-position/resources/position-absolute-iframe-child-002.sub.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html>
<style>
body {
margin: 0;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<div style="height:200vh;"></div>
<iframe frameborder=0 scrolling=no
src="//{{hosts[][]}}:{{ports[http][0]}}{{location[path]}}/../position-absolute-iframe-child.html"></iframe>

6
tests/wpt/web-platform-tests/css/css-position/resources/position-absolute-iframe-child.html Normal file
View file

@ -0,0 +1,6 @@
<!doctype html>
<style>
body { margin: 0 }
</style>
<div style="height:200vh;"></div>
<div style="position:absolute; top:0; left:0;">This text should be visible in the first page</div>

37
tests/wpt/web-platform-tests/css/css-position/resources/ref-rectangle.js
View file

@ -7,23 +7,28 @@ function createIndicatorForStickyElements(sticky_divs) {
throw "No sticky div was found in the test case.";
sticky_divs.forEach((sticky_div) => {
// The relative position indicator will be able to share the same containing
// block to match the position with the same offset from in flow position
// (offsetTop/offsetLeft)
if (getComputedStyle(sticky_div).position != "sticky")
throw "Provided sticky element does not have position: sticky";
var position_div = document.createElement("div");
position_div.style.left = sticky_div.offsetLeft + "px";
position_div.style.top = sticky_div.offsetTop + "px";
// The absolute position is to ensure that the position_div adds zero size
// to in flow layout
position_div.style.position = "absolute"
var indicator_div = document.createElement("div");
indicator_div.style.width = sticky_div.offsetWidth + "px";
indicator_div.style.height = sticky_div.offsetHeight + "px";
indicator_div.style.backgroundColor = "blue";
indicator_div.style.position = "relative";
position_div.appendChild(indicator_div);
sticky_div.parentNode.insertBefore(position_div, sticky_div);
});
document.fonts.ready.then(() => {
sticky_divs.forEach((sticky_div) => {
// The relative position indicator will be able to share the same containing
// block to match the position with the same offset from in flow position
// (offsetTop/offsetLeft)
let position_div = document.createElement("div");
position_div.style.left = sticky_div.offsetLeft + "px";
position_div.style.top = sticky_div.offsetTop + "px";
// The absolute position is to ensure that the position_div adds zero size
// to in flow layout
position_div.style.position = "absolute"
let indicator_div = document.createElement("div");
indicator_div.style.width = sticky_div.offsetWidth + "px";
indicator_div.style.height = sticky_div.offsetHeight + "px";
indicator_div.style.backgroundColor = "blue";
indicator_div.style.position = "relative";
position_div.appendChild(indicator_div);
sticky_div.parentNode.insertBefore(position_div, sticky_div);
});
});
}

7
tests/wpt/web-platform-tests/css/css-position/static-position/vlr-ltr-ltr.html
View file

@ -13,9 +13,14 @@ body { writing-mode: vertical-lr; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.red { color: red; }
.cb { position: relative; }
.cb {
position: relative;
inset-block-start: 2px;
inset-inline-start: 2px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }

7
tests/wpt/web-platform-tests/css/css-position/static-position/vlr-ltr-rtl.tentative.html
View file

@ -13,9 +13,14 @@ body { writing-mode: vertical-lr; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.red { color: red; }
.cb { position: relative; }
.cb {
position: relative;
inset-block-start: 2px;
inset-inline-start: 2px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }

1
tests/wpt/web-platform-tests/css/css-position/static-position/vlr-ref.html
View file

@ -7,6 +7,7 @@ body { writing-mode: vertical-lr; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.large { width: 32px; }

7
tests/wpt/web-platform-tests/css/css-position/static-position/vlr-rtl-ltr.tentative.html
View file

@ -13,9 +13,14 @@ body { writing-mode: vertical-lr; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.red { color: red; }
.cb { position: relative; }
.cb {
position: relative;
inset-block-start: 2px;
inset-inline-start: 2px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }

7
tests/wpt/web-platform-tests/css/css-position/static-position/vlr-rtl-rtl.html
View file

@ -13,9 +13,14 @@ body { writing-mode: vertical-lr; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.red { color: red; }
.cb { position: relative; }
.cb {
position: relative;
inset-block-start: 2px;
inset-inline-start: 2px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }

7
tests/wpt/web-platform-tests/css/css-position/static-position/vrl-ltr-ltr.html
View file

@ -13,9 +13,14 @@ body { writing-mode: vertical-rl; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.red { color: red; }
.cb { position: relative; }
.cb {
position: relative;
inset-block-start: 2px;
inset-inline-start: 2px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }

7
tests/wpt/web-platform-tests/css/css-position/static-position/vrl-ltr-rtl.tentative.html
View file

@ -13,9 +13,14 @@ body { writing-mode: vertical-rl; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.red { color: red; }
.cb { position: relative; }
.cb {
position: relative;
inset-block-start: 2px;
inset-inline-start: 2px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }

1
tests/wpt/web-platform-tests/css/css-position/static-position/vrl-ref.html
View file

@ -7,6 +7,7 @@ body { writing-mode: vertical-rl; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.large { width: 32px; }

7
tests/wpt/web-platform-tests/css/css-position/static-position/vrl-rtl-ltr.tentative.html
View file

@ -13,9 +13,14 @@ body { writing-mode: vertical-rl; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.red { color: red; }
.cb { position: relative; }
.cb {
position: relative;
inset-block-start: 2px;
inset-inline-start: 2px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }

7
tests/wpt/web-platform-tests/css/css-position/static-position/vrl-rtl-rtl.html
View file

@ -13,9 +13,14 @@ body { writing-mode: vertical-rl; }
border: solid black 3px;
height: 400px;
margin: 0 16px;
padding: 2px;
}
.red { color: red; }
.cb { position: relative; }
.cb {
position: relative;
inset-block-start: 2px;
inset-inline-start: 2px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.inline { display: inline; }

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-flexbox-ref.html
View file

@ -35,6 +35,8 @@ window.addEventListener('load', function() {
});
</script>
<p>You should see three green boxes of varying size below. There should be no red or blue.</p>
<div id="scroller1" class="scroller">
<div class="flex-container">
<div class="flex-item"></div>
@ -59,5 +61,3 @@ window.addEventListener('load', function() {
<div class="green flex-item"></div>
</div>
</div>
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-flexbox.html
View file

@ -53,6 +53,8 @@ window.addEventListener('load', function() {
});
</script>
<p>You should see three green boxes of varying size below. There should be no red or blue.</p>
<div id="scroller1" class="scroller">
<div class="flex-container">
<div class="indicator" style="left: 100px;"></div>
@ -79,5 +81,3 @@ window.addEventListener('load', function() {
<div class="green flex-item"></div>
</div>
</div>
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-grid-ref.html
View file

@ -44,6 +44,8 @@ window.addEventListener('load', function() {
});
</script>
<p>You should see three green boxes of varying size below. There should be no red or blue.</p>
<div id="scroller1" class="scroller">
<div class="grid-container">
<div class="grid-item" style="grid-column: 1;"></div>
@ -72,5 +74,3 @@ window.addEventListener('load', function() {
<div class="padding"></div>
</div>
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-grid.html
View file

@ -62,6 +62,8 @@ window.addEventListener('load', function() {
});
</script>
<p>You should see three green boxes of varying size below. There should be no red or blue.</p>
<div id="scroller1" class="scroller">
<div class="grid-container">
<div class="indicator" style="left: 100px;"></div>
@ -91,5 +93,3 @@ window.addEventListener('load', function() {
</div>
<div class="padding"></div>
</div>
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-hyperlink-ref.html
View file

@ -28,8 +28,10 @@ window.addEventListener('load', function() {
document.querySelector('.scroller').scrollTop = 100;
});
</script>
<div>You should see a sticky link at the top of the scrollable area.</div>
<div class='scroller'>
<a href='#' class='positioned'>Link</a>
<div class='spacer'></div>
</div>
<div>You should see a sticky link at the top of the scrollable area.</div>

3
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-hyperlink.html
View file

@ -32,8 +32,9 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see a sticky link at the top of the scrollable area.</div>
<div class='scroller'>
<a href='#' class='sticky'>Link</a>
<div class='spacer'></div>
</div>
<div>You should see a sticky link at the top of the scrollable area.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-inline-ref.html
View file

@ -42,6 +42,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green rectangles below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
@ -65,5 +67,3 @@ window.addEventListener('load', function() {
</div>
</div>
</div>
<div>You should see three green rectangles above. No red or blue should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-inline.html
View file

@ -67,6 +67,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green rectangles below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator inline" style="top: 150px;">XXX</div>
@ -105,5 +107,3 @@ window.addEventListener('load', function() {
</div>
</div>
</div>
<div>You should see three green rectangles above. No red or blue should be visible.</div>

6
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-input-box-gets-focused-after-scroll.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<title>Focusing on visible sticky input box should not scroll the page.</title>
<title>Focusing on visible sticky input box should scroll to unshifted sticky position.</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that focusing on visible sticky
positioned input box should not scroll the page." />
@ -25,6 +25,6 @@ test(() => {
var input = document.getElementById('input');
window.scrollTo(0, 100);
input.focus();
assert_equals(window.scrollY, 100);
}, 'Focusing on visible sticky input box should not scroll the page.');
assert_equals(window.scrollY, 0);
}, 'Focusing on visible sticky input box should reset the scroll to unshifted sticky position.');
</script>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-nested-inline-ref.html
View file

@ -44,6 +44,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green and three yellow rectangles below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
@ -70,5 +72,3 @@ window.addEventListener('load', function() {
</div>
</div>
</div>
<div>You should see three green and three yellow rectangles above. No red or blue should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-nested-inline.html
View file

@ -77,6 +77,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green and three yellow rectangles below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="top: 150px;">X</div>
@ -115,5 +117,3 @@ window.addEventListener('load', function() {
</div>
</div>
</div>
<div>You should see three green and three yellow rectangles above. No red or blue should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-nested-table-ref.html
View file

@ -39,6 +39,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green rectangles below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
@ -62,5 +64,3 @@ window.addEventListener('load', function() {
</div>
</div>
</div>
<div>You should see three green rectangles above. No red or blue should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-nested-table.html
View file

@ -67,6 +67,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green rectangles below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
@ -129,5 +131,3 @@ window.addEventListener('load', function() {
</div>
</div>
</div>
<div>You should see three green rectangles above. No red or blue should be visible.</div>

133
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-nested-thead-th.html Normal file
View file

@ -0,0 +1,133 @@
<!DOCTYPE html>
<title>Nested position:sticky table elements should render correctly</title>
<link rel="match" href="position-sticky-nested-table-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky table elements render correctly" />
<script src="../resources/ref-rectangle.js"></script>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 700px;
}
.prepadding {
height: 100px;
}
table {
border-collapse: collapse;
}
td, th {
height: 50px;
width: 50px;
padding: 0;
}
th {
background: green;
}
.sticky {
position: sticky;
top: 25px;
}
.indicator {
position: absolute;
left: 0;
background-color: red;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div>You should see three green rectangles below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator" style="top: 100px;"></div>
<div class="prepadding"></div>
<table>
<thead class="sticky">
<tr>
<th class="sticky"></th>
</tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator" style="top: 150px;"></div>
<div class="prepadding"></div>
<table>
<thead class="sticky">
<tr>
<th class="sticky"></th>
</tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator" style="top: 250px;"></div>
<div class="prepadding"></div>
<table>
<thead class="sticky">
<tr>
<th class="sticky"></th>
</tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>

24
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-offset-overflow.html
View file

@ -2,14 +2,14 @@
<title>Sticky positioning can cause overflow but must be accessible.</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that a sticky positioned element
can cause overflow but must still be accessible through scrolling" />
does not extend overflow" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.container {
overflow: scroll;
overflow-y: scroll;
width: 100px;
height: 100px;
}
@ -30,31 +30,15 @@ can cause overflow but must still be accessible through scrolling" />
<div class="sticky box"></div>
</div>
<div id="scroller2" class="container">
<div class="sticky box"></div>
</div>
<script>
test(() => {
var scroller = document.getElementById('scroller1');
var sticky = scroller.querySelector('.sticky');
var stickyOffset = sticky.offsetTop -
scroller.scrollTop - scroller.offsetTop;
assert_equals(stickyOffset, 200);
assert_equals(scroller.scrollHeight, 250);
}, 'sticky position offset should be able to cause overflow');
test(() => {
var scroller = document.getElementById('scroller2');
var sticky = scroller.querySelector('.sticky');
scroller.scrollTop = 150;
var stickyOffset = sticky.offsetTop -
scroller.scrollTop - scroller.offsetTop;
assert_equals(stickyOffset, 50);
// Scroll height should be unaffected.
assert_equals(scroller.scrollHeight, 250);
assert_equals(scroller.scrollHeight, 100);
}, 'sticky position offset should be contained by scrolling box');
}, 'sticky position offset in overflow should be accessible');
</script>

26
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-parsing.html
View file

@ -11,8 +11,7 @@ should be allowed." />
<body></body>
<script>
// Sticky is valid for all elements except table-column-group and table-column.
const VALID_STICKY_DISPLAY_TYPES = [
const displayTypes = [
'block',
'inline',
'run-in',
@ -30,6 +29,10 @@ const VALID_STICKY_DISPLAY_TYPES = [
'table-row',
'table-cell',
'table-caption',
// Sticky does not apply to table-column or table-column-group, but the
// computed value should still be sticky.
'table-column',
'table-column-group',
'ruby-base',
'ruby-text',
'ruby-base-container',
@ -38,13 +41,8 @@ const VALID_STICKY_DISPLAY_TYPES = [
'none',
];
const INVALID_STICKY_DISPLAY_TYPES = [
'table-column-group',
'table-column',
];
test(() => {
for (displayValue of VALID_STICKY_DISPLAY_TYPES) {
for (displayValue of displayTypes) {
let div = document.createElement('div');
let style = `position: sticky; display: ${displayValue};`;
div.setAttribute('style', style);
@ -57,17 +55,5 @@ test(() => {
}
document.body.removeChild(div);
}
for (displayValue of INVALID_STICKY_DISPLAY_TYPES) {
let div = document.createElement('div');
let style = `position: sticky; display: ${displayValue};`;
div.setAttribute('style', style);
document.body.appendChild(div);
assert_not_equals(getComputedStyle(div).position, 'sticky',
`Expected sticky to be invalid for display: ${displayValue}`);
document.body.removeChild(div);
}
}, 'The value of sticky for the position property should be parsed correctly');
</script>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-rendering-ref.html
View file

@ -66,6 +66,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see four green squares below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
@ -100,5 +102,3 @@ window.addEventListener('load', function() {
</div>
</div>
</div>
<div>You should see four green squares above. No red or blue should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-rendering.html
View file

@ -108,6 +108,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see four green squares below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 175px;"></div>
@ -155,5 +157,3 @@ window.addEventListener('load', function() {
</div>
</div>
</div>
<div>You should see four green squares above. No red or blue should be visible.</div>

2
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-scroll-with-clip-and-abspos-ref.html
View file

@ -2,7 +2,7 @@
<html class="reftest-wait">
<meta charset="utf-8">
<title>position:sticky should operate correctly</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel="author" href="mailto:masonf@chromium.org">

2
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-scroll-with-clip-and-abspos.html
View file

@ -2,7 +2,7 @@
<html class="reftest-wait">
<meta charset="utf-8">
<title>position:sticky should operate correctly</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel="author" href="mailto:masonf@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the combination of position:sticky, overflow clip, and out-of-flow descendants are properly displayed when scrolled" />
<link rel="match" href="position-sticky-scroll-with-clip-and-abspos-ref.html">

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-stacking-context-ref.html
View file

@ -12,6 +12,6 @@
}
</style>
<div class="indicator box"></div>
<div>You should see a single green box below. No red or blue should be visible.</div>
<div>You should see a single green box above. No red or blue should be visible.</div>
<div class="indicator box"></div>

5
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-stacking-context.html
View file

@ -35,11 +35,12 @@ window.addEventListener('load', function() {
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
})
</script>
<div>You should see a single green box below. No red or blue should be visible.</div>
<div class="indicator box"></div>
<div class="sticky box">
<!-- Because sticky forms a stacking context, this child remains on bottom
even though it has a higher z-index than the indicator box. -->
<div class="child box"></div>
</div>
<div>You should see a single green box above. No red or blue should be visible.</div>

3
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-table-parts-ref.html
View file

@ -35,6 +35,8 @@ window.addEventListener('load', function() {
});
</script>
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>
<div id="scroller1" class="scroller">
<div class="contents">
<div class="prepadding"></div>
@ -45,4 +47,3 @@ window.addEventListener('load', function() {
</table>
</div>
</div>
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>

3
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-table-parts.html
View file

@ -56,6 +56,8 @@ window.addEventListener('load', function() {
});
</script>
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator" style="top: 155px;"></div>
@ -72,4 +74,3 @@ window.addEventListener('load', function() {
</table>
</div>
</div>
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-table-tfoot-bottom-ref.html
View file

@ -38,6 +38,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green boxes below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-table-tfoot-bottom.html
View file

@ -67,6 +67,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green boxes below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
@ -120,5 +122,3 @@ window.addEventListener('load', function() {
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-table-th-bottom-ref.html
View file

@ -38,6 +38,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green boxes below. No red should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-table-th-bottom.html
View file

@ -64,6 +64,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green boxes below. No red should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
@ -123,5 +125,3 @@ window.addEventListener('load', function() {
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-table-th-left-ref.html
View file

@ -38,6 +38,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green boxes below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="left: 100px;"></div>
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>

4
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-table-th-left.html
View file

@ -64,6 +64,8 @@ window.addEventListener('load', function() {
});
</script>
<div>You should see three green boxes below. No red or blue should be visible.</div>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="left: 100px;"></div>
@ -114,5 +116,3 @@ window.addEventListener('load', function() {
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>

Some files were not shown because too many files have changed in this diff Show more