mirror of
https://github.com/servo/servo.git
synced 2025-09-10 06:58:21 +01:00
Update web-platform-tests to revision e1942ace5be3a3962f204e630e9969acd70e3952
This commit is contained in:
WPT Sync Bot
parent
e6cf68704e
commit
69d6c85949
108 changed files with 3217 additions and 530 deletions
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations: getComputedValue().animationTimingFunction</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-timing-function">
|
||||
<meta name="assert" content="animation-timing-function computed value is a computed <easing-function> list.">
|
||||
<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("animation-timing-function", "linear");
|
||||
|
||||
test_computed_value("animation-timing-function", "ease");
|
||||
test_computed_value("animation-timing-function", "ease-in");
|
||||
test_computed_value("animation-timing-function", "ease-out");
|
||||
test_computed_value("animation-timing-function", "ease-in-out");
|
||||
test_computed_value("animation-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)");
|
||||
test_computed_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3)");
|
||||
test_computed_value("animation-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
|
||||
|
||||
|
||||
test_computed_value("animation-timing-function", "steps(4, start)");
|
||||
test_computed_value("animation-timing-function", "steps(2, end)", "steps(2)");
|
||||
test_computed_value("animation-timing-function", "steps(2, jump-start)");
|
||||
test_computed_value("animation-timing-function", "steps(2, jump-end)", "steps(2)");
|
||||
test_computed_value("animation-timing-function", "steps(2, jump-both)");
|
||||
test_computed_value("animation-timing-function", "steps(2, jump-none)");
|
||||
|
||||
test_computed_value("animation-timing-function", "linear, ease, linear");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations: getComputedValue().transitionTimingFunction</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function">
|
||||
<meta name="assert" content="transition-timing-function computed value is a computed <easing-function> list.">
|
||||
<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("transition-timing-function", "linear");
|
||||
|
||||
test_computed_value("transition-timing-function", "ease");
|
||||
test_computed_value("transition-timing-function", "ease-in");
|
||||
test_computed_value("transition-timing-function", "ease-out");
|
||||
test_computed_value("transition-timing-function", "ease-in-out");
|
||||
test_computed_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)");
|
||||
test_computed_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)");
|
||||
test_computed_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
|
||||
|
||||
|
||||
test_computed_value("transition-timing-function", "steps(4, start)");
|
||||
test_computed_value("transition-timing-function", "steps(2, end)", "steps(2)");
|
||||
test_computed_value("transition-timing-function", "steps(2, jump-start)");
|
||||
test_computed_value("transition-timing-function", "steps(2, jump-end)", "steps(2)");
|
||||
test_computed_value("transition-timing-function", "steps(2, jump-both)");
|
||||
test_computed_value("transition-timing-function", "steps(2, jump-none)");
|
||||
|
||||
test_computed_value("transition-timing-function", "linear, ease, linear");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: getComputedValue().borderColor</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color">
|
||||
<meta name="assert" content="border-color computed value is the computed colors.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
color: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
const currentColor = "rgb(0, 255, 0)";
|
||||
const red = "rgb(255, 0, 0)";
|
||||
const yellow = "rgb(255, 255, 0)";
|
||||
const green = "rgb(0, 128, 0)";
|
||||
const blue = "rgb(0, 0, 255)";
|
||||
|
||||
test_computed_value("border-color", "currentcolor", currentColor);
|
||||
test_computed_value("border-color", "red yellow", red + " " + yellow);
|
||||
test_computed_value("border-color", "red yellow currentcolor", red + " " + yellow + " " + currentColor);
|
||||
test_computed_value("border-color", "red yellow green blue", red + " " + yellow + " " + green + " " + blue);
|
||||
|
||||
test_computed_value("border-top-color", "red", red);
|
||||
test_computed_value("border-right-color", "yellow", yellow);
|
||||
test_computed_value("border-bottom-color", "green", green);
|
||||
test_computed_value("border-left-color", "blue", blue);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: getComputedValue().borderImageOutset</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-outset">
|
||||
<meta name="assert" content="border-image-outset computed value is four values, each a number or absolute length.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("border-image-outset", "1px");
|
||||
test_computed_value("border-image-outset", "1px 2");
|
||||
test_computed_value("border-image-outset", "1px 2 3px");
|
||||
test_computed_value("border-image-outset", "1px 2 3px 4");
|
||||
test_computed_value("border-image-outset", "0 calc(0.5em + 10px) 3 calc(-0.5em + 10px)", "0 30px 3 0px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: getComputedValue().borderImageRepeat</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-repeat">
|
||||
<meta name="assert" content="border-image-repeat computed value is specified keywords.">
|
||||
<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("border-image-repeat", "round");
|
||||
test_computed_value("border-image-repeat", "stretch repeat");
|
||||
test_computed_value("border-image-repeat", "round space");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: getComputedValue().borderImageSlice</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-slice">
|
||||
<meta name="assert" content="border-image-slice computed value is four values, each either a number or percentage; plus a fill keyword if 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("border-image-slice", "1");
|
||||
test_computed_value("border-image-slice", "1 2%");
|
||||
test_computed_value("border-image-slice", "1 2% 3");
|
||||
test_computed_value("border-image-slice", "1 2% 3 4%");
|
||||
|
||||
test_computed_value("border-image-slice", "1% 2 3% 4 fill");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: getComputedValue().borderImageSource</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-source">
|
||||
<meta name="assert" content="border-image-source computed value is the keyword none or the specified image with URIs made absolute.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("border-image-source", "none");
|
||||
test_computed_value("border-image-source", 'url("http://www.example.com/")');
|
||||
|
||||
test(() => {
|
||||
const target = document.getElementById('target');
|
||||
target.style['border-image-source'] = 'url("a.b#c")';
|
||||
const result = getComputedStyle(target)['border-image-source'];
|
||||
const resolved = new URL("a.b#c", document.URL).href;
|
||||
assert_equals(result, 'url("' + resolved + '")');
|
||||
}, 'url values are made absolute');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: getComputedValue().borderImageWidth</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width">
|
||||
<meta name="assert" content="border-image-width computed value is four values, each either a number, the keyword auto, or a computed length-percentage value.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("border-image-width", "1");
|
||||
test_computed_value("border-image-width", "auto");
|
||||
test_computed_value("border-image-width", "10px");
|
||||
test_computed_value("border-image-width", "20%");
|
||||
test_computed_value("border-image-width", "calc(20% + 10px)");
|
||||
test_computed_value("border-image-width", "calc(-0.5em + 10px)", "0px");
|
||||
test_computed_value("border-image-width", "calc(0.5em + 10px)", "30px");
|
||||
test_computed_value("border-image-width", "1 auto");
|
||||
test_computed_value("border-image-width", "1 auto 10px");
|
||||
test_computed_value("border-image-width", "1 auto 10px 20%");
|
||||
test_computed_value("border-image-width", "20% 10px auto 1");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: getComputedValue().borderStyle</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style">
|
||||
<meta name="assert" content="border-style computed value is the specified keywords.">
|
||||
<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("border-style", "none");
|
||||
test_computed_value("border-style", "inset outset");
|
||||
test_computed_value("border-style", "hidden dotted dashed");
|
||||
test_computed_value("border-style", "solid double groove ridge");
|
||||
|
||||
test_computed_value("border-top-style", "solid");
|
||||
test_computed_value("border-right-style", "double");
|
||||
test_computed_value("border-bottom-style", "groove");
|
||||
test_computed_value("border-left-style", "ridge");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: getComputedValue().borderWidth</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width">
|
||||
<meta name="assert" content="border-width computed value is the absolute length; zero if the border style is none or hidden.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#box {
|
||||
border-style: dotted; /* Avoid border-*-width computed style 0 */
|
||||
border-top-width: thin;
|
||||
border-right-width: medium;
|
||||
border-bottom-width: thick;
|
||||
}
|
||||
#target {
|
||||
border-style: dotted; /* Avoid border-*-width computed style 0 */
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="box"></div>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
const box = document.getElementById('box');
|
||||
const thinWidth = getComputedStyle(box).borderTopWidth;
|
||||
const mediumWidth = getComputedStyle(box).borderRightWidth;
|
||||
const thickWidth = getComputedStyle(box).borderBottomWidth;
|
||||
|
||||
test_computed_value("border-width", "1px");
|
||||
test_computed_value("border-width", "1px 2px");
|
||||
test_computed_value("border-width", "1px 2px 3px");
|
||||
test_computed_value("border-width", "1px 2px 3px 4px");
|
||||
|
||||
test_computed_value("border-width", "0.5em", "20px");
|
||||
test_computed_value("border-width", "2px thin medium thick", "2px " + thinWidth + " " + mediumWidth + " " + thickWidth);
|
||||
|
||||
test_computed_value("border-top-width", "0px");
|
||||
test_computed_value("border-right-width", "10px");
|
||||
test_computed_value("border-bottom-width", "calc(-0.5em + 10px)", "0px");
|
||||
test_computed_value("border-left-width", "calc(0.5em + 10px)", "30px");
|
||||
|
||||
test(() => {
|
||||
const thin = Number(thinWidth.replace("px", ""));
|
||||
const medium = Number(mediumWidth.replace("px", ""));
|
||||
const thick = Number(thickWidth.replace("px", ""));
|
||||
assert_less_than_equal(0, thin);
|
||||
assert_less_than_equal(thin, medium);
|
||||
assert_less_than_equal(medium, thick);
|
||||
}, "thin ≤ medium ≤ thick");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Size containment on fieldset</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-fieldset-002-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>
|
||||
#border {
|
||||
border: 1px solid black;
|
||||
width: min-content;
|
||||
}
|
||||
fieldset {
|
||||
contain: size;
|
||||
visibility: hidden;
|
||||
height: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You should see a black border box below.</p>
|
||||
<div id="border">
|
||||
<fieldset>
|
||||
<legend>legend</legend>
|
||||
Fieldset contents are here.
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
#border {
|
||||
border: 1px solid black;
|
||||
width: min-content;
|
||||
}
|
||||
fieldset {
|
||||
visibility: hidden;
|
||||
height: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You should see a black border box below.</p>
|
||||
<div id="border">
|
||||
<fieldset></fieldset>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<title>Tests that we consider main axis sizes to be definite in column flexboxes
|
||||
when the height is an explicit definite height, even if the container does
|
||||
not have a definite main axis size.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<style>
|
||||
/* Make it possible for red to appear in webkit/blink browsers. But the test
|
||||
* still works in other browsers, you'll just get a grey scrollbar that
|
||||
* shouldn't be there.
|
||||
*/
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#item {
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
scrollbar-color: red;
|
||||
}
|
||||
|
||||
#child {
|
||||
height: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background: green;"></div>
|
||||
|
||||
<div id="flex">
|
||||
<div id="item">
|
||||
<div id="child">
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var item = document.getElementById('item');
|
||||
item.offsetHeight;
|
||||
item.style.width = 0;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Font Loading test: Load Document FontFaceSet font without documentElement</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-font-loading/#font-face-set-load">
|
||||
<link rel="help" href="https://crbug.com/971035">
|
||||
<script>
|
||||
test(() => {
|
||||
document.documentElement.remove();
|
||||
var face = new FontFace("Ahem", "url(/fonts/Ahem.ttf)");
|
||||
document.fonts.add(face);
|
||||
document.fonts.load("12px Ahem");
|
||||
}, "Trigger font load after removing documentElement. Should not crash.");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: Test a bidi-override multi-column container with a dir=rtl column-span:all child</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 1;
|
||||
column-rule: 6px solid;
|
||||
width: 400px;
|
||||
outline: 1px solid black;
|
||||
}
|
||||
h3 {
|
||||
/* "column-count: 1" makes this behave like a real spanner. */
|
||||
outline: 1px solid blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<div>before</div><h3 dir="rtl">spanner</h3><div>after</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test a bidi-override multi-column container with a dir=rtl column-span:all child</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="match" href="multicol-span-all-011-ref.html">
|
||||
<meta name="assert" content="This test checks that the text is correctly split by 'dir=rtl' column-span:all child in a bidi-override multi-column container.">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 2;
|
||||
column-rule: 6px solid;
|
||||
width: 400px;
|
||||
outline: 1px solid black;
|
||||
unicode-bidi: bidi-override; /* Needed to trigger bidi resolution. */
|
||||
}
|
||||
h3 {
|
||||
column-span: all;
|
||||
outline: 1px solid blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<div>before<h3 dir="rtl">spanner</h3>after</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#def-cb">
|
||||
<link rel="help" href="https://crbug.com/970171">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.narrow {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
.wide {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
background: green;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -25px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container" class="narrow">
|
||||
<button id="target"></button>
|
||||
</div>
|
||||
<script>
|
||||
test( t => {
|
||||
let container = document.querySelector("#container");
|
||||
let target = document.querySelector("#target");
|
||||
document.body.offsetTop;
|
||||
// start off narrow
|
||||
let narrow_left = target.offsetLeft;
|
||||
let narrow_top = target.offsetTop;
|
||||
// make it wide
|
||||
container.classList.toggle("narrow");
|
||||
container.classList.toggle("wide");
|
||||
document.body.offsetTop;
|
||||
// make it narrow again
|
||||
container.classList.toggle("narrow");
|
||||
container.classList.toggle("wide");
|
||||
document.body.offsetTop;
|
||||
assert_equals(target.offsetLeft, narrow_left);
|
||||
assert_equals(target.offsetTop, narrow_top);
|
||||
}, "absolute positioned button with percentage top gets positioned");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().hyphens</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-hyphens">
|
||||
<meta name="assert" content="hyphens computed value is specified keyword.">
|
||||
<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("hyphens", "none");
|
||||
test_computed_value("hyphens", "manual");
|
||||
test_computed_value("hyphens", "auto");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().letterSpacing</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-letter-spacing">
|
||||
<meta name="assert" content="letter-spacing computed value is an absolute length.">
|
||||
<meta name="assert" content="'normal' computes to zero.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("letter-spacing", "normal", "0px");
|
||||
|
||||
test_computed_value("letter-spacing", "10px");
|
||||
test_computed_value("letter-spacing", "-20px");
|
||||
test_computed_value("letter-spacing", "calc(10px - 0.5em)", "-10px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().lineBreak</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
<meta name="assert" content="line-break computed value is specified keyword.">
|
||||
<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("line-break", "auto");
|
||||
test_computed_value("line-break", "loose");
|
||||
test_computed_value("line-break", "normal");
|
||||
test_computed_value("line-break", "strict");
|
||||
test_computed_value("line-break", "anywhere");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().overflowWrap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">
|
||||
<meta name="assert" content="overflow-wrap computed value is specified keyword.">
|
||||
<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("overflow-wrap", "normal");
|
||||
test_computed_value("overflow-wrap", "break-word");
|
||||
test_computed_value("overflow-wrap", "anywhere");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().tabSize</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-tab-size">
|
||||
<meta name="assert" content="tab-size computed value is the specified number or an absolute length.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("tab-size", "0");
|
||||
test_computed_value("tab-size", "16");
|
||||
test_computed_value("tab-size", "4");
|
||||
test_computed_value("tab-size", "2.5");
|
||||
|
||||
test_computed_value("tab-size", "0px");
|
||||
test_computed_value("tab-size", "10px");
|
||||
test_computed_value("tab-size", "calc(10px + 0.5em)", "30px");
|
||||
test_computed_value("tab-size", "calc(10px - 0.5em)", "0px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().textAlignLast</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-align-last">
|
||||
<meta name="assert" content="text-align-last computed value is specified keyword.">
|
||||
<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-align-last", "auto");
|
||||
test_computed_value("text-align-last", "start");
|
||||
test_computed_value("text-align-last", "end");
|
||||
test_computed_value("text-align-last", "left");
|
||||
test_computed_value("text-align-last", "right");
|
||||
test_computed_value("text-align-last", "center");
|
||||
test_computed_value("text-align-last", "justify");
|
||||
test_computed_value("text-align-last", "match-parent");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().textIndent</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-indent">
|
||||
<meta name="assert" content="text-indent computed value is computed <length-percentage> value, plus any specified keywords.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("text-indent", "10px");
|
||||
test_computed_value("text-indent", "20%");
|
||||
test_computed_value("text-indent", "calc(50% + 60px)");
|
||||
test_computed_value("text-indent", "-30px");
|
||||
test_computed_value("text-indent", "-40%");
|
||||
test_computed_value("text-indent", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
test_computed_value("text-indent", "10px hanging");
|
||||
test_computed_value("text-indent", "20% each-line");
|
||||
test_computed_value("text-indent", "calc(50% + 60px) hanging each-line");
|
||||
test_computed_value("text-indent", "each-line hanging calc(10px + 0.5em)", "30px hanging each-line");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().textJustify</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-justify">
|
||||
<meta name="assert" content="text-justify computed value is specified keyword.">
|
||||
<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-justify", "auto");
|
||||
test_computed_value("text-justify", "none");
|
||||
test_computed_value("text-justify", "inter-word");
|
||||
test_computed_value("text-justify", "inter-character");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().textTransform</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-transform">
|
||||
<meta name="assert" content="text-transform computed value is specified keywords.">
|
||||
<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-transform", "none");
|
||||
|
||||
test_computed_value("text-transform", "capitalize");
|
||||
test_computed_value("text-transform", "uppercase");
|
||||
test_computed_value("text-transform", "lowercase");
|
||||
test_computed_value("text-transform", "full-width");
|
||||
test_computed_value("text-transform", "full-size-kana");
|
||||
|
||||
test_computed_value("text-transform", "capitalize full-width");
|
||||
test_computed_value("text-transform", "full-width full-size-kana");
|
||||
|
||||
test_computed_value("text-transform", "uppercase full-width full-size-kana");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().whiteSpace</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">
|
||||
<meta name="assert" content="white-space computed value is specified keyword.">
|
||||
<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("white-space", "normal");
|
||||
test_computed_value("white-space", "pre");
|
||||
test_computed_value("white-space", "nowrap");
|
||||
test_computed_value("white-space", "pre-wrap");
|
||||
test_computed_value("white-space", "break-spaces");
|
||||
test_computed_value("white-space", "pre-line");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().wordBreak</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-break">
|
||||
<meta name="assert" content="word-break computed value is specified keyword.">
|
||||
<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("word-break", "normal");
|
||||
test_computed_value("word-break", "keep-all");
|
||||
test_computed_value("word-break", "break-all");
|
||||
test_computed_value("word-break", "break-word");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().wordSpacing</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-spacing">
|
||||
<meta name="assert" content="word-spacing computed value is an absolute length.">
|
||||
<meta name="assert" content="'normal' computes to zero.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("word-spacing", "normal", "0px");
|
||||
|
||||
test_computed_value("word-spacing", "10px");
|
||||
test_computed_value("word-spacing", "-20px");
|
||||
test_computed_value("word-spacing", "calc(10px - 0.5em)", "-10px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedValue().wordWrap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-wrap">
|
||||
<meta name="assert" content="word-wrap computed value is specified keyword.">
|
||||
<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("word-wrap", "normal");
|
||||
test_computed_value("word-wrap", "break-word");
|
||||
test_computed_value("word-wrap", "anywhere");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Test float + nbsp + break-word does not freeze</title>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=972421">
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
font-size: 10px;
|
||||
width: 10ch;
|
||||
border: 2px solid blue;
|
||||
}
|
||||
float {
|
||||
float: left;
|
||||
}
|
||||
.nowrap > div {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.break-word {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<section>
|
||||
<div>123456<float></float>654321</div>
|
||||
<div>123456<float></float> 654321</div>
|
||||
</section>
|
||||
<section class="nowrap">
|
||||
<div>123456<float></float>654321</div>
|
||||
<div>123456<float></float> 654321</div>
|
||||
</section>
|
||||
<section class="break-word">
|
||||
<div>123456<float></float>654321</div>
|
||||
<div>123456<float></float> 654321</div>
|
||||
</section>
|
||||
<script>test(() => {
|
||||
document.body.offsetTop; // layout should not freeze.
|
||||
});</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue