mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision 36634cbcf3253dfe8d220990a27ad4eeebf8ec2f
This commit is contained in:
WPT Sync Bot
parent
0964d055cd
commit
7295abcc2a
245 changed files with 5966 additions and 1901 deletions
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 100px / 50px 50px 50px;
|
||||
background: grey;
|
||||
align-items: baseline;
|
||||
}
|
||||
#item1 {
|
||||
height: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
#item3 {
|
||||
height: 30px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-y": 30 },
|
||||
item2: {"data-offset-y": 0 },
|
||||
item3: {"data-offset-y": 20 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-y": 10 },
|
||||
item2: {"data-offset-y": 50 },
|
||||
item3: {"data-offset-y": 0 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.alignSelf = "end";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
|
||||
<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 100px / 50px 50px 50px;
|
||||
background: grey;
|
||||
align-items: baseline;
|
||||
}
|
||||
#item1 {
|
||||
height: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
height: 50px;
|
||||
background: green;
|
||||
align-self: center;
|
||||
}
|
||||
#item3 {
|
||||
height: 30px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-y": 10 },
|
||||
item2: {"data-offset-y": 25 },
|
||||
item3: {"data-offset-y": 0 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-y": 30 },
|
||||
item2: {"data-offset-y": 0 },
|
||||
item3: {"data-offset-y": 20 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.alignSelf = "baseline";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
|
||||
<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the justify-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 50px 50px 50px / 100px;
|
||||
background: grey;
|
||||
justify-items: baseline;
|
||||
}
|
||||
#container > div { writing-mode: vertical-rl; }
|
||||
#item1 {
|
||||
width: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
width: 50px;
|
||||
background: green;
|
||||
}
|
||||
#item3 {
|
||||
width: 30px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-x": 30 },
|
||||
item2: {"data-offset-x": 0 },
|
||||
item3: {"data-offset-x": 20 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-x": 10 },
|
||||
item2: {"data-offset-x": 50 },
|
||||
item3: {"data-offset-x": 0 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.justifySelf = "end";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
|
||||
<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 50px 50px 50px / 100px;
|
||||
background: grey;
|
||||
justify-items: baseline;
|
||||
}
|
||||
#container > div { writing-mode: vertical-rl; }
|
||||
#item1 {
|
||||
width: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
width: 50px;
|
||||
background: green;
|
||||
justify-self: center;
|
||||
}
|
||||
#item3 {
|
||||
width: 30px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-x": 10 },
|
||||
item2: {"data-offset-x": 25 },
|
||||
item3: {"data-offset-x": 0 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-x": 30 },
|
||||
item2: {"data-offset-x": 0 },
|
||||
item3: {"data-offset-x": 20 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.justifySelf = "baseline";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
|
||||
<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 100px / 50px 50px 50px;
|
||||
background: grey;
|
||||
align-items: baseline;
|
||||
font-family: Ahem;
|
||||
}
|
||||
#item1 {
|
||||
font-size: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
font-size: 40px;
|
||||
background: green;
|
||||
}
|
||||
#item3 {
|
||||
font-size: 30px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-y": 16 },
|
||||
item2: {"data-offset-y": 0 },
|
||||
item3: {"data-offset-y": 8 }
|
||||
}
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-y": 8 },
|
||||
item2: {"data-offset-y": 60 },
|
||||
item3: {"data-offset-y": 0 }
|
||||
}
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.alignSelf = "end";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
|
||||
<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 100px / 50px 50px 50px;
|
||||
background: grey;
|
||||
align-items: baseline;
|
||||
font-family: Ahem;
|
||||
}
|
||||
#item1 {
|
||||
font-size: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
font-size: 40px;
|
||||
background: green;
|
||||
align-self: center;
|
||||
}
|
||||
#item3 {
|
||||
font-size: 30px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-y": 8 },
|
||||
item2: {"data-offset-y": 30 },
|
||||
item3: {"data-offset-y": 0 }
|
||||
}
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-y": 16 },
|
||||
item2: {"data-offset-y": 0 },
|
||||
item3: {"data-offset-y": 8 }
|
||||
}
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.alignSelf = "baseline";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
|
||||
<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing the value of Self-Alignment properties</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 50px 50px 50px / 100px;
|
||||
background: grey;
|
||||
justify-items: baseline;
|
||||
font-family: Ahem;
|
||||
text-orientation: sideways;
|
||||
}
|
||||
#container > div { writing-mode: vertical-lr; }
|
||||
#item1 {
|
||||
font-size: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
font-size: 40px;
|
||||
background: green;
|
||||
}
|
||||
#item3 {
|
||||
font-size: 30px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-x": 4 },
|
||||
item2: {"data-offset-x": 0 },
|
||||
item3: {"data-offset-x": 2 }
|
||||
}
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-x": 2 },
|
||||
item2: {"data-offset-x": 60 },
|
||||
item3: {"data-offset-x": 0 }
|
||||
}
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.justifySelf = "end";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
|
||||
<div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
|
||||
<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 50px 50px 50px / 100px;
|
||||
background: grey;
|
||||
justify-items: baseline;
|
||||
font-family: Ahem;
|
||||
}
|
||||
#container > div { writing-mode: vertical-lr; }
|
||||
#item1 {
|
||||
font-size: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
font-size: 40px;
|
||||
background: green;
|
||||
justify-self: center;
|
||||
}
|
||||
#item3 {
|
||||
font-size: 30px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-x": 5 },
|
||||
item2: {"data-offset-x": 30 },
|
||||
item3: {"data-offset-x": 0 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-x": 10 },
|
||||
item2: {"data-offset-x": 0 },
|
||||
item3: {"data-offset-x": 5 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.justifySelf = "baseline";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
|
||||
<div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
|
||||
<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Items not participating in baseline may later participate if there is an extra pass of the track sizing algorithm.">
|
||||
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
background: grey;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.row { grid: minmax(0px, 1fr) / 50px 50px 100px }
|
||||
.column { grid: 50px 50px 100px / minmax(0px, 1fr); }
|
||||
.item1 {
|
||||
font-size: 30px;
|
||||
background: blue;
|
||||
}
|
||||
.item2 {
|
||||
font-size: 20px;
|
||||
background: red;
|
||||
}
|
||||
.item3 {
|
||||
font-size: 80px;
|
||||
background: green;
|
||||
}
|
||||
.height50 { height: 50px; }
|
||||
.relativeHeight { height: 50%; }
|
||||
.relativeWidth { width: 50%; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<pre>flex rows - column-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
|
||||
<div class="grid row alignItemsBaseline">
|
||||
<div class="item1 verticalLR" data-offset-x="0" data-offset-y="34" data-expected-width="50" data-expected-height="30">É</div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="48" data-expected-width="50" data-expected-height="20">É</div>
|
||||
<div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex row - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
|
||||
<div class="grid row alignItemsBaseline ">
|
||||
<div class="item1 relativeHeight" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="64" data-expected-width="50" data-expected-height="20">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex row - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
|
||||
<div class="grid row alignItemsBaseline">
|
||||
<div class="item1 relativeHeight" data-offset-x="0" data-offset-y="24" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="item2 verticalLR" data-offset-x="50" data-offset-y="44" data-expected-width="50" data-expected-height="20">É</div>
|
||||
<div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex column - row-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
|
||||
<div class="grid column justifyItemsBaseline">
|
||||
<div class="item1" data-offset-x="16" data-offset-y="0" data-expected-width="30" data-expected-height="50">É</div>
|
||||
<div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex column - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
|
||||
<div class="grid column justifyItemsBaseline">
|
||||
<div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
|
||||
<div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex columns - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
|
||||
<div class="grid column justifyItemsBaseline">
|
||||
<div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
|
||||
<div class="item2" data-offset-x="16" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -3,3 +3,12 @@ function evaluateStyleChange(element, phase, expectedProperty, expectedResult) {
|
|||
element.setAttribute(expectedProperty, expectedResult);
|
||||
checkLayout("." + phase, false);
|
||||
}
|
||||
function evaluateStyleChangeMultiple(phase, expectedResult) {
|
||||
for (var item in expectedResult) {
|
||||
var element = document.getElementById(item);
|
||||
element.className += " " + phase;
|
||||
for (var key in expectedResult[item])
|
||||
element.setAttribute(key, expectedResult[item][key]);
|
||||
}
|
||||
checkLayout("." + phase, false);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue