Update web-platform-tests to revision 3840f46213d9a991acc9288e3863530f7502c05e

This commit is contained in:
WPT Sync Bot 2019-06-06 12:17:06 +00:00
parent 347d8bdf72
commit 141ba90a6d
58 changed files with 1507 additions and 883 deletions

View file

@ -0,0 +1,19 @@
<!doctype HTML>
<link rel="author" title="Chris Harrelson" href="chrishtr@chromium.org">
<style>
#one, #two {
width: 200px; height: 200px; background: lightblue; position: relative
}
#one {
background: lightblue
}
#two {
background: lightgray;
margin-top: -200px;
}
</style>
<div id=scroller style="overflow: scroll; width: 300px; height: 300px; will-change: transform">
<div id=one></div>
<div id=two></div>
<div id=spacer style="width: 50px; height: 5000px"></div>
</div>

View file

@ -0,0 +1,39 @@
<!doctype HTML>
<link rel="author" title="Chris Harrelson" href="chrishtr@chromium.org">
<link rel="match" href="composite-change-after-scroll-preserves-stacking-order-ref.html">
<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html"/>
<script src="/common/reftest-wait.js"></script>
<script src="/web-animations/testcommon.js"></script>
<style>
#one, #two {
width: 200px; height: 200px; background: lightblue; position: relative
}
#one {
background: lightblue
}
#two {
background: lightgray;
margin-top: -200px;
}
</style>
<html class=reftest-wait>
<div id=scroller style="overflow: scroll; width: 300px; height: 300px; will-change: transform">
<div id=one></div>
<div id=two></div>
<div id=spacer style="width: 50px; height: 5000px"></div>
</div>
</html>
<script>
onload = () => {
waitForAnimationFrames(2).then(() => {
scroller.scrollBy(0, 1000);
waitForAnimationFrames(2).then(() => {
one.style = 'will-change: transform';
waitForAnimationFrames(2).then(() => {
scroller.scrollBy(0, -1000);
takeScreenshot();
});
});
});
};
</script>

View file

@ -11,7 +11,7 @@
width: 100%;
height: 100%;
background: green;
border-radius: 50px;
border-radius: 99px;
}
</style>
<p>Should be a green circle below</p>

View file

@ -40,7 +40,7 @@ container.style.color = currentColor;
assert_not_inherited('background-attachment', 'scroll', 'fixed');
assert_not_inherited('background-clip', 'border-box', 'padding-box');
assert_not_inherited('background-color', transparentColor, 'rgb(42, 53, 64)');
assert_not_inherited('background-image', 'none', 'url("https://example.com/")');
assert_not_inherited('background-image', 'none', 'url("https://{{host}}/")');
assert_not_inherited('background-origin', 'padding-box', 'content-box');
assert_not_inherited('background-position', '0% 0%', '10px 20px');
assert_not_inherited('background-position-x', '0%', '10px');
@ -57,7 +57,7 @@ assert_not_inherited('border-bottom-width', mediumWidth, '10px');
assert_not_inherited('border-image-outset', '0', '1px 2px 3px 4px');
assert_not_inherited('border-image-repeat', 'stretch', 'repeat round');
assert_not_inherited('border-image-slice', '100%', '1% 2% 3% 4% fill');
assert_not_inherited('border-image-source', 'none', 'url("https://example.com/")');
assert_not_inherited('border-image-source', 'none', 'url("https://{{host}}/")');
assert_not_inherited('border-image-width', '1', '1px 2px 3px 4px');
assert_not_inherited('border-left-color', currentColor, 'rgb(42, 53, 64)');

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on select</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-select-001-ref.html">
<meta name=assert content="Check that setting 'contain: size' on a <select> elements causes it to be sized as having no contents.">
<style>
select {
color: white;
background: white;
}
</style>
<p>Test passes if it has the same output than the reference.</p>
<select id="target">
<option>AVeryLongOption</option>
<option>Another Option</option>
</select>
<script>
window.requestAnimationFrame( () => {
target.style.contain = "size";
});
</script>

View file

@ -11,6 +11,7 @@
<meta name="assert" content="Test checks that css properties of grid layout exist.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#container {
width: 800px;
@ -34,6 +35,8 @@
</div>
<script>
setup({explicit_done: true});
document.fonts.ready.then(()=> {
var myDiv = document.getElementById('myDiv')
test(function(){
@ -228,6 +231,8 @@
'reset': ['auto', 'auto'],
},
})
done();
});
</script>
</body>
</html>

View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<head>
<title>CSS Reference: min/max-content size on box-decoration-break:clone inline box with bidi text and white-space:nowrap</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
div {
border: 5px solid blue;
white-space: pre;
}
.max > div {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
span {
border: 2px solid gray;
padding: 0 10px 0 6px;
border-width: 0 8px 0 5px;
margin: 0 4px 0 3px;
background: yellow;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
f { margin-right: 30px; float: left; }
</style>
<body>
<f class="max">
<div><span>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span><span> d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc </span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa<span> d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa</div>
</f>
<f class="max">
<div><span>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span><span> d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc </span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa<span> d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa</div>
</f>

View file

@ -0,0 +1,110 @@
<!DOCTYPE html>
<head>
<title>CSS Test: min/max-content size on box-decoration-break:clone inline box with bidi text and white-space:nowrap</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content">
<link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556709">
<link rel="match" href="clone-nowrap-intrinsic-size-bidi-ref.html">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
div {
border: 5px solid blue;
white-space: nowrap;
}
.max > div {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
.min > div {
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
span {
border: 2px solid gray;
padding: 0 10px 0 6px;
border-width: 0 8px 0 5px;
margin: 0 4px 0 3px;
background: yellow;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
f { margin-right: 30px; float: left; }
</style>
<body>
<f class="max">
<div>
<span>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span><span> d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc </span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa<span> d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa </div>
</f>
<f class="min">
<div>
<span>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span><span> d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc </span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa<span> d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa </div>
</f>

View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<head>
<title>CSS Reference: min/max-content size on box-decoration-break:clone inline box w. white-space:nowrap</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
div {
border: 5px solid blue;
white-space: pre;
}
.max > div {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
span {
border: 2px solid gray;
padding: 0 10px 0 6px;
border-width: 0 8px 0 5px;
margin: 0 4px 0 3px;
background: yellow;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
f { margin-right: 30px; float: left; }
</style>
<body>
<f class="max">
<div><span>aaa</span><span>aaa</span>
</div>
<div><span>aaa</span>aa<span>aaa</span>
</div>
<div><span>aaa</span> <span>aaa</span>
</div>
<div><span>aaa </span><span>aaa</span>
</div>
<div><span>aaa</span><span> aaa</span>
</div>
<div><span>aaa</span> aa<span>aaa</span>
</div>
<div><span>aaa </span>aa<span>aaa</span>
</div>
<div><span>aaa</span>aa<span> aaa</span>
</div>
<div><span>aaa</span> aa <span>aaa</span>
</div>
<div><span>aaa</span>aa <span>aaa</span>
</div>
<div><span>aaa</span>aa</div>
</f>
<f class="max">
<div><span>aaa</span><span>aaa</span>
</div>
<div><span>aaa</span>aa<span>aaa</span>
</div>
<div><span>aaa</span> <span>aaa</span>
</div>
<div><span>aaa </span><span>aaa</span>
</div>
<div><span>aaa</span><span> aaa</span>
</div>
<div><span>aaa</span> aa<span>aaa</span>
</div>
<div><span>aaa </span>aa<span>aaa</span>
</div>
<div><span>aaa</span>aa<span> aaa</span>
</div>
<div><span>aaa</span> aa <span>aaa</span>
</div>
<div><span>aaa</span>aa <span>aaa</span>
</div>
<div><span>aaa</span>aa</div>
</f>

View file

@ -0,0 +1,110 @@
<!DOCTYPE html>
<head>
<title>CSS Test: min/max-content size on box-decoration-break:clone inline box w. white-space:nowrap</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content">
<link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556709">
<link rel="match" href="clone-nowrap-intrinsic-size-ref.html">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
div {
border: 5px solid blue;
white-space: nowrap;
}
.max > div {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
.min > div {
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
span {
border: 2px solid gray;
padding: 0 10px 0 6px;
border-width: 0 8px 0 5px;
margin: 0 4px 0 3px;
background: yellow;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
f { margin-right: 30px; float: left; }
</style>
<body>
<f class="max">
<div>
<span>aaa</span><span>aaa</span>
</div>
<div>
<span>aaa</span>aa<span>aaa</span>
</div>
<div>
<span>aaa</span> <span>aaa</span>
</div>
<div>
<span>aaa </span><span>aaa</span>
</div>
<div>
<span>aaa</span><span> aaa</span>
</div>
<div>
<span>aaa</span> aa<span>aaa</span>
</div>
<div>
<span>aaa </span>aa<span>aaa</span>
</div>
<div>
<span>aaa</span>aa<span> aaa</span>
</div>
<div>
<span>aaa</span> aa <span>aaa</span>
</div>
<div>
<span>aaa</span>aa <span>aaa</span>
</div>
<div>
<span>aaa</span>aa </div>
</f>
<f class="min">
<div>
<span>aaa</span><span>aaa</span>
</div>
<div>
<span>aaa</span>aa<span>aaa</span>
</div>
<div>
<span>aaa</span> <span>aaa</span>
</div>
<div>
<span>aaa </span><span>aaa</span>
</div>
<div>
<span>aaa</span><span> aaa</span>
</div>
<div>
<span>aaa</span> aa<span>aaa</span>
</div>
<div>
<span>aaa </span>aa<span>aaa</span>
</div>
<div>
<span>aaa</span>aa<span> aaa</span>
</div>
<div>
<span>aaa</span> aa <span>aaa</span>
</div>
<div>
<span>aaa</span>aa <span>aaa</span>
</div>
<div>
<span>aaa</span>aa </div>
</f>

View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<head>
<title>CSS Reference: min/max-content size on box-decoration-break:slice inline box with bidi text and white-space:nowrap</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
div {
border: 5px solid blue;
white-space: pre;
}
.max > div {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
span {
border: 2px solid gray;
padding: 0 10px 0 6px;
border-width: 0 8px 0 5px;
margin: 0 4px 0 3px;
background: yellow;
}
f { margin-right: 30px; float: left; }
.l { margin-right:0; border-right-width:0; padding-right:0 }
.r { margin-left:0; border-left-width:0; padding-left:0 }
</style>
<body>
<f class="max">
<div><span>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span><span> d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc </span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa<span> d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa</div>
</f>
<f class="max">
<div><span>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span><span> d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc </span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa<span> d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span> aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div><span>&#x202e;a&#x202d;bc</span>aa</div>
</f>

View file

@ -0,0 +1,108 @@
<!DOCTYPE html>
<head>
<title>CSS Test: min/max-content size on box-decoration-break:slice inline box with bidi text and white-space:nowrap</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content">
<link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556709">
<link rel="match" href="slice-nowrap-intrinsic-size-bidi-ref.html">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
div {
border: 5px solid blue;
white-space: nowrap;
}
.max > div {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
.min > div {
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
span {
border: 2px solid gray;
padding: 0 10px 0 6px;
border-width: 0 8px 0 5px;
margin: 0 4px 0 3px;
background: yellow;
}
f { margin-right: 30px; float: left; }
</style>
<body>
<f class="max">
<div>
<span>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span><span> d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc </span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa<span> d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa </div>
</f>
<f class="min">
<div>
<span>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span><span> d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc </span>aa<span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa<span> d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span> aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa <span>d&#x202e;e&#x202d;f</span>
</div>
<div>
<span>&#x202e;a&#x202d;bc</span>aa </div>
</f>

View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<head>
<title>CSS Reference: min/max-content size on box-decoration-break:slice inline box w. white-space:nowrap</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
div {
border: 5px solid blue;
white-space: pre;
}
.max > div {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
span {
border: 2px solid gray;
padding: 0 10px 0 6px;
border-width: 0 8px 0 5px;
margin: 0 4px 0 3px;
background: yellow;
}
f { margin-right: 30px; float: left; }
</style>
<body>
<f class="max">
<div><span>aaa</span><span>aaa</span></div>
<div><span>aaa</span>aa<span>aaa</span></div>
<div><span>aaa</span> <span>aaa</span></div>
<div><span>aaa </span><span>aaa</span></div>
<div><span>aaa</span><span> aaa</span></div>
<div><span>aaa</span> aa<span>aaa</span></div>
<div><span>aaa </span>aa<span>aaa</span></div>
<div><span>aaa</span>aa<span> aaa</span></div>
<div><span>aaa</span> aa <span>aaa</span></div>
<div><span>aaa</span>aa <span>aaa</span></div>
<div><span>aaa</span>aa</div>
</f>
<f class="max">
<div><span>aaa</span><span>aaa</span></div>
<div><span>aaa</span>aa<span>aaa</span></div>
<div><span>aaa</span> <span>aaa</span></div>
<div><span>aaa </span><span>aaa</span></div>
<div><span>aaa</span><span> aaa</span></div>
<div><span>aaa</span> aa<span>aaa</span></div>
<div><span>aaa </span>aa<span>aaa</span></div>
<div><span>aaa</span>aa<span> aaa</span></div>
<div><span>aaa</span> aa <span>aaa</span></div>
<div><span>aaa</span>aa <span>aaa</span></div>
<div><span>aaa</span>aa</div>
</f>

View file

@ -0,0 +1,111 @@
<!DOCTYPE html>
<head>
<title>CSS Test: min/max-content size on box-decoration-break:slice inline box w. white-space:nowrap</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content">
<link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556709">
<link rel="match" href="slice-nowrap-intrinsic-size-ref.html">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
div {
border: 5px solid blue;
white-space: nowrap;
}
.max > div {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
.min > div {
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
span {
border: 2px solid gray;
padding: 0 10px 0 6px;
border-width: 0 8px 0 5px;
margin: 0 4px 0 3px;
background: yellow;
/* for clarity: */
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
f { margin-right: 30px; float: left; }
</style>
<body>
<f class="max">
<div>
<span>aaa</span><span>aaa</span>
</div>
<div>
<span>aaa</span>aa<span>aaa</span>
</div>
<div>
<span>aaa</span> <span>aaa</span>
</div>
<div>
<span>aaa </span><span>aaa</span>
</div>
<div>
<span>aaa</span><span> aaa</span>
</div>
<div>
<span>aaa</span> aa<span>aaa</span>
</div>
<div>
<span>aaa </span>aa<span>aaa</span>
</div>
<div>
<span>aaa</span>aa<span> aaa</span>
</div>
<div>
<span>aaa</span> aa <span>aaa</span>
</div>
<div>
<span>aaa</span>aa <span>aaa</span>
</div>
<div>
<span>aaa</span>aa </div>
</f>
<f class="min">
<div>
<span>aaa</span><span>aaa</span>
</div>
<div>
<span>aaa</span>aa<span>aaa</span>
</div>
<div>
<span>aaa</span> <span>aaa</span>
</div>
<div>
<span>aaa </span><span>aaa</span>
</div>
<div>
<span>aaa</span><span> aaa</span>
</div>
<div>
<span>aaa</span> aa<span>aaa</span>
</div>
<div>
<span>aaa </span>aa<span>aaa</span>
</div>
<div>
<span>aaa</span>aa<span> aaa</span>
</div>
<div>
<span>aaa</span> aa <span>aaa</span>
</div>
<div>
<span>aaa</span>aa <span>aaa</span>
</div>
<div>
<span>aaa</span>aa </div>
</f>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-underline-offset computed values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-offset">
<meta name="assert" content="text-underline-offset computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("text-underline-offset", "auto");
test_computed_value("text-underline-offset", "from-font");
test_computed_value("text-underline-offset", "calc(10px - 8px)", "2px");
</script>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" title="2.4 Text Underline Offset: the 'text-underline-offset' property"
href="https://drafts.csswg.org/css-text-decor-4/#underline-offset" />
</head>
<body>
<script>
test(function() {
assert_equals(getComputedStyle(document.body)["text-underline-offset"], "auto", "Must be set to value auto as initial value.");
}, "Initial value of text-underline-offset");
</script>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-underline-offset with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-offset">
<meta name="assert" content="text-underline-offset supports the following values: auto | from-font| <length>">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("text-underline-offset", "otto");
test_invalid_value("text-underline-offset", "asdlflj");
test_invalid_value("text-underline-offset", "-10");
test_invalid_value("text-underline-offset", "60002020");
test_invalid_value("text-underline-offset", "!@#$%^&");
test_invalid_value("text-underline-offset", "10e2");
test_invalid_value("text-underline-offset", "from font");
test_invalid_value("text-underline-offset", "10%");
test_invalid_value("text-underline-offset", "-27%");
test_invalid_value("text-underline-offset", "calc(40% - 20px)");
test_invalid_value("text-underline-offset", "calc(100% - 40em)");
</script>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-underline-offset with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-offset">
<meta name="assert" content="text-underline-offset supports the following values: auto | from-font| <length>">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("text-underline-offset", "auto");
test_valid_value("text-underline-offset", "from-font");
test_valid_value("text-underline-offset", "-10px");
test_valid_value("text-underline-offset", "2001em");
test_valid_value("text-underline-offset", "-49em");
test_valid_value("text-underline-offset", "53px");
test_valid_value("text-underline-offset", "calc(40em - 10px)");
test_valid_value("text-underline-offset", "calc(-13em + 50px)");
</script>
</body>
</html>

View file

@ -15,6 +15,7 @@
-->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#parent {
position: absolute;
@ -27,9 +28,13 @@
</style>
<div id=parent>&nbsp;&nbsp;<span id=target>&nbsp;&nbsp;</span></div>
<script>
test(
function() {
var e = document.elementFromPoint(125,25);
assert_equals(e.id,"target", "the element targeted by a hit on the ellipsis is the elided inline.");
}, "Checks hit testing on the ellipsis");
setup({explicit_done: true});
document.fonts.ready.then(()=> {
test(
function() {
var e = document.elementFromPoint(125,25);
assert_equals(e.id,"target", "the element targeted by a hit on the ellipsis is the elided inline.");
}, "Checks hit testing on the ellipsis");
done();
});
</script>