Skip to content

Commit e8f185c

Browse files
sadym-chromiumsadym-chromium
committed
Merge branch 'master' into sadym/emulation.setNetworkConditions
2 parents de4540d + 8ade29a commit e8f185c

File tree

88 files changed

+4816
-107
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+4816
-107
lines changed

‎css/css-anchor-position/anchor-position-multicol-007.html‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,57 @@
11
<!DOCTYPE html>
2+
<title>position-area and anchor() to all four edges works inside vertical-rl multicol</title>
23
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
4+
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
35
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos">
46
<style>
5-
.query_elm {
7+
.container {
8+
border: solid transparent; border-width: 3px 5px 7px 9px;
9+
columns: 3; column-fill: auto; gap: 10px;
10+
inline-size: 230px; block-size: 100px;
11+
writing-mode: vertical-rl;
12+
}
13+
.test {
614
position: absolute;
7-
left: anchor(--a1 left);
8-
top: anchor(--a1 top);
9-
right: anchor(--a1 right);
10-
bottom: anchor(--a1 bottom);
15+
position-anchor: --a1;
16+
place-self: stretch;
17+
}
18+
.test.area {
19+
position-area: center;
20+
}
21+
.test.func {
22+
inset: anchor(inside);
23+
}
24+
.test.inside {
25+
border: solid 5px green;
26+
}
27+
.test.inside.area {
28+
margin: 5px;
29+
}
30+
.test.outside.func {
31+
margin: 5px; background: green;
32+
z-index: -1;
33+
}
34+
.test.outside.area {
35+
border: 5px solid green;
36+
z-index: -1;
37+
}
38+
.anchor {
39+
anchor-name:--a1;
40+
background: red;
1141
}
1242
</style>
1343
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
1444
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
15-
<div style="width:100px; height:100px; background:red;">
16-
<div style="columns:3; column-fill:auto; gap:10px; inline-size:230px; block-size:100px; writing-mode:vertical-rl;">
45+
<div style="position: relative; top: -3px; left: -9px">
46+
<div class="test outside area"></div>
47+
<div class="test outside func"></div>
48+
<div class="container">
1749
<div style="block-size:30px;"></div>
1850
<div style="position:relative; inline-size:100px; block-size:200px;">
1951
<div style="block-size:20px;"></div>
20-
<div style="anchor-name:--a1; inline-size:20px; block-size:70px;"></div>
21-
<!-- The containing block of this anchored element is inside the
22-
fragmentation context. -->
23-
<div class="query_elm" style="background: green;"></div>
24-
</div>
25-
<!-- The containing block of this anchored element is *not* inside the
26-
fragmentation context. Fill what's left. -->
27-
<div class="query_elm">
28-
<div style="margin-inline-end:20px; block-size:20px; background:green;"></div>
29-
<div style="block-size:30px; background:green;"></div>
30-
<div style="margin-inline-start:20px; block-size:50px; background:green;"></div>
52+
<div class="anchor" style="inline-size:20px; block-size:70px;"></div>
53+
<div class="test inside area"></div>
54+
<div class="test inside func"></div>
3155
</div>
3256
</div>
3357
</div>

‎css/css-anchor-position/anchor-position-multicol-008.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!DOCTYPE html>
2+
<title>anchor() to two edges inside vertical-rl multicol</title>
23
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
34
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos">
45
<style>

‎css/css-anchor-position/position-visibility-no-overflow-scroll-002.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<title>CSS Anchor Positioning Test: position-visibility: no-overflow + scrolling + position-area</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
5+
<link rel="match" href="position-visibility-no-overflow-scroll-ref.html">
6+
<style>
7+
#container {
8+
position: relative;
9+
width: 400px;
10+
height: 150px;
11+
overflow: hidden;
12+
}
13+
#scroll-container {
14+
overflow: hidden scroll;
15+
width: 100%;
16+
height: 100%;
17+
}
18+
19+
.anchor {
20+
width: 100px;
21+
height: 100px;
22+
background: orange;
23+
display: inline-block;
24+
}
25+
26+
.target {
27+
position: absolute;
28+
position-visibility: no-overflow;
29+
width: 100px;
30+
height: 100px;
31+
}
32+
</style>
33+
34+
<div id="container">
35+
<div id="scroll-container">
36+
<div class="anchor" style="anchor-name: --a1;">anchor1</div>
37+
<div class="anchor" style="anchor-name: --a2; position: relative; top: 100px">anchor2</div>
38+
<div id="target1" class="target" style="position-anchor: --a1; position-area: bottom; background: green">target1</div>
39+
<div id="target2" class="target" style="position-anchor: --a2; position-area: top; background: red">target2</div>
40+
<div style="height: 300px"></div>
41+
</div>
42+
</div>
43+
44+
<script>
45+
requestAnimationFrame(() => {
46+
requestAnimationFrame(() => {
47+
document.getElementById('scroll-container').scrollTop = 50;
48+
document.documentElement.classList.remove('reftest-wait');
49+
});
50+
});
51+
</script>
52+
</html>

‎css/css-fonts/font-size-zero-3.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Test: font-size: 0</title>
4+
<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-size-prop">
6+
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
7+
<meta name="assert" content="Text with `font-size: 0` has an intrinsic contribution of 0">
8+
9+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
10+
11+
<div style="float: left; height: 200px; font-size: 0; background: red">
12+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
13+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
14+
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
15+
aliquip ex ea commodo consequat. Duis aute irure dolor in
16+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
17+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
18+
culpa qui officia deserunt mollit anim id est laborum.
19+
</div>
20+
<div style="width: 200px; height: 200px; background: green"></div>

‎css/css-gaps/flex/flex-gap-decorations-028-ref.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
3+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
4+
<style>
5+
.multi-column {
6+
columns: 3;
7+
height: 47px;
8+
column-width: 170px;
9+
width: 510px;
10+
}
11+
12+
body {
13+
margin: 0px;
14+
}
15+
16+
#flexbox {
17+
border: 2px solid rgb(96 139 168);
18+
display: flex;
19+
column-gap: 10px;
20+
row-gap: 10px;
21+
width: 170px;
22+
flex-wrap: wrap;
23+
}
24+
25+
.items {
26+
background-color: rgb(96 139 168 / 0.2);
27+
flex-shrink: 1;
28+
width: 50px;
29+
height: 50px;
30+
}
31+
32+
#four {
33+
width: 100px;
34+
}
35+
36+
.column-rule {
37+
position: absolute;
38+
top: 0px;
39+
background: red;
40+
width: 10px;
41+
}
42+
43+
.row-rule {
44+
position: absolute;
45+
background: blue;
46+
width: 170px;
47+
height: 10px;
48+
top: 5px;
49+
left: 265px;
50+
}
51+
</style>
52+
53+
<div class="column-rule" style="top: 2px; height: 45px; left: 52px;"></div>
54+
<div class="column-rule" style="top: 2px; height: 45px; left: 112px;"></div>
55+
56+
<div class="column-rule" style="height: 5px; left: 315px;"></div>
57+
<div class="column-rule" style="height: 5px; left: 375px;"></div>
58+
<div class="column-rule" style="top: 15px; height: 32px; left: 365px;"></div>
59+
<div class=row-rule></div>
60+
61+
<div class="column-rule" style="height: 18px; left: 628px;"></div>
62+
63+
<div class="multi-column">
64+
<div id="flexbox">
65+
<div class="items">One</div>
66+
<div class="items">Two</div>
67+
<div class="items">Three</div>
68+
<div class="items" id="four">Four</div>
69+
<div class="items">Five</div>
70+
</div>
71+
</div>

‎css/css-gaps/flex/flex-gap-decorations-028.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: flex gaps are painted when the container is fragmented.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-028-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
8+
<style>
9+
.multi-column {
10+
columns: 3;
11+
height: 47px;
12+
column-width: 170px;
13+
width: 510px;
14+
}
15+
16+
body {
17+
margin: 0px;
18+
}
19+
20+
#flexbox {
21+
border: 2px solid rgb(96 139 168);
22+
display: flex;
23+
column-gap: 10px;
24+
row-gap: 10px;
25+
row-rule-style: solid;
26+
row-rule-color: blue;
27+
row-rule-width: 10px;
28+
column-rule-style: solid;
29+
column-rule-color: red;
30+
column-rule-width: 10px;
31+
width: 170px;
32+
flex-wrap: wrap;
33+
}
34+
35+
.items {
36+
background-color: rgb(96 139 168 / 0.2);
37+
flex-shrink: 1;
38+
width: 50px;
39+
height: 50px;
40+
}
41+
42+
#four {
43+
width: 100px;
44+
}
45+
</style>
46+
47+
<div class="multi-column">
48+
<div id="flexbox">
49+
<div class="items">One</div>
50+
<div class="items">Two</div>
51+
<div class="items">Three</div>
52+
<div class="items" id="four">Four</div>
53+
<div class="items">Five</div>
54+
</div>
55+
</div>

‎css/css-gaps/flex/flex-gap-decorations-030-ref.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
3+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
4+
<style>
5+
.multi-column {
6+
columns: 4;
7+
height: 30px;
8+
column-width: 170px;
9+
width: 680px;
10+
}
11+
12+
body {
13+
margin: 0px;
14+
}
15+
16+
#flexbox {
17+
border: 2px solid rgb(96 139 168);
18+
display: flex;
19+
column-gap: 10px;
20+
row-gap: 10px;
21+
width: 170px;
22+
flex-wrap: wrap;
23+
}
24+
25+
.items {
26+
background-color: rgb(96 139 168 / 0.2);
27+
flex-shrink: 1;
28+
width: 50px;
29+
height: 50px;
30+
}
31+
32+
#four {
33+
width: 100px;
34+
}
35+
36+
.column-rule {
37+
position: absolute;
38+
top: 2px;
39+
background: red;
40+
width: 10px;
41+
}
42+
</style>
43+
<div class="column-rule" style="height: 28px; left: 52px;"></div>
44+
<div class="column-rule" style="height: 28px; left: 112px;"></div>
45+
<div class="column-rule" style="height: 22px; top: 0px; left: 284px;"></div>
46+
<div class="column-rule" style="height: 22px; top: 0px; left: 344px;"></div>
47+
<div class="column-rule" style="height: 30px; top: 0px; left: 566px;"></div>
48+
<div class="column-rule" style="height: 20px; top: 0px; left: 798px;"></div>
49+
<div class="multi-column">
50+
<div id="flexbox">
51+
<div class="items">One</div>
52+
<div class="items">Two</div>
53+
<div class="items">Three</div>
54+
<div class="items" id="four">Four</div>
55+
<div class="items">Five</div>
56+
</div>
57+
</div>

‎css/css-gaps/flex/flex-gap-decorations-030.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: flex gaps are painted when the container is fragmented and row gap is suppressed.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-030-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
8+
<style>
9+
.multi-column {
10+
columns: 4;
11+
height: 30px;
12+
column-width: 170px;
13+
width: 680px;
14+
}
15+
16+
body {
17+
margin: 0px;
18+
}
19+
20+
#flexbox {
21+
border: 2px solid rgb(96 139 168);
22+
display: flex;
23+
column-gap: 10px;
24+
row-gap: 10px;
25+
row-rule-style: solid;
26+
row-rule-color: blue;
27+
row-rule-width: 10px;
28+
column-rule-style: solid;
29+
column-rule-color: red;
30+
column-rule-width: 10px;
31+
width: 170px;
32+
flex-wrap: wrap;
33+
}
34+
35+
.items {
36+
background-color: rgb(96 139 168 / 0.2);
37+
flex-shrink: 1;
38+
width: 50px;
39+
height: 50px;
40+
}
41+
42+
#four {
43+
width: 100px;
44+
}
45+
</style>
46+
<div class="multi-column">
47+
<div id="flexbox">
48+
<div class="items">One</div>
49+
<div class="items">Two</div>
50+
<div class="items">Three</div>
51+
<div class="items" id="four">Four</div>
52+
<div class="items">Five</div>
53+
</div>
54+
</div>

0 commit comments

Comments
 (0)