mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +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
|
|
@ -78,11 +78,139 @@
|
|||
assert_equals(event.animationName, "sample");
|
||||
}, "animationName set to 'sample'");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {animationName: undefined});
|
||||
assert_equals(event.animationName, "");
|
||||
}, "animationName set to undefined");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {animationName: null});
|
||||
assert_equals(event.animationName, "null");
|
||||
}, "animationName set to null");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {animationName: false});
|
||||
assert_equals(event.animationName, "false");
|
||||
}, "animationName set to false");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {animationName: true});
|
||||
assert_equals(event.animationName, "true");
|
||||
}, "animationName set to true");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {animationName: 0.5});
|
||||
assert_equals(event.animationName, "0.5");
|
||||
}, "animationName set to a number");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {animationName: []});
|
||||
assert_equals(event.animationName, "");
|
||||
}, "animationName set to []");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {animationName: [1, 2, 3]});
|
||||
assert_equals(event.animationName, "1,2,3");
|
||||
}, "animationName set to [1, 2, 3]");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {animationName: {sample: 0.5}});
|
||||
assert_equals(event.animationName, "[object Object]");
|
||||
}, "animationName set to an object");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test",
|
||||
{animationName: {valueOf: function () { return 'sample'; }}});
|
||||
assert_equals(event.animationName, "[object Object]");
|
||||
}, "animationName set to an object with a valueOf function");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: 0.5});
|
||||
assert_equals(event.elapsedTime, 0.5);
|
||||
}, "elapsedTime set to 0.5");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: -0.5});
|
||||
assert_equals(event.elapsedTime, -0.5);
|
||||
}, "elapsedTime set to -0.5");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: undefined});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to undefined");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: null});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to null");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: false});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to false");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: true});
|
||||
assert_equals(event.elapsedTime, 1);
|
||||
}, "elapsedTime set to true");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: ""});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to ''");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: []});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to []");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: [0.5]});
|
||||
assert_equals(event.elapsedTime, 0.5);
|
||||
}, "elapsedTime set to [0.5]");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent(
|
||||
"test", {elapsedTime: { valueOf: function() { return 0.5; }}});
|
||||
assert_equals(event.elapsedTime, 0.5);
|
||||
}, "elapsedTime set to an object with a valueOf function");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new AnimationEvent("test", {elapsedTime: NaN});
|
||||
}, 'elapsedTime cannot be NaN so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to NaN");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new AnimationEvent("test", {elapsedTime: Infinity});
|
||||
}, 'elapsedTime cannot be Infinity so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to Infinity");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new AnimationEvent("test", {elapsedTime: -Infinity});
|
||||
}, 'elapsedTime cannot be -Infinity so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to -Infinity");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new AnimationEvent("test", {elapsedTime: "sample"});
|
||||
}, 'elapsedTime cannot be a string so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to 'sample'");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new AnimationEvent("test", {elapsedTime: [0.5, 1.0]});
|
||||
}, 'elapsedTime cannot be a multi-element array so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to [0.5, 1.0]");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new AnimationEvent("test", {elapsedTime: { sample: 0.5}});
|
||||
}, 'elapsedTime cannot be an object so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to an object");
|
||||
|
||||
test(function() {
|
||||
var eventInit = {animationName: "sample", elapsedTime: 0.5};
|
||||
var event = new AnimationEvent("test", eventInit);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<title>Historical CSS Animation features must be removed</title>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
function isInterfaceNuked(name) {
|
||||
test(function() {
|
||||
assert_equals(window[name], undefined)
|
||||
}, "Historical CSS features must be removed: " + name)
|
||||
}
|
||||
var nukedInterfaces = [
|
||||
"WebKitAnimationEvent", // Replaced by unprefixed AnimationEvent
|
||||
];
|
||||
nukedInterfaces.forEach(isInterfaceNuked);
|
||||
</script>
|
||||
|
|
@ -31,5 +31,4 @@
|
|||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
inner.style.backgroundClip = "border-box";
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Size containment on fieldset</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-fieldset-001-ref.html">
|
||||
<meta name=assert content="Size containment does apply to fieldsets, thus their size is the same than if they don't have contents.">
|
||||
<style>
|
||||
fieldset {
|
||||
contain: size;
|
||||
display: inline-block;
|
||||
color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a small space, and then the word "after".</p>
|
||||
before<fieldset><legend>legend</legend></fieldset>after
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
fieldset {
|
||||
display: inline-block;
|
||||
color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a small space, and then the word "after".</p>
|
||||
before<fieldset></fieldset>after
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Multicol under vertical-rl scrolling container</title>
|
||||
<p>Passes if there are two green squares</p>
|
||||
<div id="scroller" style="width: 200px; height: 200px; overflow: scroll; border: 1px solid black">
|
||||
<div style="width: 580px; height: 500px; position: relative">
|
||||
<div style="position: absolute; right: 0">
|
||||
<div style="width: 80px; height: 80px; background: green"></div>
|
||||
<div style="height: 20px"></div>
|
||||
<div style="width: 80px; height: 80px; background: green"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Scroll all the way to the right.
|
||||
scroller.scrollLeft = 800;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Multicol under vertical-rl scrolling container</title>
|
||||
<link rel="match" href="multicol-under-vertical-rl-scroll-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol">
|
||||
<p>Passes if there are two green squares</p>
|
||||
<div style="width: 200px; height: 200px; overflow: scroll; writing-mode: vertical-rl; border: 1px solid black">
|
||||
<div style="columns: 2; column-gap: 20px; width: 80px; height: 180px">
|
||||
<div style="width: 160px; background: green"></div>
|
||||
</div>
|
||||
<div style="width: 500px; height: 500px"></div>
|
||||
</div>
|
||||
|
|
@ -72,4 +72,18 @@ test(function(){
|
|||
assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-5'), '42px');
|
||||
}, "Reference to syntax-incompatible variable results in inherited value");
|
||||
|
||||
test(function(){
|
||||
CSS.registerProperty({name: '--inherited-em', syntax: '<length>', initialValue: '0px', inherits: true});
|
||||
outer.style = 'font-size: 11px; --inherited-em: 10em;';
|
||||
inner.style = 'font-size: 22px; --unregistered:var(--inherited-em);';
|
||||
assert_equals(getComputedStyle(inner).getPropertyValue('--unregistered'), '110px');
|
||||
}, "Font-relative units are absolutized before before inheritance");
|
||||
|
||||
test(function(){
|
||||
CSS.registerProperty({name: '--calc-length', syntax: '<length>', initialValue: '0px', inherits: true});
|
||||
outer.style = '--calc-length: calc(10px + 10px);';
|
||||
inner.style = '--unregistered:var(--calc-length);';
|
||||
assert_equals(getComputedStyle(inner).getPropertyValue('--unregistered'), '20px');
|
||||
}, "Calc expressions are resolved before inheritance");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
function register_length(name) {
|
||||
function register_length(name, inherits=true) {
|
||||
CSS.registerProperty({
|
||||
name: name,
|
||||
syntax: '<length>',
|
||||
initialValue: '0px',
|
||||
inherits: false
|
||||
inherits: inherits
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -22,6 +22,9 @@
|
|||
register_length('--font-size-rem-via-var');
|
||||
register_length('--font-size-ex-via-var');
|
||||
register_length('--font-size-ch-via-var');
|
||||
register_length('--font-size-em-inherited', true);
|
||||
register_length('--font-size-ex-inherited', true);
|
||||
register_length('--font-size-ch-inherited', true);
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
|
|
@ -43,12 +46,20 @@
|
|||
--font-size-ch-via-var: var(--unregistered-ch);
|
||||
}
|
||||
|
||||
#parent {
|
||||
--font-size-em-inherited: 4em;
|
||||
--font-size-ex-inherited: 4ex;
|
||||
--font-size-ch-inherited: 4ch;
|
||||
}
|
||||
|
||||
#target {
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target></div>
|
||||
<div id=parent>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
<div id=ref></div>
|
||||
|
||||
<script>
|
||||
|
|
@ -170,4 +181,25 @@
|
|||
assert_property_equals('--font-size-rem-via-var', expected10rem, root);
|
||||
}, 'Lengths with rem units are detected via var references');
|
||||
|
||||
test(function() {
|
||||
let expected4em = compute_dimension('4em', 'unset');
|
||||
target.style = 'font-size: var(--font-size-em-inherited);';
|
||||
assert_property_equals('font-size', expected4em);
|
||||
assert_property_equals('--font-size-em-inherited', expected4em);
|
||||
}, 'Inherited lengths with em units may be used');
|
||||
|
||||
test(function() {
|
||||
let expected4ex = compute_dimension('4ex', 'unset');
|
||||
target.style = 'font-size: var(--font-size-ex-inherited);';
|
||||
assert_property_equals('font-size', expected4ex);
|
||||
assert_property_equals('--font-size-ex-inherited', expected4ex);
|
||||
}, 'Inherited lengths with ex units may be used');
|
||||
|
||||
test(function() {
|
||||
let expected4ch = compute_dimension('4ch', 'unset');
|
||||
target.style = 'font-size: var(--font-size-ch-inherited);';
|
||||
assert_property_equals('font-size', expected4ch);
|
||||
assert_property_equals('--font-size-ch-inherited', expected4ch);
|
||||
}, 'Inherited lengths with ch units may be used');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ test(function() {
|
|||
assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px');
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-length-7'), '123px');
|
||||
assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px');
|
||||
assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px');
|
||||
assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px');
|
||||
assert_equals(computedStyle.getPropertyValue('--length-3'), ' calc(123px + 123px)');
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px');
|
||||
|
||||
|
|
@ -96,5 +96,43 @@ test(function(){
|
|||
assert_equals(computedStyle.getPropertyValue('--registered-length-list-3'), '1px, 10px, 2px, 1px, 20px, 10px, 2px');
|
||||
}, 'Registered lists may be concatenated');
|
||||
|
||||
test(function(){
|
||||
CSS.registerProperty({
|
||||
name: '--length-em',
|
||||
syntax: '<length>',
|
||||
initialValue: '0px',
|
||||
inherits: false
|
||||
});
|
||||
element.style = 'font-size: 11px; --length-em: 10em; --unregistered:var(--length-em);';
|
||||
let computedStyle = getComputedStyle(element);
|
||||
assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px');
|
||||
element.style = '';
|
||||
}, 'Font-relative units are absolutized when substituting');
|
||||
|
||||
test(function(){
|
||||
CSS.registerProperty({
|
||||
name: '--length-calc',
|
||||
syntax: '<length>',
|
||||
initialValue: '0px',
|
||||
inherits: false
|
||||
});
|
||||
element.style = 'font-size: 11px; --length-calc: calc(10em + 10px); --unregistered:var(--length-calc);';
|
||||
let computedStyle = getComputedStyle(element);
|
||||
assert_equals(computedStyle.getPropertyValue('--unregistered'), '120px');
|
||||
element.style = '';
|
||||
}, 'Calc expressions are resolved when substituting');
|
||||
|
||||
test(function(){
|
||||
CSS.registerProperty({
|
||||
name: '--length-calc-list',
|
||||
syntax: '<length>#',
|
||||
initialValue: '0px',
|
||||
inherits: false
|
||||
});
|
||||
element.style = 'font-size: 11px; --length-calc-list: 10em, calc(10em + 10px); --unregistered:var(--length-calc-list);';
|
||||
let computedStyle = getComputedStyle(element);
|
||||
assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px, 120px');
|
||||
element.style = '';
|
||||
}, 'Lists with relative units are absolutized when substituting');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="caption margins are resolved against table's height when table has vertical flow" />
|
||||
<style>
|
||||
x-table {
|
||||
display: table;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-lr;
|
||||
outline: 2px dashed blue;
|
||||
}
|
||||
x-caption {
|
||||
display: table-caption;
|
||||
height: 50px;
|
||||
width: 120px;
|
||||
writing-mode: horizontal-tb;
|
||||
outline: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<x-table>
|
||||
<x-caption id=captionMarginLeft style="margin-left:20%">caption</x-caption>
|
||||
</x-table>
|
||||
<x-table>
|
||||
<x-caption id=captionMarginTop style="margin:auto 0">caption</x-caption>
|
||||
</x-table>
|
||||
<p>This is a script test because of how ridiculously differently the current
|
||||
engines render these cases.</p>
|
||||
|
||||
|
||||
<script>
|
||||
let caption_margin_left = getComputedStyle(id=captionMarginLeft).marginLeft;
|
||||
test(() => assert_equals(caption_margin_left, "40px"), "Caption percent margins are resolved against table's height for vertical-lr tables");
|
||||
let caption_margin_top = getComputedStyle(captionMarginTop).marginTop;
|
||||
test(() => assert_equals(caption_margin_top, "75px"), "Caption with auto top/bottom margins is centered vertically for vertical-lr tables");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Text Test: minimum rendered width of tab character</title>
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
|
||||
<style>
|
||||
span { background-color: yellow; display: inline-block; letter-spacing: -.1em; }
|
||||
pre { position: absolute; top: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre>
|
||||
</pre>
|
||||
<pre>
|
||||
</pre>
|
||||
<script>
|
||||
let pre = document.getElementsByTagName("pre")[0];
|
||||
let test = "";
|
||||
for (i = 7.0; i <= 8.125; i += 0.125) {
|
||||
test += `<span style="width:${i}ch">${i}ch</span>\n`;
|
||||
}
|
||||
pre.innerHTML = test;
|
||||
pre = document.getElementsByTagName("pre")[1];
|
||||
test = "";
|
||||
for (i = 0; i < 5; i++) {
|
||||
test += `\tfoo\n`;
|
||||
}
|
||||
for (i = 0; i < 5; i++) {
|
||||
test += `\t\tfoo\n`;
|
||||
}
|
||||
pre.innerHTML = test;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Text Test: minimum rendered width of tab character</title>
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
|
||||
<link rel="reviewer" title="Xidorn Quan" href="https://www.upsuper.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="tab-min-rendered-width-1-ref.html">
|
||||
<meta name="assert" content="If [rendered width of tab would be] less than 0.5ch, then the subsequent tab stop is used instead.">
|
||||
<style>
|
||||
span { background-color: yellow; display: inline-block; letter-spacing: -.1em; }
|
||||
pre { position: absolute; top: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre>
|
||||
</pre>
|
||||
<script>
|
||||
let pre = document.getElementsByTagName("pre")[0];
|
||||
let test = "";
|
||||
for (i = 7.0; i <= 8.125; i += 0.125) {
|
||||
test += `<span style="width:${i}ch">${i}ch</span>	foo\n`;
|
||||
}
|
||||
pre.innerHTML = test;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: TransitionEvent interface</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#interface-transitionevent">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="transitionevent-interface.js"></script>
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
var event = new TransitionEvent("");
|
||||
assert_true(event instanceof window.TransitionEvent);
|
||||
}, "the event is an instance of TransitionEvent");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("");
|
||||
assert_true(event instanceof window.Event);
|
||||
}, "the event inherts from Event");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new TransitionEvent();
|
||||
}, 'First argument is required, so was expecting a TypeError.');
|
||||
}, 'Missing type argument');
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test");
|
||||
assert_equals(event.type, "test");
|
||||
}, "type argument is string");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent(null);
|
||||
assert_equals(event.type, "null");
|
||||
}, "type argument is null");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent(undefined);
|
||||
assert_equals(event.type, "undefined");
|
||||
}, "event type set to undefined");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test");
|
||||
assert_equals(event.propertyName, "");
|
||||
}, "propertyName has default value of empty string");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test");
|
||||
assert_equals(event.elapsedTime, 0.0);
|
||||
}, "elapsedTime has default value of 0.0");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test");
|
||||
assert_readonly(event, "propertyName", "readonly attribute value");
|
||||
}, "propertyName is readonly");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test");
|
||||
assert_readonly(event, "elapsedTime", "readonly attribute value");
|
||||
}, "elapsedTime is readonly");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", null);
|
||||
assert_equals(event.propertyName, "");
|
||||
assert_equals(event.elapsedTime, 0.0);
|
||||
}, "animationEventInit argument is null");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", undefined);
|
||||
assert_equals(event.propertyName, "");
|
||||
assert_equals(event.elapsedTime, 0.0);
|
||||
}, "animationEventInit argument is undefined");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {});
|
||||
assert_equals(event.propertyName, "");
|
||||
assert_equals(event.elapsedTime, 0.0);
|
||||
}, "animationEventInit argument is empty dictionary");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {pseudoElement: "::testPseudo"});
|
||||
assert_equals(event.pseudoElement, "::testPseudo");
|
||||
}, "TransitionEvent.pseudoElement initialized from the dictionary");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {propertyName: "sample"});
|
||||
assert_equals(event.propertyName, "sample");
|
||||
}, "propertyName set to 'sample'");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {propertyName: undefined});
|
||||
assert_equals(event.propertyName, "");
|
||||
}, "propertyName set to undefined");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {propertyName: null});
|
||||
assert_equals(event.propertyName, "null");
|
||||
}, "propertyName set to null");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {propertyName: false});
|
||||
assert_equals(event.propertyName, "false");
|
||||
}, "propertyName set to false");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {propertyName: true});
|
||||
assert_equals(event.propertyName, "true");
|
||||
}, "propertyName set to true");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {propertyName: 0.5});
|
||||
assert_equals(event.propertyName, "0.5");
|
||||
}, "propertyName set to a number");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {propertyName: []});
|
||||
assert_equals(event.propertyName, "");
|
||||
}, "propertyName set to []");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {propertyName: [1, 2, 3]});
|
||||
assert_equals(event.propertyName, "1,2,3");
|
||||
}, "propertyName set to [1, 2, 3]");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {propertyName: {sample: 0.5}});
|
||||
assert_equals(event.propertyName, "[object Object]");
|
||||
}, "propertyName set to an object");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test",
|
||||
{propertyName: {valueOf: function () { return 'sample'; }}});
|
||||
assert_equals(event.propertyName, "[object Object]");
|
||||
}, "propertyName set to an object with a valueOf function");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {elapsedTime: 0.5});
|
||||
assert_equals(event.elapsedTime, 0.5);
|
||||
}, "elapsedTime set to 0.5");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {elapsedTime: -0.5});
|
||||
assert_equals(event.elapsedTime, -0.5);
|
||||
}, "elapsedTime set to -0.5");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {elapsedTime: undefined});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to undefined");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {elapsedTime: null});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to null");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {elapsedTime: false});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to false");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {elapsedTime: true});
|
||||
assert_equals(event.elapsedTime, 1);
|
||||
}, "elapsedTime set to true");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {elapsedTime: ""});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to ''");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {elapsedTime: []});
|
||||
assert_equals(event.elapsedTime, 0);
|
||||
}, "elapsedTime set to []");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent("test", {elapsedTime: [0.5]});
|
||||
assert_equals(event.elapsedTime, 0.5);
|
||||
}, "elapsedTime set to [0.5]");
|
||||
|
||||
test(function() {
|
||||
var event = new TransitionEvent(
|
||||
"test", {elapsedTime: { valueOf: function() { return 0.5; }}});
|
||||
assert_equals(event.elapsedTime, 0.5);
|
||||
}, "elapsedTime set to an object with a valueOf function");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new TransitionEvent("test", {elapsedTime: NaN});
|
||||
}, 'elapsedTime cannot be NaN so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to NaN");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new TransitionEvent("test", {elapsedTime: Infinity});
|
||||
}, 'elapsedTime cannot be Infinity so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to Infinity");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new TransitionEvent("test", {elapsedTime: -Infinity});
|
||||
}, 'elapsedTime cannot be -Infinity so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to -Infinity");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new TransitionEvent("test", {elapsedTime: "sample"});
|
||||
}, 'elapsedTime cannot be a string so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to 'sample'");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new TransitionEvent("test", {elapsedTime: [0.5, 1.0]});
|
||||
}, 'elapsedTime cannot be a multi-element array so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to [0.5, 1.0]");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new TransitionEvent("test", {elapsedTime: { sample: 0.5}});
|
||||
}, 'elapsedTime cannot be an object so was expecting a TypeError');
|
||||
}, "elapsedTime cannot be set to an object");
|
||||
|
||||
test(function() {
|
||||
var eventInit = {propertyName: "sample", elapsedTime: 0.5};
|
||||
var event = new TransitionEvent("test", eventInit);
|
||||
assert_equals(event.propertyName, "sample");
|
||||
assert_equals(event.elapsedTime, 0.5);
|
||||
}, "TransitionEventInit properties set value");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue