mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision 0b22439430b6d8d9a6d43a0908e86c0366f207c0
This commit is contained in:
WPT Sync Bot
parent
39ec04a065
commit
c8e806d0ef
93 changed files with 2118 additions and 597 deletions
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations: column-rule-color animations respond to style changes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#crc">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.paused {
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
animation-delay: -2s;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
#container {
|
||||
color: rgb(80, 0, 0);
|
||||
}
|
||||
#first {
|
||||
animation-name: first-anim;
|
||||
color: rgb(60, 0, 0);
|
||||
}
|
||||
#second {
|
||||
animation-name: second-anim;
|
||||
}
|
||||
@keyframes first-anim {
|
||||
from { column-rule-color: currentColor; }
|
||||
to { column-rule-color: rgb(0, 60, 0); }
|
||||
}
|
||||
@keyframes second-anim {
|
||||
from { column-rule-color: inherit; }
|
||||
to { column-rule-color: rgb(0, 0, 80); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="first" class="paused"></div>
|
||||
<div id="second" class="paused"></div>
|
||||
</div>
|
||||
<script>
|
||||
'use strict';
|
||||
var container = document.getElementById('container');
|
||||
|
||||
test(() => {
|
||||
const first = document.getElementById('first');
|
||||
assert_equals(getComputedStyle(first).columnRuleColor, 'rgb(30, 30, 0)');
|
||||
first.style.color = 'rgb(0, 0, 60)';
|
||||
assert_equals(getComputedStyle(first).columnRuleColor, 'rgb(0, 30, 30)');
|
||||
}, 'column-rule-color responds to currentColor changes');
|
||||
|
||||
test(() => {
|
||||
const container = document.getElementById('container');
|
||||
const second = document.getElementById('second');
|
||||
assert_equals(getComputedStyle(second).columnRuleColor, 'rgb(40, 0, 40)');
|
||||
container.style.columnRuleColor = 'rgb(0, 80, 0)';
|
||||
assert_equals(getComputedStyle(second).columnRuleColor, 'rgb(0, 40, 40)');
|
||||
}, 'column-rule-color responds to inherited changes');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations: column-width animations respond to style changes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cw">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.paused {
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
animation-delay: -2s;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
#container {
|
||||
column-width: 40px;
|
||||
font-size: 10px;
|
||||
}
|
||||
#first {
|
||||
animation-name: first-anim;
|
||||
}
|
||||
#second {
|
||||
animation-name: second-anim;
|
||||
}
|
||||
#third {
|
||||
animation-name: third-anim;
|
||||
}
|
||||
@keyframes first-anim {
|
||||
from { column-width: 3em; }
|
||||
to { column-width: 5em; }
|
||||
}
|
||||
@keyframes second-anim {
|
||||
from { column-width: 40px; }
|
||||
to { column-width: calc(40px - 2em); }
|
||||
}
|
||||
@keyframes third-anim {
|
||||
from { column-width: 20px; }
|
||||
to { column-width: inherit; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="first" class="paused"></div>
|
||||
<div id="second" class="paused"></div>
|
||||
<div id="third" class="paused"></div>
|
||||
</div>
|
||||
<script>
|
||||
'use strict';
|
||||
var container = document.getElementById('container');
|
||||
|
||||
test(() => {
|
||||
const first = document.getElementById('first');
|
||||
assert_equals(getComputedStyle(first).columnWidth, '40px');
|
||||
first.style.fontSize = '20px';
|
||||
assert_equals(getComputedStyle(first).columnWidth, '80px');
|
||||
}, 'column-width responds to font-size changes');
|
||||
|
||||
test(() => {
|
||||
const second = document.getElementById('second');
|
||||
assert_equals(getComputedStyle(second).columnWidth, '30px');
|
||||
second.style.fontSize = '90px';
|
||||
assert_equals(getComputedStyle(second).columnWidth, '0px');
|
||||
}, 'column-width clamps to 0px');
|
||||
|
||||
test(() => {
|
||||
const container = document.getElementById('container');
|
||||
const third = document.getElementById('third');
|
||||
assert_equals(getComputedStyle(third).columnWidth, '30px');
|
||||
container.style.columnWidth = 'auto';
|
||||
assert_equals(getComputedStyle(third).columnWidth, 'auto');
|
||||
}, 'column-width responds to inherited changes');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking Module Level 1: parsing mask-position with invalid values</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
|
||||
<meta name="assert" content="mask-position supports only the '<position>#' grammar.">
|
||||
<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("mask-position", "auto");
|
||||
test_invalid_value("mask-position", "1px 2px 3px");
|
||||
test_invalid_value("mask-position", "left right");
|
||||
test_invalid_value("mask-position", "bottom 10%");
|
||||
test_invalid_value("mask-position", "bottom 10% top 20%");
|
||||
|
||||
test_invalid_value("mask-position", "center left 1px");
|
||||
test_invalid_value("mask-position", "center top 2px");
|
||||
test_invalid_value("mask-position", "right 3% center");
|
||||
test_invalid_value("mask-position", "left 4px top");
|
||||
test_invalid_value("mask-position", "right top 5px");
|
||||
test_invalid_value("mask-position", "bottom 6% center");
|
||||
test_invalid_value("mask-position", "bottom 7% left");
|
||||
test_invalid_value("mask-position", "bottom right 8%");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking Module Level 1: parsing mask-position with valid values</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
|
||||
<meta name="assert" content="mask-position supports the full '<position>#' grammar.">
|
||||
<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("mask-position", "10%", "10% center");
|
||||
test_valid_value("mask-position", "right 30% top 60px");
|
||||
test_valid_value("mask-position", "-20% -30px");
|
||||
test_valid_value("mask-position", "30px center");
|
||||
test_valid_value("mask-position", "40px top");
|
||||
test_valid_value("mask-position", "bottom 10% right 20%", "right 20% bottom 10%");
|
||||
test_valid_value("mask-position", "bottom right", "right bottom");
|
||||
test_valid_value("mask-position", "center 50px");
|
||||
test_valid_value("mask-position", "center bottom");
|
||||
test_valid_value("mask-position", "center left", "left center");
|
||||
test_valid_value("mask-position", "left", "left center");
|
||||
test_valid_value("mask-position", "left bottom");
|
||||
test_valid_value("mask-position", "right 40%");
|
||||
test_valid_value("mask-position", "top", "center top");
|
||||
test_valid_value("mask-position", "top center", "center top");
|
||||
test_valid_value("mask-position", "center", "center center");
|
||||
|
||||
test_valid_value("mask-position", "bottom left, right 20%", "left bottom, right 20%");
|
||||
test_valid_value("mask-position", "top, center, left", "center top, center center, left center");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="canvas" width="540" height="550"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
canvas.style.width = (canvas.width / devicePixelRatio) + 'px';
|
||||
canvas.style.height = (canvas.height / devicePixelRatio) + 'px';
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.scale(devicePixelRatio, devicePixelRatio);
|
||||
var fillW = 250;
|
||||
var fillH = 50;
|
||||
ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 100);
|
||||
ctx.beginPath();
|
||||
ctx.rect(0, 0, fillW, fillH);
|
||||
ctx.closePath();
|
||||
ctx.clip();
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(0, 0, fillW, fillH);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/#dom-css-paintworklet">
|
||||
<link rel="match" href="canvas-transform-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 270px;
|
||||
height: 275px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
// Regression test for crbug.com/970783. The canvas transform matrix should
|
||||
// account for the devicePixelRatio, such that the clip bounds can be
|
||||
// properly computed when applying clips.
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
var fillW = 250;
|
||||
var fillH = 50;
|
||||
ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 100);
|
||||
ctx.beginPath();
|
||||
ctx.rect(0, 0, fillW, fillH);
|
||||
ctx.closePath();
|
||||
ctx.clip();
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(0, 0, fillW, fillH);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<p style="color: blue">Blue <span style="color: green">This text should be green.</span> Blue</p>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo">
|
||||
<link rel="match" href="first-line-change-inline-color-nested-ref.html">
|
||||
<style>
|
||||
#block { color: green; }
|
||||
#block::first-line { color: blue; }
|
||||
.green { color: green; }
|
||||
</style>
|
||||
<div id="block">
|
||||
<div>
|
||||
<p>Blue <span id="target"><span>This text should be green.</span></span> Blue</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
target.className = 'green';
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<p style="color: blue">Blue <span style="color: green">This text should be green.</span> Blue</p>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo">
|
||||
<link rel="match" href="first-line-change-inline-color-ref.html">
|
||||
<style>
|
||||
#block { color: green; }
|
||||
#block::first-line { color: blue; }
|
||||
.green { color: green; }
|
||||
</style>
|
||||
<div id="block">
|
||||
<div>
|
||||
<p>Blue <span id="target">This text should be green.</span> Blue</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
target.className = 'green';
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<div>
|
||||
<span style="color: green">This text should be green.</span><br>
|
||||
<span style="color: blue">This text should be blue.</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo">
|
||||
<link rel="match" href="first-line-on-ancestor-block-ref.html">
|
||||
<style>
|
||||
#block::first-line { color: green; }
|
||||
</style>
|
||||
<div id="block">
|
||||
<div>
|
||||
<div style="color: blue">
|
||||
<div>
|
||||
<span><span>This text should be green.</span></span><br>
|
||||
This text should be blue.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<div>
|
||||
<span style="color: green">This text should be green.</span><br>
|
||||
<span style="color: blue">This text should be blue.</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo">
|
||||
<link rel="match" href="first-line-with-out-of-flow-ref.html">
|
||||
<style>
|
||||
#block::first-line { color: green; }
|
||||
</style>
|
||||
<div id="block">
|
||||
<div style="position: absolute"><br></div>
|
||||
<div style="float: right"><br></div>
|
||||
<div>
|
||||
<div style="position: absolute"><br></div>
|
||||
<div style="float: right"><br></div>
|
||||
<div style="color: blue">
|
||||
<div>
|
||||
<span><span>This text should be green.</span></span><br>
|
||||
This text should be blue.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test Reference</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is a green square and no red.
|
||||
|
||||
<div>XX<br>XX</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
|
||||
<meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap.">
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
color: green;
|
||||
background: red;
|
||||
|
||||
width: 2ch;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is a green square and no red.
|
||||
<div>XX<span> </span>XX</div>
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
|
||||
<meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap.">
|
||||
<style>
|
||||
div {
|
||||
font: 10px/1 Ahem;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.ref span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
|
||||
width: 5ch;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is a green square and no red.
|
||||
<div class="ref">XX<span>XXX</span><br>X<span>XX</span>X<span>X</span><br><span>XXXXX</span><br><span>XXXXX</span><br><span>XXXXX</span></div>
|
||||
<div class="test">XX<span> </span><span>X X </span></div>
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
|
||||
<meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap and any overflowing space is removed.">
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test span { background: red; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.test span { background: green; }
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is a green square and no red.
|
||||
<div class="ref">X<span>X</span><br>XX</div>
|
||||
<div class="test">X<span>  </span><span> XX</span></div>
|
||||
|
||||
|
|
@ -16,9 +16,11 @@ test_valid_value("scale", "none");
|
|||
|
||||
test_valid_value("scale", "1");
|
||||
|
||||
test_valid_value("scale", "100");
|
||||
test_valid_value("scale", "100 100", "100");
|
||||
test_valid_value("scale", "100 200");
|
||||
test_valid_value("scale", "100 100 1");
|
||||
|
||||
test_valid_value("scale", "100 200");
|
||||
test_valid_value("scale", "100 200 1");
|
||||
test_valid_value("scale", "100 200 300");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers direction:rtl</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scroll-an-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
direction: rtl;
|
||||
overflow-x: scroll;
|
||||
width: 300px;
|
||||
height: 215px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// This page is direction: rtl and scroller is direction: rtl.
|
||||
// So the the overflow direction is leftward, downward. The beginning edges are the top and right edges.
|
||||
// And the ending edges are the bottom and left edges.
|
||||
// Acording to the spec, x is min(0, max(x, element padding edge width - element scrolling area width)).
|
||||
// So x is nonpositive and decreases leftward.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var box_width = target.offsetWidth;
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
|
||||
var leftEdge = -2*box_width + scroller_width;
|
||||
var center = -(3*box_width - scroller_width)/2;
|
||||
var rightEdge = - box_width;
|
||||
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView({inline: "start"});
|
||||
assert_approx_equals(scroller.scrollLeft, rightEdge, 0.5, "start should be the right edge");
|
||||
}, `scrollIntoView({inline: "start"}), direction: rtl`);
|
||||
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView({inline: "center"});
|
||||
assert_approx_equals(scroller.scrollLeft, center, 0.5, "should center the target");
|
||||
}, `scrollIntoView({inline: "center"}), direction: rtl`);
|
||||
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView({inline: "end"});
|
||||
assert_approx_equals(scroller.scrollLeft, leftEdge, 0.5, "end should be the left edge");
|
||||
}, `scrollIntoView({inline: "end"}), direction: rtl`);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers horizontal-tb and rtl direction</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scroll-an-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
direction: rtl;
|
||||
overflow: scroll;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<!-- ROW-1 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-2 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-3 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// In horizontal-tb mode and rtl direction, X corresponds to the inline axis
|
||||
// and is oriented leftward. Y corresponds to the block axis and is oriented
|
||||
// downward. So the beginning edges are the top and right edges and the ending
|
||||
// edges are the bottom and left edges.
|
||||
|
||||
// According to the spec, x is min(0, max(x, element padding edge width - element scrolling area width)).
|
||||
// So x is nonpositive and decreases leftward.
|
||||
|
||||
// This assumes that the horizontal scrollbar is on the bottom side
|
||||
// and the vertical scrollbar is on the left side.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
var scroller_height = scroller.offsetHeight;
|
||||
var box_width = target.offsetWidth;
|
||||
var box_height = target.offsetHeight;
|
||||
|
||||
var expectedX = {
|
||||
inlineStart: -box_width,
|
||||
inlineCenter: -((3*box_width - scroller_width)/2) - scrollbar_width/2,
|
||||
inlineEnd: -(2*box_width - scroller_width) - scrollbar_width,
|
||||
};
|
||||
|
||||
var expectedY = {
|
||||
blockStart: box_height,
|
||||
blockCenter: (3*box_height - scroller_height)/2 + scrollbar_width/2,
|
||||
blockEnd: 2*box_height - scroller_height + scrollbar_width,
|
||||
};
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX.inlineStart, expectedY.blockStart],
|
||||
[{block: "start", inline: "center"}, expectedX.inlineCenter, expectedY.blockStart],
|
||||
[{block: "start", inline: "end"}, expectedX.inlineEnd, expectedY.blockStart],
|
||||
[{block: "center", inline: "start"}, expectedX.inlineStart, expectedY.blockCenter],
|
||||
[{block: "center", inline: "center"}, expectedX.inlineCenter, expectedY.blockCenter],
|
||||
[{block: "center", inline: "end"}, expectedX.inlineEnd, expectedY.blockCenter],
|
||||
[{block: "end", inline: "start"}, expectedX.inlineStart, expectedY.blockEnd],
|
||||
[{block: "end", inline: "center"}, expectedX.inlineCenter, expectedY.blockEnd],
|
||||
[{block: "end", inline: "end"}, expectedX.inlineEnd, expectedY.blockEnd],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${JSON.stringify(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers horizontal-tb writing mode</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<!-- ROW-1 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-2 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-3 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// In horizontal-tb mode, X corresponds to the inline axis and is oriented
|
||||
// rightward. Y corresponds to the block axis and is oriented downward.
|
||||
// So the beginning edges are the top and left edges and the ending
|
||||
// edges are the bottom and right edges.
|
||||
|
||||
// This assumes that the horizontal scrollbar is on the bottom side and
|
||||
// the vertical scrollbar is on the right side.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
var scroller_height = scroller.offsetHeight;
|
||||
var box_width = target.offsetWidth;
|
||||
var box_height = target.offsetHeight;
|
||||
|
||||
var expectedX = {
|
||||
inlineStart: box_width,
|
||||
inlineCenter: (3*box_width - scroller_width)/2 + scrollbar_width/2,
|
||||
inlineEnd: 2*box_width - scroller_width + scrollbar_width,
|
||||
};
|
||||
|
||||
var expectedY = {
|
||||
blockStart: box_height,
|
||||
blockCenter: (3*box_height - scroller_height)/2 + scrollbar_width/2,
|
||||
blockEnd: 2*box_height - scroller_height + scrollbar_width,
|
||||
};
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX.inlineStart, expectedY.blockStart],
|
||||
[{block: "start", inline: "center"}, expectedX.inlineCenter, expectedY.blockStart],
|
||||
[{block: "start", inline: "end"}, expectedX.inlineEnd, expectedY.blockStart],
|
||||
[{block: "center", inline: "start"}, expectedX.inlineStart, expectedY.blockCenter],
|
||||
[{block: "center", inline: "center"}, expectedX.inlineCenter, expectedY.blockCenter],
|
||||
[{block: "center", inline: "end"}, expectedX.inlineEnd, expectedY.blockCenter],
|
||||
[{block: "end", inline: "start"}, expectedX.inlineStart, expectedY.blockEnd],
|
||||
[{block: "end", inline: "center"}, expectedX.inlineCenter, expectedY.blockEnd],
|
||||
[{block: "end", inline: "end"}, expectedX.inlineEnd, expectedY.blockEnd],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${JSON.stringify(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers vertical-lr and rtl direction</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scroll-an-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
overflow: scroll;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<!-- ROW-1 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-2 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-3 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// In vertical-lr mode and rtl direction, X corresponds to the block axis
|
||||
// and is oriented rightward. Y corresponds to the inline axis and is oriented
|
||||
// upward. So the beginning edges are the bottom and left edges and the ending
|
||||
// edges are the top and right edges.
|
||||
|
||||
// According to the spec, y be min(0, max(y, element padding edge height - element scrolling area height)).
|
||||
// So y is nonpositive and decreases upward.
|
||||
|
||||
// This assumes that the horizontal scrollbar
|
||||
// is on the bottom side and the vertical scrollbar is on the right side.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
var scroller_height = scroller.offsetHeight;
|
||||
var box_width = target.offsetWidth;
|
||||
var box_height = target.offsetHeight;
|
||||
|
||||
var expectedX = {
|
||||
blockStart: box_width,
|
||||
blockCenter: (3*box_width - scroller_width)/2 + scrollbar_width/2,
|
||||
blockEnd: 2*box_width - scroller_width + scrollbar_width,
|
||||
};
|
||||
|
||||
var expectedY = {
|
||||
inlineStart: -box_height,
|
||||
inlineCenter: -((3*box_height - scroller_height)/2) - scrollbar_width/2,
|
||||
inlineEnd: -(2*box_height - scroller_height) - scrollbar_width,
|
||||
};
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
|
||||
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
|
||||
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
|
||||
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
|
||||
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
|
||||
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
|
||||
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
|
||||
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
|
||||
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${JSON.stringify(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers vertical-lr writing mode</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
writing-mode: vertical-lr;
|
||||
overflow: scroll;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<!-- ROW-1 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-2 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-3 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// In vertical-lr mode, X corresponds to the block axis and is oriented
|
||||
// rightward. Y corresponds to the inline axis and is oriented downward.
|
||||
// So the beginning edges are the top and left edges and the ending
|
||||
// edges are the bottom and right edges.
|
||||
|
||||
// This assumes that the horizontal scrollbar is on the bottom side and
|
||||
// the vertical scrollbar is on the right side.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
var scroller_height = scroller.offsetHeight;
|
||||
var box_width = target.offsetWidth;
|
||||
var box_height = target.offsetHeight;
|
||||
|
||||
var expectedX = {
|
||||
blockStart: box_width,
|
||||
blockCenter: (3*box_width - scroller_width)/2 + (scrollbar_width/2),
|
||||
blockEnd: (2*box_width) - scroller_width + scrollbar_width,
|
||||
};
|
||||
|
||||
var expectedY = {
|
||||
inlineStart: box_height,
|
||||
inlineCenter: ((3*box_height - scroller_height)/2) + (scrollbar_width/2),
|
||||
inlineEnd: ((2*box_height) - scroller_height) + scrollbar_width,
|
||||
};
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
|
||||
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
|
||||
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
|
||||
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
|
||||
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
|
||||
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
|
||||
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
|
||||
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
|
||||
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${JSON.stringify(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -55,7 +55,11 @@
|
|||
<script>
|
||||
// In vertical-rl mode, X corresponds to the block axis and is oriented
|
||||
// leftward. Y corresponds to the inline axis and is oriented downward.
|
||||
// So the beginning edges are the top and right edges and the ending
|
||||
// edges are the bottom and left edges.
|
||||
|
||||
// This assumes that the horizontal scrollbar is on the bottom side.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
|
@ -102,17 +106,6 @@ if(scroller.scrollLeft === 0) {
|
|||
};
|
||||
}
|
||||
|
||||
// This formats dict as a string suitable as test name.
|
||||
// format_value() is provided by testharness.js,
|
||||
// which also preserves sign for -0.
|
||||
function format_dict(dict) {
|
||||
const props = [];
|
||||
for (let prop in dict) {
|
||||
props.push(`${prop}: ${format_value(dict[prop])}`);
|
||||
}
|
||||
return `{${props.join(", ")}}`;
|
||||
}
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
|
||||
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
|
||||
|
|
@ -129,7 +122,7 @@ function format_dict(dict) {
|
|||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${format_dict(input)})`);
|
||||
}, `scrollIntoView(${JSON.stringify(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue