Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-10-04 02:29:12 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 50ff4f970fd8592a9f436d4e86e7d572de143260

Browse source
This commit is contained in:
WPT Sync Bot 2018-09-20 21:31:18 -04:00
parent 82bbf3ad45
commit 8ea5658199
150 changed files with 4737 additions and 998 deletions
Download patch file Download diff file Expand all files Collapse all files

33
tests/wpt/web-platform-tests/css/css-align/inheritance.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Box Alignment properties</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<style>
#container {
justify-items: legacy center;
}
</style>
<script>
assert_not_inherited('align-content', 'normal', 'last baseline');
assert_not_inherited('align-items', 'normal', 'last baseline');
assert_not_inherited('align-self', 'auto', 'last baseline');
assert_not_inherited('column-gap', 'normal', '10px');
assert_not_inherited('justify-content', 'normal', 'space-evenly');
assert_not_inherited('justify-items', 'legacy center', 'last baseline');
assert_not_inherited('justify-self', 'auto', 'last baseline');
assert_not_inherited('row-gap', 'normal', '10px');
</script>
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-break/inheritance.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Fragmentation properties</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('box-decoration-break', 'slice', 'clone');
assert_not_inherited('break-after', 'auto', 'column');
assert_not_inherited('break-before', 'auto', 'page');
assert_not_inherited('break-inside', 'auto', 'avoid');
assert_inherited('orphans', '2', '3');
assert_inherited('widows', '2', '3');
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-contain/inheritance.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS contain property</title>
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
<meta name="assert" content="Property 'contain' does not inherit.">
<meta name="assert" content="Property 'contain' has initial value 'none'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('contain', 'none', 'paint');
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-display/inheritance.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS display property</title>
<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties">
<meta name="assert" content="Property 'display' does not inherit.">
<meta name="assert" content="Property 'display' has initial value 'inline'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('display', 'inline', 'table');
</script>
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-grid/inheritance.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Grid Layout properties</title>
<link rel="help" href="https://drafts.csswg.org/css-grid/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('grid-auto-columns', 'auto', '10px');
assert_not_inherited('grid-auto-flow', 'row', 'column dense');
assert_not_inherited('grid-auto-rows', 'auto', '10px');
assert_not_inherited('grid-column-end', 'auto', 'span 2');
assert_not_inherited('grid-column-start', 'auto', 'span 2');
assert_not_inherited('grid-row-end', 'auto', 'span 2');
assert_not_inherited('grid-row-start', 'auto', 'span 2');
assert_not_inherited('grid-template-areas', 'none', '"one two" "three four"');
assert_not_inherited('grid-template-columns', 'none', '10px');
assert_not_inherited('grid-template-rows', 'none', '10px');
</script>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-percentage-quirks-mode.https.html Normal file
View file

@ -0,0 +1,38 @@
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
height: 100px;
}
.test {
background: red;
--expected-block-size: 50; /* In quirks mode we should get 100px * 50% */
width: 100px;
height: 50%;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="container">
<div class="test">
<div class="child"></div>
</div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

25
tests/wpt/web-platform-tests/css/css-lists/inheritance.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Lists properties</title>
<link rel="help" href="https://drafts.csswg.org/css-lists/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('counter-increment', 'none', 'foo 123');
assert_not_inherited('counter-reset', 'none', 'foo 123');
assert_inherited('list-style-image', 'none', 'url("https://example.com/")');
assert_inherited('list-style-position', 'outside', 'inside');
assert_inherited('list-style-type', 'disc', 'square');
</script>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-masking/inheritance.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Masking properties</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('clip', 'auto', 'rect(10px, 20px, 30px, 40px)');
assert_not_inherited('clip-path', 'none', 'url("https://example.com/")');
assert_inherited('clip-rule', 'nonzero', 'evenodd');
assert_not_inherited('mask-border-mode', 'alpha', 'luminance');
assert_not_inherited('mask-border-outset', '0', '10px 20px 30px 40px');
assert_not_inherited('mask-border-repeat', 'stretch', 'round space');
assert_not_inherited('mask-border-slice', '0', '1 2 3 4 fill');
assert_not_inherited('mask-border-source', 'none', 'url("https://example.com/")');
assert_not_inherited('mask-border-width', 'auto', '10px 20px 30px 40px');
assert_not_inherited('mask-clip', 'border-box', 'no-clip');
assert_not_inherited('mask-composite', 'add', 'exclude');
assert_not_inherited('mask-image', 'none', 'url("https://example.com/")');
assert_not_inherited('mask-mode', 'match-source', 'luminance');
assert_not_inherited('mask-origin', 'border-box', 'padding-box');
assert_not_inherited('mask-position', '0% 0%', '10px 20px');
assert_not_inherited('mask-repeat', 'repeat', 'space round');
assert_not_inherited('mask-size', 'auto', '10px 20px');
assert_not_inherited('mask-type', 'luminance', 'alpha');
</script>
</body>
</html>

12
tests/wpt/web-platform-tests/css/css-overflow/overflow-shorthand-001.html
View file

@ -8,15 +8,15 @@
<div id="test-div"></div>
<script>
let div = document.getElementById("test-div");
function testOverflowShorthand(y, x) {
function testOverflowShorthand(x, y) {
test(function() {
div.style.overflowX = x;
div.style.overflowY = y;
let expectedX = getComputedStyle(div).overflowX;
let expectedY = getComputedStyle(div).overflowY;
let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedY} ${expectedX}`;
let expectedSpecifiedSerialization = x == y ? x : `${y} ${x}`;
let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedX} ${expectedY}`;
let expectedSpecifiedSerialization = x == y ? x : `${x} ${y}`;
assert_equals(div.style.overflow, expectedSpecifiedSerialization);
assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization);
@ -25,18 +25,18 @@ function testOverflowShorthand(y, x) {
div.style.overflowY = "";
assert_equals(div.style.overflow, "");
div.style.overflow = `${y} ${x}`;
div.style.overflow = `${x} ${y}`;
assert_equals(div.style.overflow, expectedSpecifiedSerialization);
assert_equals(div.style.overflowX, x);
assert_equals(div.style.overflowY, y);
assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization);
assert_equals(getComputedStyle(div).overflowX, expectedX);
assert_equals(getComputedStyle(div).overflowY, expectedY);
}, `overflow: ${y} ${x} works`);
}, `overflow: ${x} ${y} works`);
}
let OVERFLOW_VALUES = [ "auto", "hidden", "scroll", "visible" ];
for (let x of OVERFLOW_VALUES)
for (let y of OVERFLOW_VALUES)
testOverflowShorthand(y, x);
testOverflowShorthand(x, y);
</script>

13
tests/wpt/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html
View file

@ -44,4 +44,17 @@ test(function() {
assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-2'), '90px');
assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-3'), '6px');
}, "Registered properties are correctly inherited (or not) depending on the inherits flag.");
test(function(){
CSS.registerProperty({name: '--initial-length-1', syntax: '<length>', initialValue: '0px', inherits: false});
outer.style = '--initial-length-1: notalength';
inner.style = '--initial-length-1: inherit';
assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-1'), '0px');
}, "Explicitly inheriting from a parent with an invalid value results in initial value.");
test(function(){
CSS.registerProperty({name: '--initial-length-2', syntax: '<length>', initialValue: '0px', inherits: false});
inner.style = '--initial-length-2: inherit';
assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-2'), '0px');
}, "Explicitly inheriting from a parent with no value results in initial value.");
</script>

22
tests/wpt/web-platform-tests/css/css-ruby/inheritance.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Ruby Layout properties</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#property-index">
<meta name="assert" content="Properties inherit according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_inherited('ruby-align', 'space-around', 'center');
assert_inherited('ruby-position', 'over', 'under');
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-ruby/parsing/ruby-align-invalid.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Ruby Layout: parsing ruby-align with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
<meta name="assert" content="ruby-align supports only the grammar 'start | center | space-between | space-around'.">
<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("ruby-align", "auto");
test_invalid_value("ruby-align", "left");
test_invalid_value("ruby-align", "10px");
test_invalid_value("ruby-align", "center start");
</script>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-ruby/parsing/ruby-align-valid.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Ruby Layout: parsing ruby-align with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
<meta name="assert" content="ruby-align supports the full grammar 'start | center | space-between | space-around'.">
<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("ruby-align", "start");
test_valid_value("ruby-align", "center");
test_valid_value("ruby-align", "space-between");
test_valid_value("ruby-align", "space-around");
</script>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-ruby/parsing/ruby-position-invalid.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Ruby Layout: parsing ruby-position with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position">
<meta name="assert" content="ruby-position supports only the grammar 'over | under | inter-character'.">
<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("ruby-position", "auto");
test_invalid_value("ruby-position", "center");
test_invalid_value("ruby-position", "above");
test_invalid_value("ruby-position", "10px 20px");
test_invalid_value("ruby-position", "over under");
</script>
</body>
</html>

19
tests/wpt/web-platform-tests/css/css-ruby/parsing/ruby-position-valid.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Ruby Layout: parsing ruby-position with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position">
<meta name="assert" content="ruby-position supports the full grammar 'over | under | inter-character'.">
<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("ruby-position", "over");
test_valid_value("ruby-position", "under");
test_valid_value("ruby-position", "inter-character");
</script>
</body>
</html>

3
tests/wpt/web-platform-tests/css/css-scrollbars/support/viewport-scrollbar-body-frame.html
View file

@ -2,8 +2,7 @@
<meta charset="UTF-8">
<style>
body {
scrollbar-track-color: blue;
scrollbar-face-color: yellow;
scrollbar-color: yellow blue;
}
html, body {
margin: 0;

3
tests/wpt/web-platform-tests/css/css-scrollbars/support/viewport-scrollbar-frame.html
View file

@ -2,8 +2,7 @@
<meta charset="UTF-8">
<style>
html {
scrollbar-track-color: blue;
scrollbar-face-color: yellow;
scrollbar-color: yellow blue;
}
html, body {
margin: 0;

3
tests/wpt/web-platform-tests/css/css-scrollbars/viewport-scrollbar-ref.html
View file

@ -9,8 +9,7 @@
border: 1px solid black;
width: 200px; height: 200px;
overflow: scroll;
scrollbar-track-color: blue;
scrollbar-face-color: yellow;
scrollbar-color: yellow blue;
}
#inner {
width: 400px; height: 400px;

23
tests/wpt/web-platform-tests/css/css-shapes/inheritance.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Shapes properties</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('shape-image-threshold', '0', '0.5');
assert_not_inherited('shape-margin', '0px', '10px');
assert_not_inherited('shape-outside', 'none', 'inset(10px 20px 30px 40px)');
</script>
</body>
</html>

81
tests/wpt/web-platform-tests/css/css-tables/width-distribution/computing-column-measure-2.html Normal file
View file

@ -0,0 +1,81 @@
<!doctype html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<link rel="author" title="Richard Townsend" href="Richard.Townsend@arm.com" />
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" />
<style type="text/css">
td {
padding: 0;
}
div {
/* Bug does not happen when the table's containing block is less
than (100+200+300)=600px, so make sure sure that it's larger. */
width: 750px;
}
</style>
<div>
<h1>Width Distribution</h1>
<h4>"Computing column measures"</h4>
<p>This is testing that the table's auto columns are correctly recalculated after removing and adding a <code>col</code> element.
<a href="https://www.w3.org/TR/CSS2/tables.html#auto-table-layout">Spec Text</a></p>
<hr/>
<table id="one" style="border: 1px solid orange">
<colgroup>
<col style="width: 100px" />
<col style="width: 200px" />
<col style="width: 300px;" id="hideable" />
</colgroup>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<table id="two" style="border: 1px solid orange">
<colgroup>
<col style="width: 100px; display: none;" id="displayable" />
<col style="width: 200px;" />
<col style="width: auto;" />
</colgroup>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<table id="ref" style="border: 1px solid orange">
<colgroup>
<col style="width: 100px;" />
<col style="width: 200px;" />
<col style="width: auto;" />
</colgroup>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</div>
<script>
test(function() {
var one = document.getElementById('one');
var two = document.getElementById('two');
var ref = document.getElementById('ref');
// Force initial layout.
assert_greater_than(one.offsetWidth, ref.offsetWidth);
// Display two's colgroup and hide one's.
document.getElementById('displayable').style.display = 'table-column';
document.getElementById('hideable').style.display = 'none';
// Both tables should now match the reference.
assert_equals(one.offsetWidth, ref.offsetWidth);
assert_equals(two.offsetWidth, ref.offsetWidth);
}, "Table recalculations should match the reference");
</script>

33
tests/wpt/web-platform-tests/css/css-text-decor/inheritance.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Text Decoration properties</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<style>
#container {
color: rgba(2, 3, 4, 0.5);
}
</style>
<script>
assert_not_inherited('text-decoration-color', 'rgba(2, 3, 4, 0.5)', 'rgba(42, 53, 64, 0.75)');
assert_not_inherited('text-decoration-line', 'none', 'line-through');
assert_not_inherited('text-decoration-style', 'solid', 'dashed');
assert_inherited('text-emphasis-color', 'rgba(2, 3, 4, 0.5)', 'rgba(42, 53, 64, 0.75)');
assert_inherited('text-emphasis-position', 'over right', 'under left');
assert_inherited('text-emphasis-style', 'none', 'filled triangle');
assert_inherited('text-shadow', 'none', 'rgba(42, 53, 64, 0.75) 10px 20px 0px');
assert_inherited('text-underline-position', 'auto', 'under');
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-writing-modes/inheritance.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Writing Modes properties</title>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_inherited('direction', 'ltr', 'rtl');
assert_inherited('text-combine-upright', 'none', 'all');
assert_inherited('text-orientation', 'mixed', 'upright');
assert_not_inherited('unicode-bidi', 'normal', 'embed');
assert_inherited('writing-mode', 'horizontal-tb', 'vertical-rl');
</script>
</body>
</html>

52
tests/wpt/web-platform-tests/css/cssom-view/scroll-behavior-default-css.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<title>Testing default value of scroll-behavior</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
width: 400px;
height: 200px;
}
</style>
<div id="log">
</div>
<div id="overflowNode" class="scrollable">
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
</div>
</div>
<script>
var scrollingElement = overflowNode;
var elementToRevealLeft = 500;
var elementToRevealTop = 250;
var scrollFunction = "scroll";
promise_test(() => {
resetScroll(scrollingElement);
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, "Instant scrolling of an element with default scroll-behavior");
promise_test(() => {
resetScroll(scrollingElement);
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, "Smooth scrolling of an element with default scroll-behavior");
</script>

163
tests/wpt/web-platform-tests/css/cssom-view/scroll-behavior-element.html Normal file
View file

@ -0,0 +1,163 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on an element</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
width: 400px;
height: 200px;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<div id="log">
</div>
<div id="overflowNode" class="scrollable">
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
</div>
</div>
<script>
var scrollingElement = overflowNode;
var styledElement = overflowNode;
var elementToRevealLeft = 500;
var elementToRevealTop = 250;
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => {
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Element with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Element with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Element with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Element with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on an element with another smooth scrolling");
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on an element with an instant scrolling");
</script>

169
tests/wpt/web-platform-tests/css/cssom-view/scroll-behavior-main-frame-root.html Normal file
View file

@ -0,0 +1,169 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of the main frame</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
body {
margin: 0;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<div id="log">
</div>
<div id="pageContent" style="position: absolute; left: 0; top: 0;">
<div id="elementToReveal" style="position: absolute; display: inline-block; width: 10px; height: 15px; background: black;"></div>
</div>
<script>
var pageLoaded = async_test("Page loaded");
var scrollingElement, styledElement, elementToRevealLeft, elementToRevealTop;
window.addEventListener("load", pageLoaded.step_func_done(function() {
scrollingElement = document.scrollingElement;
styledElement = document.documentElement;
pageContent.style.width = (10 + window.innerWidth) * 5 + "px";
pageContent.style.height = (20 + window.innerHeight) * 6 + "px";
elementToRevealLeft = (10 + window.innerWidth) * 3;
elementToRevealTop = (20 + window.innerHeight) * 4;
elementToReveal.style.left = elementToRevealLeft + "px";
elementToReveal.style.top = elementToRevealTop + "px";
add_completion_callback(() => { resetScroll(scrollingElement); });
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => {
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
}));
</script>

169
tests/wpt/web-platform-tests/css/cssom-view/scroll-behavior-main-frame-window.html Normal file
View file

@ -0,0 +1,169 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* on the window of the main frame</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
body {
margin: 0;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<div id="log">
</div>
<div id="pageContent" style="position: absolute; left: 0; top: 0;">
<div id="elementToReveal" style="position: absolute; display: inline-block; width: 10px; height: 15px; background: black;"></div>
</div>
<script>
var pageLoaded = async_test("Page loaded");
var scrollingWindow, styledElement, elementToRevealLeft, elementToRevealTop;
window.addEventListener("load", pageLoaded.step_func_done(function() {
scrollingWindow = window;
styledElement = document.documentElement;
pageContent.style.width = (10 + window.innerWidth) * 5 + "px";
pageContent.style.height = (20 + window.innerHeight) * 6 + "px";
elementToRevealLeft = (10 + window.innerWidth) * 3;
elementToRevealTop = (20 + window.innerHeight) * 4;
elementToReveal.style.left = elementToRevealLeft + "px";
elementToReveal.style.top = elementToRevealTop + "px";
add_completion_callback(() => { resetScrollForWindow(window); });
["scroll", "scrollTo", "scrollBy"].forEach((scrollFunction) => {
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollWindow(scrollingWindow, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, 0, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
}));
</script>

88
tests/wpt/web-platform-tests/css/cssom-view/scroll-behavior-scrollintoview-nested.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior with scrollIntoView for nested scrolling nodes</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
height: 200px;
}
.smoothBehavior {
scroll-behavior: smooth;
}
.gradient {
background: linear-gradient(135deg, red, green);
}
</style>
<div id="log">
</div>
<div>
<div class="scrollable smoothBehavior" style="width: 450px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable smoothBehavior" style="width: 400px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable" style="width: 350px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable" style="width: 300px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable smoothBehavior" style="width: 250px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable" style="width: 200px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div id="elementToReveal" style="width: 10px; height: 10px; background: black;"></div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
</div>
</div>
<script>
// The CSSOM-View spec and implementations follow different algorithms (scrolls performed in parallel, as inner-to-outer sequence or as outer-to-inner sequence).
// See https://github.com/w3c/csswg-drafts/issues/3127
promise_test(() => {
return new Promise(function(resolve, reject) {
var divs = document.querySelectorAll(".scrollable");
divs.forEach((scrollableDiv) => {
resetScroll(scrollableDiv);
});
elementToReveal.scrollIntoView({inline: "start", block: "start", behavior: "auto"});
var scrollTop = new Map();
var isSmooth = new Map();
divs.forEach((scrollableDiv) => {
scrollTop.set(scrollableDiv, scrollableDiv.scrollTop);
isSmooth.set(scrollableDiv, scrollableDiv.classList.contains("smoothBehavior"));
// If scroll operations are not performed in parallel, scroll boxes with instant behavior might also need to wait for their predecessors.
if (isSmooth.get(scrollableDiv))
assert_less_than(scrollTop.get(scrollableDiv), 500, "Element with smooth behavior should not scroll immediately");
});
observeScrolling(Array.from(divs), function(done) {
try {
divs.forEach((scrollableDiv) => {
assert_less_than_equal(scrollTop.get(scrollableDiv), scrollableDiv.scrollTop, "ScrollTop keeps increasing");
if (!isSmooth.get(scrollableDiv))
assert_any(assert_equals, scrollableDiv.scrollTop, [0, 500], "Element with instant behavior should jump to the final position");
if (done)
assert_equals(scrollableDiv.scrollTop, 500, "Final value of scrollTop");
scrollTop.set(scrollableDiv, scrollableDiv.scrollTop);
});
} catch(e) {
reject(e);
}
if (done)
resolve();
});
});
}, "scrollIntoView with nested elements with different scroll-behavior");
</script>

151
tests/wpt/web-platform-tests/css/cssom-view/scroll-behavior-smooth-positions.html Normal file
View file

@ -0,0 +1,151 @@
<!DOCTYPE html>
<title>Testing scroll positions when scrolling an element with smooth behavior</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
width: 400px;
height: 200px;
scroll-behavior: smooth;
}
</style>
<div id="log">
</div>
<div id="overflowNode" class="scrollable">
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
</div>
</div>
<script>
// For smooth behavior, evolution of scroll positions over time is not specified by CSSOM View.
// This test relies on the minimal assumption that scroll position functions are monotonic.
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach(function(scrollFunction) {
[{left:0, top:0}, {left:1000, top:0}, {left:0, top:500}, {left:1000, top:500}].forEach((initial) => {
var finalLeft = 500;
var finalTop = 250;
promise_test(() => {
return new Promise(function(resolve, reject) {
scrollNode(overflowNode, "scroll", "instant", initial.left, initial.top);
var oldLeft = overflowNode.scrollLeft;
var oldTop = overflowNode.scrollTop;
assert_equals(oldLeft, initial.left, "ScrollLeft should be at initial position");
assert_equals(oldTop, initial.top, "ScrollTop should be at initial position");
if (scrollFunction === "scrollBy")
scrollNode(overflowNode, scrollFunction, "smooth", finalLeft - initial.left, finalTop - initial.top);
else
scrollNode(overflowNode, scrollFunction, "smooth", finalLeft, finalTop);
observeScrolling(overflowNode, function(done) {
try {
var newLeft = overflowNode.scrollLeft;
var newTop = overflowNode.scrollTop;
assert_less_than_equal(Math.hypot(finalLeft - newLeft, finalTop - newTop), Math.hypot(finalLeft - oldLeft, finalTop - oldTop), "Scroll position should move towards the final position");
if (done) {
assert_equals(newLeft, finalLeft, "ScrollLeft should reach final position");
assert_equals(newTop, finalTop, "ScrollTop should reach final position");
}
oldLeft = newLeft;
oldTop = newTop;
} catch(e) {
reject(e);
}
if (done)
resolve();
});
});
}, `Scroll positions when performing smooth scrolling from (${initial.left}, ${initial.top}) to (${finalLeft}, ${finalTop}) using ${scrollFunction}() `);
});
});
promise_test(() => {
return new Promise(function(resolve, reject) {
resetScroll(overflowNode);
var initialScrollAborted = false;
var scrollDirectionChanged = false;
var oldLeft = overflowNode.scrollLeft;
var oldTop = overflowNode.scrollTop;
assert_equals(oldLeft, 0);
assert_equals(oldTop, 0);
scrollNode(overflowNode, "scroll", "smooth", 1500, 750);
observeScrolling(overflowNode, function(done) {
try {
var newLeft = overflowNode.scrollLeft;
var newTop = overflowNode.scrollTop;
if (initialScrollAborted) {
if (scrollDirectionChanged) {
assert_greater_than_equal(oldLeft, newLeft, "ScrollLeft keeps decreasing");
assert_greater_than_equal(oldTop, newTop, "ScrollTop keeps decreasing");
} else
scrollDirectionChanged = newLeft <= oldLeft && newTop <= oldTop;
} else {
assert_less_than_equal(oldLeft, newLeft, "ScrollLeft keeps increasing");
assert_less_than_equal(oldTop, newTop, "ScrollTop keeps increasing");
if (newLeft > 1000 && newTop > 500) {
// Abort the initial scroll.
initialScrollAborted = true;
scrollNode(overflowNode, "scroll", "smooth", 500, 250);
newLeft = overflowNode.scrollLeft;
newTop = overflowNode.scrollTop;
}
}
if (done) {
assert_equals(newLeft, 500, "ScrollLeft should reach final position");
assert_equals(newTop, 250, "ScrollTop should reach final position");
}
oldLeft = newLeft;
oldTop = newTop;
} catch(e) {
reject(e);
}
if (done)
resolve();
});
});
}, "Scroll positions when aborting a smooth scrolling with another smooth scrolling");
promise_test(() => {
return new Promise(function(resolve) {
resetScroll(overflowNode);
var initialScrollAborted = false;
var oldLeft = overflowNode.scrollLeft;
var oldTop = overflowNode.scrollTop;
assert_equals(oldLeft, 0);
assert_equals(oldTop, 0);
scrollNode(overflowNode, "scroll", "smooth", 1500, 750);
observeScrolling(overflowNode, function(done) {
try {
var newLeft = overflowNode.scrollLeft;
var newTop = overflowNode.scrollTop;
if (!initialScrollAborted) {
assert_less_than_equal(oldLeft, newLeft, "ScrollLeft keeps increasing");
assert_less_than_equal(oldTop, newTop, "ScrollTop keeps increasing");
if (newLeft > 1000 && newTop > 500) {
// Abort the initial scroll.
initialScrollAborted = true;
scrollNode(overflowNode, "scroll", "instant", 500, 250);
newLeft = overflowNode.scrollLeft;
newTop = overflowNode.scrollTop;
assert_equals(newLeft, 500, "ScrollLeft should reach final position");
assert_equals(newTop, 250, "ScrollTop should reach final position");
}
}
if (done) {
assert_equals(newLeft, 500, "ScrollLeft should stay at final position");
assert_equals(newTop, 250, "ScrollTop should stay at final position");
}
oldLeft = newLeft;
oldTop = newTop;
} catch(e) {
reject(e);
}
if (done)
resolve();
});
});
}, "Scroll positions when aborting a smooth scrolling with an instant scrolling");
</script>

170
tests/wpt/web-platform-tests/css/cssom-view/scroll-behavior-subframe-root.html Normal file
View file

@ -0,0 +1,170 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of a subframe</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<div id="log">
</div>
<iframe id="iframeNode" width="400px" height="200px" srcdoc="<!DOCTYPE>
<html>
<style>
body {
margin: 0;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<body>
<div style='width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);'>
<span style='display: inline-block; width: 500px; height: 250px;'></span><span id='elementToReveal' style='display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;'></span>
</div>
</body>
</html>">
</iframe>
<script>
var iframeLoadTest = async_test("iframe loaded");
var scrollingElement, styledElement, elementToReveal;
var elementToRevealLeft = 500;
var elementToRevealTop = 250;
iframeNode.addEventListener("load", iframeLoadTest.step_func_done(() => {
scrollingElement = iframeNode.contentDocument.scrollingElement;
styledElement = iframeNode.contentDocument.documentElement;
elementToReveal = iframeNode.contentDocument.getElementById("elementToReveal");
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => {
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on a subframe with another smooth scrolling");
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on a subframe with an instant scrolling");
}));
</script>

171
tests/wpt/web-platform-tests/css/cssom-view/scroll-behavior-subframe-window.html Normal file
View file

@ -0,0 +1,171 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of a subframe</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<div id="log">
</div>
<iframe id="iframeNode" width="400px" height="200px" srcdoc="<!DOCTYPE>
<html>
<style>
body {
margin: 0;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<body>
<div style='width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);'>
<span style='display: inline-block; width: 500px; height: 250px;'></span><span id='elementToReveal' style='display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;'></span>
</div>
</body>
</html>">
</iframe>
<script>
var iframeLoadTest = async_test("iframe loaded");
var scrollingWindow, styledElement, elementToReveal;
var elementToRevealLeft = 500;
var elementToRevealTop = 250;
iframeNode.addEventListener("load", iframeLoadTest.step_func_done(() => {
scrollingWindow = iframeNode.contentWindow;
styledElement = iframeNode.contentDocument.documentElement;
elementToReveal = iframeNode.contentDocument.getElementById("elementToReveal");
["scroll", "scrollTo", "scrollBy"].forEach((scrollFunction) => {
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollWindow(scrollingWindow, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, 0, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
}));
</script>

87
tests/wpt/web-platform-tests/css/cssom-view/support/scroll-behavior.js Normal file
View file

@ -0,0 +1,87 @@
function observeScrolling(elements, callback) {
if (!Array.isArray(elements))
elements = [elements];
var lastChangedFrame = 0;
var lastLeft = new Map();
var lastTop = new Map();
elements.forEach((element) => {
lastLeft.set(element, element.scrollLeft);
lastTop.set(element, element.scrollTop);
});
function tick(frames) {
// We requestAnimationFrame either for 500 frames or until 20 frames with
// no change have been observed.
if (frames >= 500 || frames - lastChangedFrame > 20) {
callback(true);
} else {
var scrollHappened = elements.some((element) => {
return element.scrollLeft != lastLeft.get(element) || element.scrollTop != lastTop.get(element);
});
if (scrollHappened) {
lastChangedFrame = frames;
elements.forEach((element) => {
lastLeft.set(element, element.scrollLeft);
lastTop.set(element, element.scrollTop);
});
callback(false);
}
requestAnimationFrame(tick.bind(null, frames + 1));
}
}
tick(0);
}
function waitForScrollEnd(elements) {
return new Promise((resolve) => {
observeScrolling(elements, (done) => {
if (done)
resolve();
});
});
}
function resetScroll(scrollingElement) {
// Try various methods to ensure the element position is reset immediately.
scrollingElement.scrollLeft = 0;
scrollingElement.scrollTop = 0;
scrollingElement.scroll({left: 0, top: 0, behavior: "instant"});
}
function resetScrollForWindow(scrollingWindow) {
// Try various methods to ensure the element position is reset immediately.
scrollingWindow.document.scrollingElement.scrollLeft = 0;
scrollingWindow.document.scrollingElement.scrollTop = 0;
scrollingWindow.scroll({left: 0, top: 0, behavior: "instant"});
}
function setScrollBehavior(styledElement, className) {
styledElement.classList.remove("autoBehavior", "smoothBehavior");
styledElement.classList.add(className);
}
function scrollNode(scrollingElement, scrollFunction, behavior, elementToRevealLeft, elementToRevealTop) {
var args = {};
if (behavior)
args.behavior = behavior;
switch (scrollFunction) {
case "scrollIntoView":
args.inline = "start";
args.block = "start";
elementToReveal.scrollIntoView(args);
break;
default:
args.left = elementToRevealLeft;
args.top = elementToRevealTop;
scrollingElement[scrollFunction](args);
break;
}
}
function scrollWindow(scrollingWindow, scrollFunction, behavior, elementToRevealLeft, elementToRevealTop) {
var args = {};
if (behavior)
args.behavior = behavior;
args.left = elementToRevealLeft;
args.top = elementToRevealTop;
scrollingWindow[scrollFunction](args);
}

2
tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-absolute.html
View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for absolute positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

2
tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-fixed.html
View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for fixed positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

2
tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-nobox.html
View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties when the element generates no box</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

2
tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-relative.html
View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for relative positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

2
tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-static.html
View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for static positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

2
tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-sticky.html
View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for sticky positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

4
tests/wpt/web-platform-tests/css/cssom/overflow-serialization.html
View file

@ -22,7 +22,7 @@
assert_equals(styleSheet.cssRules[1].style.cssText, "overflow: hidden;", "Single value overflow with non-CSS-wide keyword should serialize correctly.");
assert_equals(styleSheet.cssRules[2].style.cssText, "overflow: initial;", "Overflow-x/y longhands with same CSS-wide keyword should serialize correctly.");
assert_equals(styleSheet.cssRules[3].style.cssText, "overflow: scroll;", "Overflow-x/y longhands with same non-CSS-wide keyword should serialize correctly.");
assert_equals(styleSheet.cssRules[4].style.cssText, "overflow: hidden scroll;", "Overflow-x/y longhands with different keywords should serialize correctly.");
assert_equals(styleSheet.cssRules[4].style.cssText, "overflow: scroll hidden;", "Overflow-x/y longhands with different keywords should serialize correctly.");
var div = document.createElement('div');
div.style.overflow = "inherit";
@ -42,7 +42,7 @@
div.style.overflowX = "scroll";
div.style.overflowY = "hidden";
assert_equals(div.style.overflow, "hidden scroll", "Overflow-x/y longhands with different keywords should serialize correctly.");
assert_equals(div.style.overflow, "scroll hidden", "Overflow-x/y longhands with different keywords should serialize correctly.");
});
</script>
</head>

2
tests/wpt/web-platform-tests/css/cssom/shorthand-values.html
View file

@ -32,7 +32,7 @@
'border: 1px; border-top-color: red;': 'border-width: 1px; border-top-color: red;',
'border: solid; border-style: dotted': 'border: dotted;',
'border-width: 1px;': 'border-width: 1px;',
'overflow-x: scroll; overflow-y: hidden;': 'overflow: hidden scroll;',
'overflow-x: scroll; overflow-y: hidden;': 'overflow: scroll hidden;',
'overflow-x: scroll; overflow-y: scroll;': 'overflow: scroll;',
'outline-width: 2px; outline-style: dotted; outline-color: blue;': 'outline: blue dotted 2px;',
'margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;': 'margin: 1px 2px 3px 4px;',

4
tests/wpt/web-platform-tests/css/cssom/support/getComputedStyle-insets.js
View file

@ -89,9 +89,9 @@ function runTestsWithWM(data, testWM, cbWM) {
function checkStyle(declarations, expected, msg) {
test(function() {
testEl.style.cssText = style + "; " + serialize({...declarations, ...testWM.style});
testEl.style.cssText = style + "; " + serialize(Object.assign({}, declarations, testWM.style));
if (containingBlockElement) {
containingBlockElement.style.cssText = serialize({...cbWM.style});
containingBlockElement.style.cssText = serialize(Object.assign({}, cbWM.style));
}
const cs = getComputedStyle(testEl);
for (let [prop, value] of Object.entries(expected)) {

42
tests/wpt/web-platform-tests/css/motion/offset-path-serialization.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Motion Path Module Level 1: path serialization</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/motion-1/">
<h:meta name="assert" content="computed offset-path is serialized using absolute commands"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="target"></div>
<script>
'use strict';
test(function() {
var target = document.getElementById('target');
target.style.offsetPath = 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")';
assert_equals(target.style.offsetPath, 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 20 Q 40 80 50 70 Q 150 140 140 150")');
target.style.offsetPath = "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z')";
assert_equals(target.style.offsetPath, 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 260 220 Z")');
target.style.offsetPath = 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")';
assert_equals(target.style.offsetPath, 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 20 L 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220")');
target.style.offsetPath = 'path("m 10.0 170.0 h 90.00 v 30.00 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")';
assert_equals(target.style.offsetPath, 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 170 H 100 V 200 M 100 200 S 101 202 103 204 Z C 109 208 107 206 105 204")');
target.style.offsetPath = ' path( "m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50" ) ';
assert_equals(target.style.offsetPath, 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120")');
});
</script>
</body>
</html>

8
tests/wpt/web-platform-tests/css/motion/parsing/offset-parsing-valid.html
View file

@ -30,11 +30,11 @@ test_valid_value("offset", "path('M 0 0 H 1') 50px", "path(\"M 0 0 H 1\") 50px")
test_valid_value("offset", "path(\"M 0 0 H 1\") auto");
test_valid_value("offset", "path('M 0 0 H 1') reverse 30deg 50px", "path(\"M 0 0 H 1\") 50px reverse 30deg");
test_valid_value("offset", "path(\"M 0 0 H 1\")");
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px / auto", "path(\"m 0 0 h 100\") 8px -7rad / auto");
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px / left top", "path(\"m 0 0 h 100\") 8px -7rad / left top");
test_valid_value("offset", "path('m 20 0 h 100') -7rad 8px / auto", "path(\"m 20 0 h 100\") 8px -7rad / auto");
test_valid_value("offset", "path('m 0 30 v 100') -7rad 8px / left top", "path(\"m 0 30 v 100\") 8px -7rad / left top");
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px", "path(\"m 0 0 h 100\") 8px -7rad");
test_valid_value("offset", "path(\"m 0 0 h 100\") 100px 0deg");
test_valid_value("offset", "path('m 1 2 v 3 Z')", "path(\"m 1 2 v 3 Z\")");
test_valid_value("offset", "path(\"M 0 0 H 100\") 100px 0deg");
test_valid_value("offset", "path( 'm 1 2 v 3.00 z')", "path(\"m 1 2 v 3 Z\")");
test_valid_value("offset", "ray(farthest-corner 90deg) 1%", "ray(90deg farthest-corner) 1%");
test_valid_value("offset", "ray(sides 0deg) 50% 90deg auto", "ray(0deg sides) 50% auto 90deg");
test_valid_value("offset", "right bottom / left top");

7
tests/wpt/web-platform-tests/css/motion/parsing/offset-path-parsing-valid.html
View file

@ -21,8 +21,13 @@ test_valid_value("offset-path", "ray(270deg farthest-corner contain)");
test_valid_value("offset-path", "ray(-720deg sides)");
test_valid_value("offset-path", "ray(calc(180deg - 45deg) farthest-side)", "ray(calc(135deg) farthest-side)");
test_valid_value("offset-path", 'path("m 0 0 h -100")');
test_valid_value("offset-path", 'path("m 20 0 h -100")');
test_valid_value("offset-path", 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z")');
test_valid_value("offset-path", 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")');
test_valid_value("offset-path", 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")');
test_valid_value("offset-path", 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")');
test_valid_value("offset-path", 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")', 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")');
test_valid_value("offset-path", 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")');
test_valid_value("offset-path", 'url("http://www.example.com/index.html#polyline1")');

4
tests/wpt/web-platform-tests/css/support/inheritance-testcommon.js
View file

@ -24,10 +24,10 @@ function assert_inherited(property, initial, other) {
assert_equals(getComputedStyle(container)[property], other);
assert_equals(getComputedStyle(target)[property], other);
target.style[property] = 'initial';
assert_not_equals(getComputedStyle(container)[property], other);
assert_equals(getComputedStyle(container)[property], other);
assert_not_equals(getComputedStyle(target)[property], other);
target.style[property] = 'inherit';
assert_equals(getComputedStyle(container)[property], other);
assert_equals(getComputedStyle(target)[property], other);
container.style[property] = '';
target.style[property] = '';
}, 'Property ' + property + ' inherits');

4
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/values3/calc-text-indent-intrinsic-1-ref.html
View file

@ -12,9 +12,9 @@ body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
</head>
<body>
<div style="width: 10px"></div>
<div style="width: 7px"></div>
<div style="width: 57px"></div>
<div style="width: 10px"></div>
<div style="width: 60px"></div>
<div style="width: 10px"></div>
<div style="width: 60px"></div>
<div style="width: 10px"></div>