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

Update web-platform-tests to revision cfada7e6cb379699fa94c7ed8fcb97082327e10c

Browse source
This commit is contained in:
WPT Sync Bot 2019-07-31 10:22:21 +00:00
parent 87e7e3d429
commit 06b00da16b
179 changed files with 6103 additions and 1186 deletions
Download patch file Download diff file Expand all files Collapse all files

9
tests/wpt/web-platform-tests/css/CSS2/floats/zero-available-space-float-positioning.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="width: 0px;">
<div style="float: left; width: 100px; height: 50px; background: green;"></div>
<div style="float: left; width: 100px; height: 50px; background: green;"></div>
</div>

9
tests/wpt/web-platform-tests/css/css-flexbox/parsing/flex-basis-computed.html
View file

@ -19,10 +19,15 @@
<div id="target"></div>
<script>
test_computed_value("flex-basis", "1px");
test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px");
test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px");
test_computed_value("flex-basis", "400%");
test_computed_value("flex-basis", "auto");
test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px");
test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px");
test_computed_value("flex-basis", "calc(10%)", "10%");
// https://github.com/w3c/csswg-drafts/issues/3482
test_computed_value("flex-basis", "calc(0% + 10px)", "calc(0% + 10px)");
test_computed_value("flex-basis", "calc(10% + 0px)", "10%");
</script>
</body>
</html>

15
tests/wpt/web-platform-tests/css/css-position/hypothetical-dynamic-change-001-ref.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<title>CSS test reference</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
.ancestor {
width: 100px;
height: 100px;
position: fixed;
left: 100px;
top: 0;
background-color: green;
}
</style>
<div class="ancestor"></div>

30
tests/wpt/web-platform-tests/css/css-position/hypothetical-dynamic-change-001.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html>
<title>CSS test: movement of fixed-position ancestor correctly moves fixed-position descendant depending on the static position</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details">
<link rel="match" href="hypothetical-dynamic-change-001-ref.html">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
.ancestor, .child {
position: fixed;
width: 100px;
height: 100px;
background-color: green;
/* NOTE: child remains auto-positioned */
}
.ancestor {
left: 0;
top: 0;
background-color: red;
}
</style>
<div class="ancestor">
<div class="child"></div>
</div>
<script>
onload = function() {
let ancestor = document.querySelector(".ancestor");
window.unused = ancestor.getBoundingClientRect();
ancestor.style.left = "100px";
}
</script>

33
tests/wpt/web-platform-tests/css/css-position/hypothetical-dynamic-change-002.html Normal file
View file

@ -0,0 +1,33 @@
<!doctype html>
<title>CSS test: movement of absolute-position ancestor correctly moves fixed-position descendant depending on the static position</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details">
<link rel="match" href="hypothetical-dynamic-change-001-ref.html">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
.ancestor, .child {
width: 100px;
height: 100px;
background-color: green;
}
.child {
position: fixed;
/* NOTE: child remains auto-positioned */
}
.ancestor {
position: absolute;
left: 0;
top: 0;
background-color: red;
}
</style>
<div class="ancestor">
<div class="child"></div>
</div>
<script>
onload = function() {
let ancestor = document.querySelector(".ancestor");
window.unused = ancestor.getBoundingClientRect();
ancestor.style.left = "100px";
}
</script>

34
tests/wpt/web-platform-tests/css/css-position/hypothetical-dynamic-change-003.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<title>CSS test: movement of relative-position ancestor correctly moves fixed-position descendant depending on the static position</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details">
<link rel="match" href="hypothetical-dynamic-change-001-ref.html">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
body { margin: 0 }
.ancestor, .child {
width: 100px;
height: 100px;
background-color: green;
}
.child {
position: fixed;
/* NOTE: child remains auto-positioned */
}
.ancestor {
position: relative;
left: 0;
top: 0;
background-color: red;
}
</style>
<div class="ancestor">
<div class="child"></div>
</div>
<script>
onload = function() {
let ancestor = document.querySelector(".ancestor");
window.unused = ancestor.getBoundingClientRect();
ancestor.style.left = "100px";
}
</script>

38
tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
View file

@ -142,3 +142,41 @@ test(function() {
assert_equals(computedStyle.transitionProperty, 'water');
}, "A var() cycle between a syntax:'*' property and an unregistered property is handled correctly.");
</script>
<style>
#test5_parent {
--registered-5-c:foo;
--registered-5-d:bar;
--registered-5-e:baz;
color: green;
}
#test5 {
--registered-5-a:var(--registered-5-b,hello);
--registered-5-b:var(--registered-5-a,world);
--registered-5-c:var(--registered-5-a);
--registered-5-d:var(--registered-5-b);
--registered-5-e:var(--unknown);
color: var(--registered-5-e);
}
</style>
<div id=test5_parent>
<div id=test5></div>
</div>
<script>
test(function() {
CSS.registerProperty({name: '--registered-5-a', syntax: '*', inherits: true});
CSS.registerProperty({name: '--registered-5-b', syntax: '*', inherits: true});
CSS.registerProperty({name: '--registered-5-c', syntax: '*', inherits: true});
CSS.registerProperty({name: '--registered-5-d', syntax: '*', inherits: true});
CSS.registerProperty({name: '--registered-5-e', syntax: '*', inherits: true});
let computedStyle = getComputedStyle(test5);
assert_equals(computedStyle.getPropertyValue('--registered-5-a'), '');
assert_equals(computedStyle.getPropertyValue('--registered-5-b'), '');
assert_equals(computedStyle.getPropertyValue('--registered-5-c'), 'foo');
assert_equals(computedStyle.getPropertyValue('--registered-5-d'), 'bar');
assert_equals(computedStyle.getPropertyValue('--registered-5-e'), 'baz');
assert_equals(computedStyle.getPropertyValue('color'), 'rgb(0, 128, 0)');
}, "Invalid at computed-value time triggers 'unset' behavior");
</script>

71
tests/wpt/web-platform-tests/css/css-scroll-anchoring/position-change-heuristic-display-none-to-abspos-change.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1568778">
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#suppression-triggers">
<style>
#hidden {
display: none;
background: red;
}
#spacer {
height: calc(100vh + 200px); /* At least 200px of scroll range */
}
</style>
<table>
<thead>
<tr>
<th>1
<th>1
<th>1
<th>1
</tr>
</thead>
<thead id="hidden">
<tr>
<th>1
<th>1
<th>1
<th>1
</tr>
</thead>
<tbody>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
</tbody>
</table>
<div id="spacer"></div>
<script>
let isFirstEvent = true;
const targetScrollPosition = 100;
const hidden = document.querySelector("#hidden");
const t = async_test("Scroll offset doesn't get stuck in infinite scroll events when an element goes back and forth to display: none while changing abspos style");
window.onscroll = t.step_func(function() {
hidden.style.display = "block";
hidden.style.position = "absolute";
hidden.style.visibility = "hidden";
window.unused = hidden.offsetHeight;
hidden.style.display = "";
hidden.style.position = "";
hidden.style.visibility = "";
assert_true(isFirstEvent, "Shouldn't get more than one scroll event");
isFirstEvent = false;
requestAnimationFrame(t.step_func(function() {
requestAnimationFrame(t.step_func_done(function() {
assert_equals(document.scrollingElement.scrollTop, targetScrollPosition);
}));
}));
});
window.onload = t.step_func(function() {
window.scrollTo(0, targetScrollPosition);
});
</script>

57
tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/computed/get-auto-min-size.html Normal file
View file

@ -0,0 +1,57 @@
<!doctype html>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#get-a-value-from-a-stylepropertymap">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">
<meta name="assert" content="Tests computed StylePropertyMap.get of auto minimum sizes." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<div style="display: flex;">
<div id="flex-inflow"></div>
<div id="flex-absolute" style="position: absolute;"></div>
</div>
<div style="display: grid;">
<div id="grid-inflow"></div>
<div id="grid-absolute" style="position: absolute;"></div>
</div>
<div id="block-inflow"></div>
<div id="block-absolute" style="position: absolute;"></div>
<script>
'use strict';
test(t => {
const targetMap = document.getElementById('flex-inflow').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An inflow flex-item computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('flex-absolute').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An absolute flex-child computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('grid-inflow').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An inflow grid-item computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('grid-absolute').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An absolute grid-child computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('block-inflow').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An inflow block computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('block-absolute').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An absolute block computed StylePropertyMap.get reports the auto minimum size correctly.');
</script>

BIN
tests/wpt/web-platform-tests/css/css-writing-modes/support/wm-propagation-body-035-exp-res.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

37
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-003-ref.xht
View file

@ -1,37 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<meta content="image" name="flags" />
<style type="text/css"><![CDATA[
img
{
vertical-align: top;
}
img + img
{
padding-left: 1em;
}
]]></style>
</head>
<body>
<div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled" /></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
</body>
</html>

51
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-006.xht
View file

@ -1,51 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102175" title="Bug 1102175: &lt;body&gt; with writing-mode: vertical-rl does not align children to the right " />
<link rel="match" href="block-flow-direction-025-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
</body>
</html>

49
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-008.xht
View file

@ -1,49 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="match" href="block-flow-direction-025-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
</body>
</html>

48
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-010.xht
View file

@ -1,48 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="match" href="wm-propagation-body-003-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
]]></style>
</head>
<body>
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled" /></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
</body>
</html>

49
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-011.xht
View file

@ -1,49 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="match" href="wm-propagation-body-003-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: vertical-lr;
}
div
{
background-color: orange;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<div></div>
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled" /></p>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
</body>
</html>

50
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-015.xht
View file

@ -1,50 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="match" href="block-flow-direction-025-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: vertical-lr;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
</body>
</html>

81
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-032.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

27
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-033-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
img
{
vertical-align: top;
}
img + img
{
padding-left: 1em;
}
</style>
<div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->

84
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-033.html Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html::before
{
background-color: orange;
content: "";
display: block;
height: 100px;
margin-left: 8px;
margin-top: 8px;
margin-right: 1em;
width: 100px;
}
body
{
writing-mode: vertical-lr;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

81
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-034.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

34
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-035-ref.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div
{
bottom: 8px;
left: auto;
position: absolute;
}
img
{
vertical-align: bottom;
}
img + img
{
padding-left: 1em;
}
</style>
<div><img src="support/swatch-teal.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->

81
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-035.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-035-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
body
{
writing-mode: sideways-lr;
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

87
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-036.html Normal file
View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102175" title="Bug 1102175: &lt;body&gt; with writing-mode: vertical-rl does not align children to the right ">
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

89
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-037.html Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: horizontal-tb;
}
html::before
{
background-color: orange;
content: "";
display: block;
height: 100px;
margin-left: 8px;
margin-top: 8px;
margin-right: 1em;
width: 100px;
}
body
{
writing-mode: vertical-lr;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-038.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-039.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-035-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: sideways-lr;
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

85
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-040.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-041.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: vertical-lr;
}
div
{
background-color: orange;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

26
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-042-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
html
{
writing-mode: vertical-rl;
}
</style>
<img id="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled">
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<p style=margin-top:-8px>This text must be written sideways: vertically, with letters rotated 90 degrees.

93
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-042.html Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-042-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'sideways-rl', the test checks that a simple text is not affected by 'text-orientation: upright' since 'text-orientation: upright' should have no impact and no rendering effect on it.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-rl;
}
html::after
{
content: "This text must be written sideways: vertically, with letters rotated 90 degrees.";
text-orientation: upright;
/* 'text-orientation: upright' has no effect with 'sideways-rl', but does with 'vertical-rl' */
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-043.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-035-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: sideways-lr;
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

27
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-044-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
img#orange-square
{
padding-right: 16px;
vertical-align: top;
}
</style>
<p><img id="orange-square" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<div style=margin-left:-8px>This text must be written horizontally.</div>

91
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-044.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-044-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'horizontal-tb', the test checks that a generated text's inline axis is indeed horizontal and not vertical.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-lr;
}
html::after
{
content: "This text must be written horizontally.";
display: block;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<p><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></p>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-045.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-lr;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-046.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-lr;
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

36
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-047-ref.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
html
{
writing-mode: sideways-lr;div
}
img
{
vertical-align: bottom;
}
div
{
margin-left: 1em;
margin-bottom: -8px;
}
</style>
<img src="support/swatch-teal.png" width="100" height="100" alt="Image download support must be enabled">
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled"></p>
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<div>This text must be written sideways: vertically, with letters rotated 90 degrees.</div>

99
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-047.html Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-047-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-lr;
}
body
{
writing-mode: sideways-lr;
}
html::after
{
content: "This text must be written sideways: vertically, with letters rotated 90 degrees.";
text-orientation: upright; /* this has no effect with sideways-rl, but does with vertical-rl*/
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
img
{
display: block;
margin-left: 1em;
margin-right: 1em;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

85
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-048.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-rl;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

48
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-049-ref.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
html
{
writing-mode: vertical-rl;
}
body
{
margin: 0px;
}
p
{
text-orientation: upright;
}
img
{
padding-top: 8px;
}
img#blue
{
padding-left: 16px;
padding-right: 8px;
}
</style>
<img id="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled">
<div><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<p>This text must be vertical, with letters upright.

93
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-049.html Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-049-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'vertical-rl', the test checks that a simple text is affected by 'text-orientation: upright' since 'text-orientation: upright' should have a rendering effect on it.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-rl;
}
html::after
{
content: "This text must be vertical, with letters upright.";
text-orientation: upright;
/* 'text-orientation: upright' has no effect with 'sideways-rl', but does with 'vertical-rl' */
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-050.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-rl;
}
body
{
writing-mode: vertical-lr;
}
div
{
background-color: orange;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-051.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-035-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-rl;
}
body
{
writing-mode: sideways-lr;
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

85
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-052.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-lr;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-053.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-lr;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

32
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-054-ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
html
{
writing-mode: vertical-lr;
}
div
{
text-orientation: upright;
}
</style>
<img id="orange" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled">
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<div>This text must be vertical, with letters upright.</div>

94
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-054.html Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-054-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'vertical-lr', the test checks that a simple text is affected by 'text-orientation: upright' since 'text-orientation: upright' should have a rendering effect on it.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-lr;
}
html::after
{
content: "This text must be vertical, with letters upright.";
text-orientation: upright;
/* 'text-orientation: upright' has no effect with 'sideways-lr', but does with 'vertical-lr' */
margin-top: 8px;
}
body
{
writing-mode: vertical-lr;
}
div
{
background-color: orange;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

86
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-055.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-lr;
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

32
tests/wpt/web-platform-tests/css/cssom-view/elementFromPoint-list-001.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Test elementFromPoint for list-item</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
ul.inside {
list-style-position: inside;
}
</style>
<body>
<ul>
<li>Outside 1</li>
<li>Outside 2</li>
<li>Outside 3</li>
</ul>
<ul class="inside">
<li>Inside 1</li>
<li>Inside 2</li>
<li>Inside 3</li>
</ul>
<script>
for (let li of document.getElementsByTagName('li')) {
test(() => {
let bounds = li.getBoundingClientRect();
let target = document.elementFromPoint(bounds.x + 1, bounds.y + 1);
assert_equals(target, li);
}, `<li>${li.textContent}</li>`);
}
</script>
</body>

106
tests/wpt/web-platform-tests/css/cssom-view/scrollIntoView-sideways-lr-writing-mode-and-rtl-direction.html Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE html>
<title>CSSOM View - scrollIntoView considers sideways-lr writing mode 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">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.box {
float: left;
width: 200px;
height: 200px;
}
#scroller {
writing-mode: sideways-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 sideways-lr mode and rtl direction, 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>

108
tests/wpt/web-platform-tests/css/cssom-view/scrollIntoView-sideways-lr-writing-mode.html Normal file
View file

@ -0,0 +1,108 @@
<!DOCTYPE html>
<title>CSSOM View - scrollIntoView considers sideways-rl 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: sideways-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 sideways-lr mode, 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>

111
tests/wpt/web-platform-tests/css/cssom-view/scrollIntoView-sideways-rl-writing-mode-and-rtl-direction.html Normal file
View file

@ -0,0 +1,111 @@
<!DOCTYPE html>
<title>CSSOM View - scrollIntoView considers sideways-rl writing mode 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">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.box {
float: left;
width: 200px;
height: 200px;
}
#scroller {
writing-mode: sideways-rl;
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 sideways-rl mode and rtl direction, X corresponds to the block axis and is oriented leftward.
// Y corresponds to the inline axis and is oriented upward.
// So the beginning edges are the bottom and right edges and the ending edges are the top and left edges.
// According to the spec, x be min(0, max(x, element padding edge width - element scrolling area width)).
// So x is nonpositive and decreases leftward.
// 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 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 = {
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>

108
tests/wpt/web-platform-tests/css/cssom-view/scrollIntoView-sideways-rl-writing-mode.html Normal file
View file

@ -0,0 +1,108 @@
<!DOCTYPE html>
<title>CSSOM View - scrollIntoView considers sideways-rl 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: sideways-rl;
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 sideways-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.
// According to the spec, x be 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 = {
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>

17
tests/wpt/web-platform-tests/css/motion/offset-anchor-transform-box-fill-box-001.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>CSS Motion Path: Default offset-anchor with transform-box: fill-box</title>
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
<link rel="match" href="offset-anchor-transform-box-fill-box-ref.html">
<meta name="assert" content="Tests default offset-anchor together with a fill-box transform-box">
<style>
#target {
transform-box: fill-box;
transform-origin: 25% 25%;
offset-path: path("M75,-25v100");
offset-distance: 50%;
}
</style>
<svg width="400" height="400">
<rect width="100" height="100" fill="red"/>
<rect id="target" x="150" y="100" width="100" height="100" fill="green"/>
</svg>

0
tests/wpt/web-platform-tests/css/motion/offset-anchor-transform-box-fill-box.html → tests/wpt/web-platform-tests/css/motion/offset-anchor-transform-box-fill-box-002.html
View file

40
tests/wpt/web-platform-tests/css/selectors/selectors-case-sensitive-001.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<title>Test element names are case-insensitive only in ASCII range</title>
<link rel="help" href="https://www.w3.org/TR/selectors-4/#case-sensitive">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<style>
\212A {
display: block;
background: lime;
width: 200px;
height: 100px;
}
</style>
<body>
<p>You should see a green square below.</p>
<div id="container"></div>
<script>
// Insert from JavaScript to avoid parser doing something special.
let test_element = document.createElement('\u212A');
container.appendChild(test_element);
let test_element_with_ns = document.createElementNS('https://dummy.ns', '\u212A');
container.appendChild(test_element_with_ns);
test(() => {
assert_equals(test_element.offsetHeight, 100);
}, 'CSS selector should match for Unicode uppercase element');
test(() => {
// Elements in different namespace cannot compute style or height.
// Test the height of the container instead.
assert_equals(container.offsetHeight, 200);
}, 'Elements with namespace should work the same way');
test(() => {
let e = document.querySelector('k');
assert_equals(e, null);
}, '`querySelector` should not use Unicode case-foldering');
</script>
</body>