mirror of
https://github.com/servo/servo.git
synced 2025-08-08 06:55:31 +01:00
Update web-platform-tests to revision cfada7e6cb379699fa94c7ed8fcb97082327e10c
This commit is contained in:
WPT Sync Bot
parent
87e7e3d429
commit
06b00da16b
179 changed files with 6103 additions and 1186 deletions
|
|
@ -31,9 +31,16 @@ function wait_for_message(iframe) {
|
|||
const script =
|
||||
'<script>' +
|
||||
' window.onmessage = () => {' +
|
||||
' indexedDB.databases().then(' +
|
||||
' () => window.parent.postMessage({result: "no exception"}, "*"),' +
|
||||
' ex => window.parent.postMessage({result: ex.name}, "*"));' +
|
||||
' try { ' +
|
||||
' if (!indexedDB || !indexedDB.databases) {' +
|
||||
' window.parent.postMessage({result: "indexedDB.databases undefined"}, "*")' +
|
||||
' }' +
|
||||
' indexedDB.databases().then(' +
|
||||
' () => window.parent.postMessage({result: "no exception"}, "*"),' +
|
||||
' ex => window.parent.postMessage({result: ex.name}, "*"));' +
|
||||
' } catch(e) { ' +
|
||||
' window.parent.postMessage({result: e.name + " thrown, not rejected"}, "*")' +
|
||||
' }'+
|
||||
' };' +
|
||||
'<\/script>';
|
||||
|
||||
|
|
@ -50,6 +57,6 @@ promise_test(async t => {
|
|||
iframe.contentWindow.postMessage({}, '*');
|
||||
const message = await wait_for_message(iframe);
|
||||
assert_equals(message.result, 'SecurityError',
|
||||
'Exception should be SecurityError');
|
||||
'Promise should be rejected with SecurityError');
|
||||
}, 'IDBFactory.databases() in sandboxed iframe should reject');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -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>
|
||||
|
|
@ -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: <body> 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 <body> 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>
|
||||
|
|
@ -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 <body> 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>
|
||||
|
|
@ -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 <body> 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>
|
||||
|
|
@ -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 <body> 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>
|
||||
|
|
@ -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 <body> 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>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -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.
|
||||
-->
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -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.
|
||||
-->
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-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-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 <body> 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>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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: <body> 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 <body> 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>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-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-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 <body> 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>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -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.
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-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-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 <body> 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-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-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 <body> 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>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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-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 <body> 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>
|
||||
|
|
@ -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.
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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-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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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-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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-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-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 <body> 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>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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-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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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-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 <body> 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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-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 <body> 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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<!--
|
||||
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 <body> 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,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>
|
||||
|
|
@ -28,8 +28,6 @@
|
|||
var frameWin = document.getElementById("srcdoc-iframe").contentWindow;
|
||||
assert_equals(frameWin.location.href, "about:srcdoc");
|
||||
assert_equals(frameWin.scrollY, 0, "Should not have scrolled yet");
|
||||
frameWin.location.hash = "";
|
||||
assert_equals(frameWin.location.href, "about:srcdoc#", "Setting an empty hash should result in an empty fragment, not no fragment.");
|
||||
frameWin.location.hash = "test";
|
||||
assert_equals(frameWin.location.href, "about:srcdoc#test");
|
||||
assert_true(frameWin.scrollY > frameWin.innerHeight,
|
||||
|
|
|
|||
|
|
@ -30,6 +30,11 @@
|
|||
<option style="display:none"></option>
|
||||
<option></option>
|
||||
</select>
|
||||
|
||||
<select id=minus-one>
|
||||
<option value=1>1</option>
|
||||
<option value=2>2</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
|
|
@ -38,6 +43,10 @@ function assertSelectedIndex(select, value) {
|
|||
assert_equals(select.options.selectedIndex, value);
|
||||
}
|
||||
|
||||
function assertSelectValue(select, value) {
|
||||
assert_equals(select.value, value);
|
||||
}
|
||||
|
||||
test(function () {
|
||||
var select = document.getElementById('empty');
|
||||
assertSelectedIndex(select, -1);
|
||||
|
|
@ -120,4 +129,15 @@ test(function () {
|
|||
select.options[1].selected = false;
|
||||
assertSelectedIndex(select, 0);
|
||||
}, "reset to display:none");
|
||||
|
||||
test(function() {
|
||||
var select = document.getElementById("minus-one");
|
||||
assertSelectedIndex(select, 0);
|
||||
|
||||
select.selectedIndex = -1;
|
||||
|
||||
assertSelectedIndex(select, -1);
|
||||
assertSelectValue(select, "");
|
||||
|
||||
}, "set selectedIndex=-1");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ enum SupportedType {
|
|||
};
|
||||
|
||||
[Constructor, Exposed=Window]
|
||||
|
||||
interface XMLSerializer {
|
||||
DOMString serializeToString(Node root);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,16 +8,6 @@ partial namespace CSS {
|
|||
[SameObject] readonly attribute Worklet animationWorklet;
|
||||
};
|
||||
|
||||
[Exposed=AnimationWorklet, Global=AnimationWorklet, Constructor (optional any options)]
|
||||
interface StatelessAnimator {
|
||||
};
|
||||
|
||||
[Exposed=AnimationWorklet, Global=AnimationWorklet,
|
||||
Constructor (optional any options, optional any state)]
|
||||
interface StatefulAnimator {
|
||||
any state();
|
||||
};
|
||||
|
||||
[ Global=(Worklet,AnimationWorklet), Exposed=AnimationWorklet ]
|
||||
interface AnimationWorkletGlobalScope : WorkletGlobalScope {
|
||||
void registerAnimator(DOMString name, AnimatorInstanceConstructor animatorCtor);
|
||||
|
|
|
|||
|
|
@ -4,55 +4,54 @@
|
|||
// Source: Geolocation API Specification 2nd Edition (https://www.w3.org/TR/geolocation-API/)
|
||||
|
||||
partial interface Navigator {
|
||||
readonly attribute Geolocation geolocation;
|
||||
};
|
||||
readonly attribute Geolocation geolocation;
|
||||
};
|
||||
|
||||
[NoInterfaceObject]
|
||||
interface Geolocation {
|
||||
interface Geolocation {
|
||||
void getCurrentPosition(PositionCallback successCallback,
|
||||
optional PositionErrorCallback errorCallback,
|
||||
optional PositionOptions options);
|
||||
|
||||
void getCurrentPosition(PositionCallback successCallback,
|
||||
optional PositionErrorCallback errorCallback,
|
||||
optional PositionOptions options);
|
||||
long watchPosition(PositionCallback successCallback,
|
||||
optional PositionErrorCallback errorCallback,
|
||||
optional PositionOptions options);
|
||||
|
||||
long watchPosition(PositionCallback successCallback,
|
||||
optional PositionErrorCallback errorCallback,
|
||||
optional PositionOptions options);
|
||||
void clearWatch(long watchId);
|
||||
};
|
||||
|
||||
void clearWatch(long watchId);
|
||||
};
|
||||
callback PositionCallback = void (Position position);
|
||||
|
||||
callback PositionCallback = void (Position position);
|
||||
|
||||
callback PositionErrorCallback = void (PositionError positionError);
|
||||
callback PositionErrorCallback = void (PositionError positionError);
|
||||
|
||||
dictionary PositionOptions {
|
||||
boolean enableHighAccuracy = false;
|
||||
[Clamp] unsigned long timeout = 0xFFFFFFFF;
|
||||
[Clamp] unsigned long maximumAge = 0;
|
||||
};
|
||||
boolean enableHighAccuracy = false;
|
||||
[Clamp] unsigned long timeout = 0xFFFFFFFF;
|
||||
[Clamp] unsigned long maximumAge = 0;
|
||||
};
|
||||
|
||||
[NoInterfaceObject]
|
||||
interface Position {
|
||||
readonly attribute Coordinates coords;
|
||||
readonly attribute DOMTimeStamp timestamp;
|
||||
};
|
||||
interface Position {
|
||||
readonly attribute Coordinates coords;
|
||||
readonly attribute DOMTimeStamp timestamp;
|
||||
};
|
||||
|
||||
[NoInterfaceObject]
|
||||
interface Coordinates {
|
||||
readonly attribute double latitude;
|
||||
readonly attribute double longitude;
|
||||
readonly attribute double? altitude;
|
||||
readonly attribute double accuracy;
|
||||
readonly attribute double? altitudeAccuracy;
|
||||
readonly attribute double? heading;
|
||||
readonly attribute double? speed;
|
||||
};
|
||||
interface Coordinates {
|
||||
readonly attribute double latitude;
|
||||
readonly attribute double longitude;
|
||||
readonly attribute double? altitude;
|
||||
readonly attribute double accuracy;
|
||||
readonly attribute double? altitudeAccuracy;
|
||||
readonly attribute double? heading;
|
||||
readonly attribute double? speed;
|
||||
};
|
||||
|
||||
[NoInterfaceObject]
|
||||
interface PositionError {
|
||||
const unsigned short PERMISSION_DENIED = 1;
|
||||
const unsigned short POSITION_UNAVAILABLE = 2;
|
||||
const unsigned short TIMEOUT = 3;
|
||||
readonly attribute unsigned short code;
|
||||
readonly attribute DOMString message;
|
||||
};
|
||||
interface PositionError {
|
||||
const unsigned short PERMISSION_DENIED = 1;
|
||||
const unsigned short POSITION_UNAVAILABLE = 2;
|
||||
const unsigned short TIMEOUT = 3;
|
||||
readonly attribute unsigned short code;
|
||||
readonly attribute DOMString message;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Media Capabilities (https://wicg.github.io/media-capabilities/)
|
||||
// Source: Media Capabilities (https://w3c.github.io/media-capabilities/)
|
||||
|
||||
dictionary MediaConfiguration {
|
||||
VideoConfiguration video;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Media Playback Quality (https://w3c.github.io/media-playback-quality/)
|
||||
|
||||
partial interface HTMLVideoElement {
|
||||
VideoPlaybackQuality getVideoPlaybackQuality();
|
||||
};
|
||||
|
||||
interface VideoPlaybackQuality {
|
||||
readonly attribute DOMHighResTimeStamp creationTime;
|
||||
readonly attribute unsigned long corruptedVideoFrames;
|
||||
readonly attribute unsigned long droppedVideoFrames;
|
||||
readonly attribute unsigned long totalVideoFrames;
|
||||
};
|
||||
|
|
@ -8,185 +8,184 @@
|
|||
Constructor(MediaStream stream),
|
||||
Constructor(sequence<MediaStreamTrack> tracks)]
|
||||
interface MediaStream : EventTarget {
|
||||
readonly attribute DOMString id;
|
||||
sequence<MediaStreamTrack> getAudioTracks();
|
||||
sequence<MediaStreamTrack> getVideoTracks();
|
||||
sequence<MediaStreamTrack> getTracks();
|
||||
MediaStreamTrack? getTrackById(DOMString trackId);
|
||||
void addTrack(MediaStreamTrack track);
|
||||
void removeTrack(MediaStreamTrack track);
|
||||
MediaStream clone();
|
||||
readonly attribute boolean active;
|
||||
attribute EventHandler onaddtrack;
|
||||
attribute EventHandler onremovetrack;
|
||||
readonly attribute DOMString id;
|
||||
sequence<MediaStreamTrack> getAudioTracks();
|
||||
sequence<MediaStreamTrack> getVideoTracks();
|
||||
sequence<MediaStreamTrack> getTracks();
|
||||
MediaStreamTrack? getTrackById(DOMString trackId);
|
||||
void addTrack(MediaStreamTrack track);
|
||||
void removeTrack(MediaStreamTrack track);
|
||||
MediaStream clone();
|
||||
readonly attribute boolean active;
|
||||
attribute EventHandler onaddtrack;
|
||||
attribute EventHandler onremovetrack;
|
||||
};
|
||||
|
||||
[Exposed=Window]
|
||||
interface MediaStreamTrack : EventTarget {
|
||||
readonly attribute DOMString kind;
|
||||
readonly attribute DOMString id;
|
||||
readonly attribute DOMString label;
|
||||
attribute boolean enabled;
|
||||
readonly attribute boolean muted;
|
||||
attribute EventHandler onmute;
|
||||
attribute EventHandler onunmute;
|
||||
readonly attribute MediaStreamTrackState readyState;
|
||||
attribute EventHandler onended;
|
||||
MediaStreamTrack clone();
|
||||
void stop();
|
||||
MediaTrackCapabilities getCapabilities();
|
||||
MediaTrackConstraints getConstraints();
|
||||
MediaTrackSettings getSettings();
|
||||
Promise<void> applyConstraints(optional MediaTrackConstraints constraints);
|
||||
readonly attribute DOMString kind;
|
||||
readonly attribute DOMString id;
|
||||
readonly attribute DOMString label;
|
||||
attribute boolean enabled;
|
||||
readonly attribute boolean muted;
|
||||
attribute EventHandler onmute;
|
||||
attribute EventHandler onunmute;
|
||||
readonly attribute MediaStreamTrackState readyState;
|
||||
attribute EventHandler onended;
|
||||
MediaStreamTrack clone();
|
||||
void stop();
|
||||
MediaTrackCapabilities getCapabilities();
|
||||
MediaTrackConstraints getConstraints();
|
||||
MediaTrackSettings getSettings();
|
||||
Promise<void> applyConstraints(optional MediaTrackConstraints constraints);
|
||||
};
|
||||
|
||||
enum MediaStreamTrackState {
|
||||
"live",
|
||||
"ended"
|
||||
"live",
|
||||
"ended"
|
||||
};
|
||||
|
||||
dictionary MediaTrackSupportedConstraints {
|
||||
boolean width = true;
|
||||
boolean height = true;
|
||||
boolean aspectRatio = true;
|
||||
boolean frameRate = true;
|
||||
boolean facingMode = true;
|
||||
boolean resizeMode = true;
|
||||
boolean sampleRate = true;
|
||||
boolean sampleSize = true;
|
||||
boolean echoCancellation = true;
|
||||
boolean autoGainControl = true;
|
||||
boolean noiseSuppression = true;
|
||||
boolean latency = true;
|
||||
boolean channelCount = true;
|
||||
boolean deviceId = true;
|
||||
boolean groupId = true;
|
||||
boolean width = true;
|
||||
boolean height = true;
|
||||
boolean aspectRatio = true;
|
||||
boolean frameRate = true;
|
||||
boolean facingMode = true;
|
||||
boolean resizeMode = true;
|
||||
boolean sampleRate = true;
|
||||
boolean sampleSize = true;
|
||||
boolean echoCancellation = true;
|
||||
boolean autoGainControl = true;
|
||||
boolean noiseSuppression = true;
|
||||
boolean latency = true;
|
||||
boolean channelCount = true;
|
||||
boolean deviceId = true;
|
||||
boolean groupId = true;
|
||||
};
|
||||
|
||||
dictionary MediaTrackCapabilities {
|
||||
ULongRange width;
|
||||
ULongRange height;
|
||||
DoubleRange aspectRatio;
|
||||
DoubleRange frameRate;
|
||||
sequence<DOMString> facingMode;
|
||||
sequence<DOMString> resizeMode;
|
||||
ULongRange sampleRate;
|
||||
ULongRange sampleSize;
|
||||
sequence<boolean> echoCancellation;
|
||||
sequence<boolean> autoGainControl;
|
||||
sequence<boolean> noiseSuppression;
|
||||
DoubleRange latency;
|
||||
ULongRange channelCount;
|
||||
DOMString deviceId;
|
||||
DOMString groupId;
|
||||
ULongRange width;
|
||||
ULongRange height;
|
||||
DoubleRange aspectRatio;
|
||||
DoubleRange frameRate;
|
||||
sequence<DOMString> facingMode;
|
||||
sequence<DOMString> resizeMode;
|
||||
ULongRange sampleRate;
|
||||
ULongRange sampleSize;
|
||||
sequence<boolean> echoCancellation;
|
||||
sequence<boolean> autoGainControl;
|
||||
sequence<boolean> noiseSuppression;
|
||||
DoubleRange latency;
|
||||
ULongRange channelCount;
|
||||
DOMString deviceId;
|
||||
DOMString groupId;
|
||||
};
|
||||
|
||||
dictionary MediaTrackConstraints : MediaTrackConstraintSet {
|
||||
sequence<MediaTrackConstraintSet> advanced;
|
||||
sequence<MediaTrackConstraintSet> advanced;
|
||||
};
|
||||
|
||||
dictionary MediaTrackConstraintSet {
|
||||
ConstrainULong width;
|
||||
ConstrainULong height;
|
||||
ConstrainDouble aspectRatio;
|
||||
ConstrainDouble frameRate;
|
||||
ConstrainDOMString facingMode;
|
||||
ConstrainDOMString resizeMode;
|
||||
ConstrainULong sampleRate;
|
||||
ConstrainULong sampleSize;
|
||||
ConstrainBoolean echoCancellation;
|
||||
ConstrainBoolean autoGainControl;
|
||||
ConstrainBoolean noiseSuppression;
|
||||
ConstrainDouble latency;
|
||||
ConstrainULong channelCount;
|
||||
ConstrainDOMString deviceId;
|
||||
ConstrainDOMString groupId;
|
||||
ConstrainULong width;
|
||||
ConstrainULong height;
|
||||
ConstrainDouble aspectRatio;
|
||||
ConstrainDouble frameRate;
|
||||
ConstrainDOMString facingMode;
|
||||
ConstrainDOMString resizeMode;
|
||||
ConstrainULong sampleRate;
|
||||
ConstrainULong sampleSize;
|
||||
ConstrainBoolean echoCancellation;
|
||||
ConstrainBoolean autoGainControl;
|
||||
ConstrainBoolean noiseSuppression;
|
||||
ConstrainDouble latency;
|
||||
ConstrainULong channelCount;
|
||||
ConstrainDOMString deviceId;
|
||||
ConstrainDOMString groupId;
|
||||
};
|
||||
|
||||
dictionary MediaTrackSettings {
|
||||
long width;
|
||||
long height;
|
||||
double aspectRatio;
|
||||
double frameRate;
|
||||
DOMString facingMode;
|
||||
DOMString resizeMode;
|
||||
long sampleRate;
|
||||
long sampleSize;
|
||||
boolean echoCancellation;
|
||||
boolean autoGainControl;
|
||||
boolean noiseSuppression;
|
||||
double latency;
|
||||
long channelCount;
|
||||
DOMString deviceId;
|
||||
DOMString groupId;
|
||||
long width;
|
||||
long height;
|
||||
double aspectRatio;
|
||||
double frameRate;
|
||||
DOMString facingMode;
|
||||
DOMString resizeMode;
|
||||
long sampleRate;
|
||||
long sampleSize;
|
||||
boolean echoCancellation;
|
||||
boolean autoGainControl;
|
||||
boolean noiseSuppression;
|
||||
double latency;
|
||||
long channelCount;
|
||||
DOMString deviceId;
|
||||
DOMString groupId;
|
||||
};
|
||||
|
||||
enum VideoFacingModeEnum {
|
||||
"user",
|
||||
"environment",
|
||||
"left",
|
||||
"right"
|
||||
"user",
|
||||
"environment",
|
||||
"left",
|
||||
"right"
|
||||
};
|
||||
|
||||
enum VideoResizeModeEnum {
|
||||
"none",
|
||||
"crop-and-scale"
|
||||
"none",
|
||||
"crop-and-scale"
|
||||
};
|
||||
|
||||
[Exposed=Window,
|
||||
Constructor(DOMString type, MediaStreamTrackEventInit eventInitDict)]
|
||||
[Exposed=Window, Constructor(DOMString type, MediaStreamTrackEventInit eventInitDict)]
|
||||
interface MediaStreamTrackEvent : Event {
|
||||
[SameObject]
|
||||
readonly attribute MediaStreamTrack track;
|
||||
[SameObject] readonly attribute MediaStreamTrack track;
|
||||
};
|
||||
|
||||
dictionary MediaStreamTrackEventInit : EventInit {
|
||||
required MediaStreamTrack track;
|
||||
required MediaStreamTrack track;
|
||||
};
|
||||
|
||||
partial interface Navigator {
|
||||
[SameObject, SecureContext]
|
||||
readonly attribute MediaDevices mediaDevices;
|
||||
[SameObject, SecureContext] readonly attribute MediaDevices mediaDevices;
|
||||
};
|
||||
|
||||
[Exposed=Window, SecureContext]
|
||||
interface MediaDevices : EventTarget {
|
||||
attribute EventHandler ondevicechange;
|
||||
Promise<sequence<MediaDeviceInfo>> enumerateDevices();
|
||||
attribute EventHandler ondevicechange;
|
||||
Promise<sequence<MediaDeviceInfo>> enumerateDevices();
|
||||
};
|
||||
|
||||
[Exposed=Window, SecureContext]
|
||||
interface MediaDeviceInfo {
|
||||
readonly attribute DOMString deviceId;
|
||||
readonly attribute MediaDeviceKind kind;
|
||||
readonly attribute DOMString label;
|
||||
readonly attribute DOMString groupId;
|
||||
[Default] object toJSON();
|
||||
readonly attribute DOMString deviceId;
|
||||
readonly attribute MediaDeviceKind kind;
|
||||
readonly attribute DOMString label;
|
||||
readonly attribute DOMString groupId;
|
||||
[Default] object toJSON();
|
||||
};
|
||||
|
||||
enum MediaDeviceKind {
|
||||
"audioinput",
|
||||
"audiooutput",
|
||||
"videoinput"
|
||||
"audioinput",
|
||||
"audiooutput",
|
||||
"videoinput"
|
||||
};
|
||||
|
||||
[Exposed=Window] interface InputDeviceInfo : MediaDeviceInfo {
|
||||
MediaTrackCapabilities getCapabilities();
|
||||
[Exposed=Window]
|
||||
interface InputDeviceInfo : MediaDeviceInfo {
|
||||
MediaTrackCapabilities getCapabilities();
|
||||
};
|
||||
|
||||
partial interface Navigator {
|
||||
[SecureContext]
|
||||
void getUserMedia(MediaStreamConstraints constraints, NavigatorUserMediaSuccessCallback successCallback, NavigatorUserMediaErrorCallback errorCallback);
|
||||
[SecureContext] void getUserMedia(MediaStreamConstraints constraints,
|
||||
NavigatorUserMediaSuccessCallback successCallback,
|
||||
NavigatorUserMediaErrorCallback errorCallback);
|
||||
};
|
||||
|
||||
partial interface MediaDevices {
|
||||
MediaTrackSupportedConstraints getSupportedConstraints();
|
||||
Promise<MediaStream> getUserMedia(optional MediaStreamConstraints constraints);
|
||||
MediaTrackSupportedConstraints getSupportedConstraints();
|
||||
Promise<MediaStream> getUserMedia(optional MediaStreamConstraints constraints);
|
||||
};
|
||||
|
||||
dictionary MediaStreamConstraints {
|
||||
(boolean or MediaTrackConstraints) video = false;
|
||||
(boolean or MediaTrackConstraints) audio = false;
|
||||
(boolean or MediaTrackConstraints) video = false;
|
||||
(boolean or MediaTrackConstraints) audio = false;
|
||||
};
|
||||
|
||||
callback NavigatorUserMediaSuccessCallback = void (MediaStream stream);
|
||||
|
|
@ -196,33 +195,33 @@ callback NavigatorUserMediaErrorCallback = void (MediaStreamError error);
|
|||
typedef object MediaStreamError;
|
||||
|
||||
dictionary DoubleRange {
|
||||
double max;
|
||||
double min;
|
||||
double max;
|
||||
double min;
|
||||
};
|
||||
|
||||
dictionary ConstrainDoubleRange : DoubleRange {
|
||||
double exact;
|
||||
double ideal;
|
||||
double exact;
|
||||
double ideal;
|
||||
};
|
||||
|
||||
dictionary ULongRange {
|
||||
[Clamp] unsigned long max;
|
||||
[Clamp] unsigned long min;
|
||||
[Clamp] unsigned long max;
|
||||
[Clamp] unsigned long min;
|
||||
};
|
||||
|
||||
dictionary ConstrainULongRange : ULongRange {
|
||||
[Clamp] unsigned long exact;
|
||||
[Clamp] unsigned long ideal;
|
||||
[Clamp] unsigned long exact;
|
||||
[Clamp] unsigned long ideal;
|
||||
};
|
||||
|
||||
dictionary ConstrainBooleanParameters {
|
||||
boolean exact;
|
||||
boolean ideal;
|
||||
boolean exact;
|
||||
boolean ideal;
|
||||
};
|
||||
|
||||
dictionary ConstrainDOMStringParameters {
|
||||
(DOMString or sequence<DOMString>) exact;
|
||||
(DOMString or sequence<DOMString>) ideal;
|
||||
(DOMString or sequence<DOMString>) exact;
|
||||
(DOMString or sequence<DOMString>) ideal;
|
||||
};
|
||||
|
||||
typedef ([Clamp] unsigned long or ConstrainULongRange) ConstrainULong;
|
||||
|
|
@ -231,17 +230,16 @@ typedef (double or ConstrainDoubleRange) ConstrainDouble;
|
|||
|
||||
typedef (boolean or ConstrainBooleanParameters) ConstrainBoolean;
|
||||
|
||||
typedef (DOMString or sequence<DOMString> or ConstrainDOMStringParameters) ConstrainDOMString;
|
||||
typedef (DOMString or
|
||||
sequence<DOMString> or
|
||||
ConstrainDOMStringParameters) ConstrainDOMString;
|
||||
|
||||
dictionary Capabilities {
|
||||
};
|
||||
dictionary Capabilities {};
|
||||
|
||||
dictionary Settings {
|
||||
};
|
||||
dictionary Settings {};
|
||||
|
||||
dictionary ConstraintSet {
|
||||
};
|
||||
dictionary ConstraintSet {};
|
||||
|
||||
dictionary Constraints : ConstraintSet {
|
||||
sequence<ConstraintSet> advanced;
|
||||
sequence<ConstraintSet> advanced;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Media Session Standard (https://wicg.github.io/mediasession/)
|
||||
// Source: Media Session Standard (https://w3c.github.io/mediasession/)
|
||||
|
||||
[Exposed=Window]
|
||||
partial interface Navigator {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Payment Request API (https://w3c.github.io/payment-request/)
|
||||
|
||||
[Constructor(sequence<PaymentMethodData> methodData, PaymentDetailsInit details, optional PaymentOptions options),
|
||||
[Constructor(sequence<PaymentMethodData> methodData, PaymentDetailsInit details, optional PaymentOptions options = {}),
|
||||
SecureContext, Exposed=Window]
|
||||
interface PaymentRequest : EventTarget {
|
||||
[NewObject]
|
||||
|
|
@ -138,7 +138,7 @@ enum PaymentComplete {
|
|||
};
|
||||
|
||||
[SecureContext, Exposed=Window]
|
||||
interface PaymentResponse : EventTarget {
|
||||
interface PaymentResponse : EventTarget {
|
||||
[Default] object toJSON();
|
||||
|
||||
readonly attribute DOMString requestId;
|
||||
|
|
@ -153,7 +153,7 @@ interface PaymentResponse : EventTarget {
|
|||
[NewObject]
|
||||
Promise<void> complete(optional PaymentComplete result = "unknown");
|
||||
[NewObject]
|
||||
Promise<void> retry(optional PaymentValidationErrors errorFields);
|
||||
Promise<void> retry(optional PaymentValidationErrors errorFields = {});
|
||||
|
||||
attribute EventHandler onpayerdetailchange;
|
||||
};
|
||||
|
|
@ -171,7 +171,7 @@ dictionary PayerErrors {
|
|||
DOMString phone;
|
||||
};
|
||||
|
||||
[Constructor(DOMString type, optional MerchantValidationEventInit eventInitDict),
|
||||
[Constructor(DOMString type, optional MerchantValidationEventInit eventInitDict = {}),
|
||||
SecureContext, Exposed=Window]
|
||||
interface MerchantValidationEvent : Event {
|
||||
readonly attribute DOMString methodName;
|
||||
|
|
@ -184,7 +184,7 @@ dictionary MerchantValidationEventInit : EventInit {
|
|||
USVString validationURL = "";
|
||||
};
|
||||
|
||||
[Constructor(DOMString type, optional PaymentMethodChangeEventInit eventInitDict), SecureContext, Exposed=Window]
|
||||
[Constructor(DOMString type, optional PaymentMethodChangeEventInit eventInitDict = {}), SecureContext, Exposed=Window]
|
||||
interface PaymentMethodChangeEvent : PaymentRequestUpdateEvent {
|
||||
readonly attribute DOMString methodName;
|
||||
readonly attribute object? methodDetails;
|
||||
|
|
@ -195,7 +195,7 @@ dictionary PaymentMethodChangeEventInit : PaymentRequestUpdateEventInit {
|
|||
object? methodDetails = null;
|
||||
};
|
||||
|
||||
[Constructor(DOMString type, optional PaymentRequestUpdateEventInit eventInitDict), SecureContext, Exposed=Window]
|
||||
[Constructor(DOMString type, optional PaymentRequestUpdateEventInit eventInitDict = {}), SecureContext, Exposed=Window]
|
||||
interface PaymentRequestUpdateEvent : Event {
|
||||
void updateWith(Promise<PaymentDetailsUpdate> detailsPromise);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Picture-in-Picture (https://wicg.github.io/picture-in-picture/)
|
||||
// Source: Picture-in-Picture (https://w3c.github.io/picture-in-picture/)
|
||||
|
||||
partial interface HTMLVideoElement {
|
||||
[NewObject] Promise<PictureInPictureWindow> requestPictureInPicture();
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ partial interface ServiceWorkerRegistration {
|
|||
interface PushManager {
|
||||
[SameObject] static readonly attribute FrozenArray<DOMString> supportedContentEncodings;
|
||||
|
||||
Promise<PushSubscription> subscribe(optional PushSubscriptionOptionsInit options);
|
||||
Promise<PushSubscription> subscribe(optional PushSubscriptionOptionsInit options = {});
|
||||
Promise<PushSubscription?> getSubscription();
|
||||
Promise<PushPermissionState> permissionState(optional PushSubscriptionOptionsInit options);
|
||||
Promise<PushPermissionState> permissionState(optional PushSubscriptionOptionsInit options = {});
|
||||
};
|
||||
|
||||
[Exposed=(Window,Worker), SecureContext]
|
||||
|
|
@ -64,7 +64,7 @@ partial interface ServiceWorkerGlobalScope {
|
|||
attribute EventHandler onpushsubscriptionchange;
|
||||
};
|
||||
|
||||
[Constructor(DOMString type, optional PushEventInit eventInitDict), Exposed=ServiceWorker, SecureContext]
|
||||
[Constructor(DOMString type, optional PushEventInit eventInitDict = {}), Exposed=ServiceWorker, SecureContext]
|
||||
interface PushEvent : ExtendableEvent {
|
||||
readonly attribute PushMessageData? data;
|
||||
};
|
||||
|
|
@ -75,13 +75,13 @@ dictionary PushEventInit : ExtendableEventInit {
|
|||
PushMessageDataInit data;
|
||||
};
|
||||
|
||||
[Constructor(DOMString type, optional PushSubscriptionChangeInit eventInitDict), Exposed=ServiceWorker, SecureContext]
|
||||
[Constructor(DOMString type, optional PushSubscriptionChangeEventInit eventInitDict = {}), Exposed=ServiceWorker, SecureContext]
|
||||
interface PushSubscriptionChangeEvent : ExtendableEvent {
|
||||
readonly attribute PushSubscription? newSubscription;
|
||||
readonly attribute PushSubscription? oldSubscription;
|
||||
};
|
||||
|
||||
dictionary PushSubscriptionChangeInit : ExtendableEventInit {
|
||||
dictionary PushSubscriptionChangeEventInit : ExtendableEventInit {
|
||||
PushSubscription newSubscription = null;
|
||||
PushSubscription oldSubscription = null;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ dictionary WakeLockPermissionDescriptor : PermissionDescriptor {
|
|||
|
||||
enum WakeLockType { "screen", "system" };
|
||||
|
||||
[SecureContext, Exposed=(DedicatedWorker,Window)]
|
||||
[SecureContext, Exposed=(DedicatedWorker, Window)]
|
||||
interface WakeLock {
|
||||
[Exposed=Window] static Promise<PermissionState> requestPermission(WakeLockType type);
|
||||
static Promise<void> request(WakeLockType type, optional WakeLockRequestOptions options);
|
||||
static Promise<void> request(WakeLockType type, optional WakeLockRequestOptions options = {});
|
||||
};
|
||||
|
||||
dictionary WakeLockRequestOptions {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,29 @@
|
|||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Web NFC API (https://w3c.github.io/web-nfc/)
|
||||
|
||||
dictionary NDEFMessage {
|
||||
[Constructor(NDEFMessageInit messageInit), Exposed=Window]
|
||||
interface NDEFMessage {
|
||||
readonly attribute USVString url;
|
||||
readonly attribute FrozenArray<NDEFRecord> records;
|
||||
};
|
||||
|
||||
dictionary NDEFMessageInit {
|
||||
USVString url;
|
||||
sequence<NDEFRecord> records;
|
||||
sequence<NDEFRecordInit> records;
|
||||
};
|
||||
|
||||
typedef (DOMString or unrestricted double or ArrayBuffer or Dictionary) NDEFRecordData;
|
||||
|
||||
dictionary NDEFRecord {
|
||||
[Constructor(NDEFRecordInit recordInit), Exposed=Window]
|
||||
interface NDEFRecord {
|
||||
readonly attribute NDEFRecordType recordType;
|
||||
readonly attribute USVString mediaType;
|
||||
USVString toText();
|
||||
[NewObject] ArrayBuffer toArrayBuffer();
|
||||
[NewObject] object toJSON();
|
||||
};
|
||||
|
||||
dictionary NDEFRecordInit {
|
||||
NDEFRecordType recordType;
|
||||
USVString mediaType;
|
||||
NDEFRecordData data;
|
||||
|
|
@ -24,14 +39,14 @@ enum NDEFRecordType {
|
|||
"opaque"
|
||||
};
|
||||
|
||||
typedef (DOMString or ArrayBuffer or NDEFMessage) NDEFMessageSource;
|
||||
typedef (DOMString or ArrayBuffer or NDEFMessageInit) NDEFMessageSource;
|
||||
|
||||
[Constructor(), SecureContext, Exposed=Window]
|
||||
interface NFCWriter {
|
||||
Promise<void> push(NDEFMessageSource message, optional NFCPushOptions options);
|
||||
Promise<void> push(NDEFMessageSource message, optional NFCPushOptions options={});
|
||||
};
|
||||
|
||||
[Constructor(optional NFCReaderOptions options), SecureContext, Exposed=Window]
|
||||
[Constructor(optional NFCReaderOptions options={}), SecureContext, Exposed=Window]
|
||||
interface NFCReader : EventTarget {
|
||||
attribute EventHandler onreading;
|
||||
attribute EventHandler onerror;
|
||||
|
|
@ -43,12 +58,12 @@ interface NFCReader : EventTarget {
|
|||
[Constructor(DOMString type, NFCReadingEventInit readingEventInitDict), SecureContext, Exposed=Window]
|
||||
interface NFCReadingEvent : Event {
|
||||
readonly attribute DOMString serialNumber;
|
||||
readonly attribute object message; // NDEFMessage
|
||||
[SameObject] readonly attribute NDEFMessage message;
|
||||
};
|
||||
|
||||
dictionary NFCReadingEventInit : EventInit {
|
||||
DOMString? serialNumber = "";
|
||||
required NDEFMessage message;
|
||||
required NDEFMessageInit message;
|
||||
};
|
||||
|
||||
[Constructor(DOMString type, NFCErrorEventInit errorEventInitDict), SecureContext, Exposed=Window]
|
||||
|
|
|
|||
|
|
@ -116,8 +116,8 @@ interface AudioBuffer {
|
|||
readonly attribute double duration;
|
||||
readonly attribute unsigned long numberOfChannels;
|
||||
Float32Array getChannelData (unsigned long channel);
|
||||
void copyFromChannel (Float32Array destination, unsigned long channelNumber, optional unsigned long startInChannel = 0);
|
||||
void copyToChannel (Float32Array source, unsigned long channelNumber, optional unsigned long startInChannel = 0);
|
||||
void copyFromChannel (Float32Array destination, unsigned long channelNumber, optional unsigned long bufferOffset = 0);
|
||||
void copyToChannel (Float32Array source, unsigned long channelNumber, optional unsigned long bufferOffset = 0);
|
||||
};
|
||||
|
||||
dictionary AudioBufferOptions {
|
||||
|
|
@ -581,7 +581,7 @@ dictionary AudioWorkletNodeOptions : AudioNodeOptions {
|
|||
unsigned long numberOfOutputs = 1;
|
||||
sequence<unsigned long> outputChannelCount;
|
||||
record<DOMString, double> parameterData;
|
||||
object? processorOptions = null;
|
||||
object processorOptions;
|
||||
};
|
||||
|
||||
[Exposed=AudioWorklet,
|
||||
|
|
|
|||
|
|
@ -65,26 +65,26 @@ dictionary RTCReceivedRtpStreamStats : RTCRtpStreamStats {
|
|||
};
|
||||
|
||||
dictionary RTCInboundRtpStreamStats : RTCReceivedRtpStreamStats {
|
||||
DOMString trackId;
|
||||
DOMString receiverId;
|
||||
DOMString remoteId;
|
||||
unsigned long framesDecoded;
|
||||
unsigned long keyFramesDecoded;
|
||||
unsigned long long qpSum;
|
||||
double totalDecodeTime;
|
||||
DOMHighResTimeStamp lastPacketReceivedTimestamp;
|
||||
double averageRtcpInterval;
|
||||
unsigned long fecPacketsReceived;
|
||||
unsigned long fecPacketsDiscarded;
|
||||
unsigned long long bytesReceived;
|
||||
unsigned long packetsFailedDecryption;
|
||||
unsigned long packetsDuplicated;
|
||||
record<USVString, unsigned long> perDscpPacketsReceived;
|
||||
unsigned long nackCount;
|
||||
unsigned long firCount;
|
||||
unsigned long pliCount;
|
||||
unsigned long sliCount;
|
||||
};
|
||||
DOMString trackId;
|
||||
DOMString receiverId;
|
||||
DOMString remoteId;
|
||||
unsigned long framesDecoded;
|
||||
unsigned long keyFramesDecoded;
|
||||
unsigned long long qpSum;
|
||||
double totalDecodeTime;
|
||||
DOMHighResTimeStamp lastPacketReceivedTimestamp;
|
||||
double averageRtcpInterval;
|
||||
unsigned long fecPacketsReceived;
|
||||
unsigned long fecPacketsDiscarded;
|
||||
unsigned long long bytesReceived;
|
||||
unsigned long packetsFailedDecryption;
|
||||
unsigned long packetsDuplicated;
|
||||
record<USVString, unsigned long> perDscpPacketsReceived;
|
||||
unsigned long nackCount;
|
||||
unsigned long firCount;
|
||||
unsigned long pliCount;
|
||||
unsigned long sliCount;
|
||||
};
|
||||
|
||||
dictionary RTCRemoteInboundRtpStreamStats : RTCReceivedRtpStreamStats {
|
||||
DOMString localId;
|
||||
|
|
@ -126,11 +126,11 @@ dictionary RTCOutboundRtpStreamStats : RTCSentRtpStreamStats {
|
|||
};
|
||||
|
||||
enum RTCQualityLimitationReason {
|
||||
"none",
|
||||
"cpu",
|
||||
"bandwidth",
|
||||
"other",
|
||||
};
|
||||
"none",
|
||||
"cpu",
|
||||
"bandwidth",
|
||||
"other",
|
||||
};
|
||||
|
||||
dictionary RTCRemoteOutboundRtpStreamStats : RTCSentRtpStreamStats {
|
||||
DOMString localId;
|
||||
|
|
@ -277,7 +277,6 @@ dictionary RTCIceCandidateStats : RTCStats {
|
|||
long priority;
|
||||
DOMString url;
|
||||
DOMString relayProtocol;
|
||||
boolean deleted = false;
|
||||
};
|
||||
|
||||
enum RTCNetworkType {
|
||||
|
|
@ -336,24 +335,24 @@ dictionary RTCCertificateStats : RTCStats {
|
|||
};
|
||||
|
||||
dictionary RTCStunServerConnectionStats : RTCStats {
|
||||
DOMString url;
|
||||
long port;
|
||||
DOMString protocol;
|
||||
RTCNetworkType networkType;
|
||||
unsigned long totalRequestsSent;
|
||||
unsigned long totalResponsesReceived;
|
||||
double totalRoundTripTime;
|
||||
};
|
||||
DOMString url;
|
||||
long port;
|
||||
DOMString protocol;
|
||||
RTCNetworkType networkType;
|
||||
unsigned long totalRequestsSent;
|
||||
unsigned long totalResponsesReceived;
|
||||
double totalRoundTripTime;
|
||||
};
|
||||
|
||||
partial dictionary RTCIceCandidateStats {
|
||||
boolean isRemote;
|
||||
};
|
||||
boolean isRemote;
|
||||
};
|
||||
|
||||
partial dictionary RTCIceCandidatePairStats {
|
||||
double totalRtt;
|
||||
double currentRtt;
|
||||
unsigned long long priority;
|
||||
};
|
||||
double totalRtt;
|
||||
double currentRtt;
|
||||
unsigned long long priority;
|
||||
};
|
||||
|
||||
partial dictionary RTCRtpStreamStats {
|
||||
DOMString mediaType;
|
||||
|
|
|
|||
|
|
@ -95,11 +95,11 @@ enum RTCIceConnectionState {
|
|||
interface RTCPeerConnection : EventTarget {
|
||||
Promise<RTCSessionDescriptionInit> createOffer(optional RTCOfferOptions options);
|
||||
Promise<RTCSessionDescriptionInit> createAnswer(optional RTCAnswerOptions options);
|
||||
Promise<void> setLocalDescription(RTCSessionDescriptionInit description);
|
||||
Promise<void> setLocalDescription(optional RTCSessionDescriptionInit description);
|
||||
readonly attribute RTCSessionDescription? localDescription;
|
||||
readonly attribute RTCSessionDescription? currentLocalDescription;
|
||||
readonly attribute RTCSessionDescription? pendingLocalDescription;
|
||||
Promise<void> setRemoteDescription(RTCSessionDescriptionInit description);
|
||||
Promise<void> setRemoteDescription(optional RTCSessionDescriptionInit description);
|
||||
readonly attribute RTCSessionDescription? remoteDescription;
|
||||
readonly attribute RTCSessionDescription? currentRemoteDescription;
|
||||
readonly attribute RTCSessionDescription? pendingRemoteDescription;
|
||||
|
|
@ -127,12 +127,12 @@ partial interface RTCPeerConnection {
|
|||
Promise<void> createOffer(RTCSessionDescriptionCallback successCallback,
|
||||
RTCPeerConnectionErrorCallback failureCallback,
|
||||
optional RTCOfferOptions options);
|
||||
Promise<void> setLocalDescription(RTCSessionDescriptionInit description,
|
||||
Promise<void> setLocalDescription(optional RTCSessionDescriptionInit description,
|
||||
VoidFunction successCallback,
|
||||
RTCPeerConnectionErrorCallback failureCallback);
|
||||
Promise<void> createAnswer(RTCSessionDescriptionCallback successCallback,
|
||||
RTCPeerConnectionErrorCallback failureCallback);
|
||||
Promise<void> setRemoteDescription(RTCSessionDescriptionInit description,
|
||||
Promise<void> setRemoteDescription(optional RTCSessionDescriptionInit description,
|
||||
VoidFunction successCallback,
|
||||
RTCPeerConnectionErrorCallback failureCallback);
|
||||
Promise<void> addIceCandidate(RTCIceCandidateInit candidate,
|
||||
|
|
@ -156,7 +156,7 @@ enum RTCSdpType {
|
|||
"rollback"
|
||||
};
|
||||
|
||||
[Exposed=Window, Constructor(RTCSessionDescriptionInit descriptionInitDict)]
|
||||
[Exposed=Window, Constructor(optional RTCSessionDescriptionInit descriptionInitDict)]
|
||||
interface RTCSessionDescription {
|
||||
readonly attribute RTCSdpType type;
|
||||
readonly attribute DOMString sdp;
|
||||
|
|
@ -164,7 +164,7 @@ interface RTCSessionDescription {
|
|||
};
|
||||
|
||||
dictionary RTCSessionDescriptionInit {
|
||||
required RTCSdpType type;
|
||||
RTCSdpType type;
|
||||
DOMString sdp = "";
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@
|
|||
class ElementLoadPromise {
|
||||
constructor(element_id) {
|
||||
this.element_id = element_id;
|
||||
this.promise = new Promise(resolve => {
|
||||
this.promise = new Promise((resolve, reject) => {
|
||||
this.resolve = resolve
|
||||
this.reject = reject
|
||||
});
|
||||
}
|
||||
element() {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
|||
|
||||
<script>
|
||||
const below_viewport_iframe = new ElementLoadPromise("below_viewport_iframe");
|
||||
const below_viewport_img = new ElementLoadPromise("below_viewport_img");
|
||||
|
||||
// Change the base URL and scroll down to load the deferred elements.
|
||||
window.addEventListener("load", () => {
|
||||
|
|
@ -26,6 +27,15 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
|||
assert_true(below_viewport_iframe.element().contentDocument.body.innerHTML.includes("<p>Subframe</p>"));
|
||||
}));
|
||||
}, "Test that when deferred iframe is loaded, it uses the base URL computed at parse time.");
|
||||
|
||||
async_test(function(t) {
|
||||
below_viewport_img.promise.then(
|
||||
t.step_func_done(function() {
|
||||
assert_true(below_viewport_img.element().complete);
|
||||
assert_greater_than(below_viewport_img.element().naturalWidth, 0);
|
||||
})
|
||||
).catch(t.unreached_func("The image load should not fail, trying to load with invalid base URL."));
|
||||
}, "Test that when deferred img is loaded, it uses the base URL computed at parse time.");
|
||||
</script>
|
||||
|
||||
<body>
|
||||
|
|
@ -37,4 +47,6 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
|||
</script>
|
||||
<iframe id="below_viewport_iframe" src="subframe.html" loading="lazy" width="200px" height="100px" onload="below_viewport_iframe.resolve();">
|
||||
</iframe>
|
||||
<img id="below_viewport_img" src="image.png" loading="lazy" onload="below_viewport_img.resolve();"
|
||||
onerror="below_viewport_img.reject();">
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Deferred images with loading='lazy' use the original crossorigin attribute specified at the parse time</title>
|
||||
<link rel="author" title="Raj T" href="mailto:rajendrant@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<!--
|
||||
Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
||||
-->
|
||||
|
||||
<script>
|
||||
const crossorigin_img = new ElementLoadPromise("crossorigin_img");
|
||||
|
||||
// Set the crossorigin and scroll down to load the deferred image.
|
||||
window.addEventListener("load", () => {
|
||||
crossorigin_img.element().crossOrigin = 'anonymous';
|
||||
crossorigin_img.element().scrollIntoView();
|
||||
});
|
||||
|
||||
async_test(function(t) {
|
||||
crossorigin_img.promise.then(t.step_func_done(() => {
|
||||
// The image originally did not had crossOrigin property set, so CORS will
|
||||
// not be involved in fetching that. So drawing the image in a canvas will
|
||||
// make it tainted. Verify that the image did not load with CORS headers
|
||||
// due to the updated crossOrigin property.
|
||||
const img_element = crossorigin_img.element();
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
canvas.width = img_element.width;
|
||||
canvas.height = img_element.height;
|
||||
context.drawImage(img_element, 0, 0);
|
||||
assert_throws('SecurityError', () => canvas.toDataURL());
|
||||
})
|
||||
).catch(t.unreached_func("The image load should not fail, trying to load with CORS headers set."));
|
||||
}, "Test that when deferred image is loaded, it uses the crossorigin attribute specified at parse time.");
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<div style="height:10000px;"></div>
|
||||
<img id="crossorigin_img" loading="lazy"
|
||||
src='http://{{hosts[alt][www]}}:{{ports[http][0]}}/loading/lazyload/resources/image.png'
|
||||
onload="crossorigin_img.resolve();" onerror="crossorigin_img.reject();">
|
||||
</body>
|
||||
|
|
@ -14,10 +14,12 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
|||
|
||||
<script>
|
||||
const below_viewport_iframe = new ElementLoadPromise("below_viewport_iframe");
|
||||
const below_viewport_img = new ElementLoadPromise("below_viewport_img");
|
||||
|
||||
// Change the referrer-policy and scroll down to load the deferred elements.
|
||||
window.addEventListener("load", () => {
|
||||
below_viewport_iframe.element().referrerPolicy = "no-referrer";
|
||||
below_viewport_img.element().referrerPolicy = "no-referrer";
|
||||
document.getElementById("below_viewport_iframe").scrollIntoView();
|
||||
});
|
||||
|
||||
|
|
@ -28,9 +30,19 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
|||
// at parse time), and not the origin (as specified in meta referrer
|
||||
// tag) or null (as overridden by iframe referrerpolicy=no-referrer).
|
||||
assert_true(below_viewport_iframe.element().contentDocument.body.innerHTML
|
||||
.includes("Referer: http://{{host}}:{{ports[http][0]}}/loading/lazyload/"));
|
||||
.includes("Referer: http://{{location[host]}}{{location[path]}}"));
|
||||
}));
|
||||
}, "Test that when deferred iframe is loaded, it uses the referrer-policy specified at parse time.");
|
||||
|
||||
async_test(function(t) {
|
||||
below_viewport_img.promise.then(
|
||||
t.step_func_done(function() {
|
||||
// The image will load successfully if the full URL is sent as referrer.
|
||||
assert_true(below_viewport_img.element().complete);
|
||||
assert_greater_than(below_viewport_img.element().naturalWidth, 0);
|
||||
})
|
||||
).catch(t.unreached_func("The image load should not fail, by sending the wrong referer header."));
|
||||
}, "Test that when deferred img is loaded, it uses the referrer-policy specified at parse time.");
|
||||
</script>
|
||||
|
||||
<body>
|
||||
|
|
@ -38,4 +50,6 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
|||
<div style="height:10000px;"></div>
|
||||
<iframe id="below_viewport_iframe" src="/xhr/resources/echo-headers.py" loading="lazy" width="200px" height="100px" referrerpolicy="unsafe-url" onload="below_viewport_iframe.resolve();">
|
||||
</iframe>
|
||||
<img id="below_viewport_img" src="resources/referrer-checker-img.py?expected_referrer=http://{{location[host]}}{{location[path]}}"
|
||||
loading="lazy" referrerpolicy="unsafe-url" onload="below_viewport_img.resolve();" onerror="below_viewport_img.reject();">
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import os
|
||||
|
||||
# Returns a valid image response when request's |referrer| matches
|
||||
# |expected_referrer|.
|
||||
def main(request, response):
|
||||
referrer = request.headers.get("referer", "")
|
||||
expected_referrer = request.GET.first("expected_referrer", "")
|
||||
response_headers = [("Content-Type", "image/png")]
|
||||
if referrer == expected_referrer:
|
||||
image_path = os.path.join(os.path.dirname(__file__), "image.png")
|
||||
return (200, response_headers, open(image_path, mode='rb').read())
|
||||
return (404, response_headers, "Not found")
|
||||
|
|
@ -36,16 +36,5 @@
|
|||
</math>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
msqrt:
|
||||
<math>
|
||||
<msqrt>
|
||||
<mspace width="25px" height="25px" mathbackground="red"/>
|
||||
<mspace width="25px" height="25px" mathbackground="green"/>
|
||||
<mspace width="25px" height="25px" mathbackground="blue"/>
|
||||
</msqrt>
|
||||
</math>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-top-level-math-element">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#style-change-mstyle">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#radicals-msqrt-mroot">
|
||||
<meta name="assert" content="Verify dir attribute on various containers.">
|
||||
<link rel="match" href="direction-overall-ref.html">
|
||||
</head>
|
||||
|
|
@ -48,20 +47,6 @@
|
|||
</math>
|
||||
</p>
|
||||
|
||||
<!-- dir="rtl" on <msqrt> should be ignored. The rectangle
|
||||
inside this element should be displayed left-to-right. -->
|
||||
|
||||
<p>
|
||||
msqrt:
|
||||
<math>
|
||||
<msqrt dir="rtl">
|
||||
<mspace width="25px" height="25px" mathbackground="red"/>
|
||||
<mspace width="25px" height="25px" mathbackground="green"/>
|
||||
<mspace width="25px" height="25px" mathbackground="blue"/>
|
||||
</msqrt>
|
||||
</math>
|
||||
</p>
|
||||
|
||||
<script src="/mathml/support/feature-detection.js"></script>
|
||||
<script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,15 @@
|
|||
<title>Fraction numalign denomalign</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if you see 3 fractions with a numerator respectively
|
||||
aligned left/center/right with respect to the denominator ;
|
||||
followed by 3 fractions with a denominator respectively aligned
|
||||
left/center/right with respect to the numerator.</p>
|
||||
<p>This test passes if you see 6 fractions with numerators and
|
||||
denominators horizontally centered.</p>
|
||||
<p>
|
||||
<math>
|
||||
<mfrac>
|
||||
<mrow>
|
||||
<mspace width="10px" height="20px"></mspace>
|
||||
<mspace width="10px" height="20px" style="background: blue;"></mspace>
|
||||
<mspace width="20px" height="20px"></mspace>
|
||||
<mspace width="10px" height="20px"></mspace>
|
||||
</mrow>
|
||||
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
|
||||
</mfrac>
|
||||
|
|
@ -32,8 +31,9 @@
|
|||
<math>
|
||||
<mfrac>
|
||||
<mrow>
|
||||
<mspace width="20px" height="20px"></mspace>
|
||||
<mspace width="10px" height="20px"></mspace>
|
||||
<mspace width="10px" height="20px" style="background: blue;"></mspace>
|
||||
<mspace width="10px" height="20px"></mspace>
|
||||
</mrow>
|
||||
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
|
||||
</mfrac>
|
||||
|
|
@ -44,8 +44,9 @@
|
|||
<mfrac>
|
||||
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
|
||||
<mrow>
|
||||
<mspace width="10px" height="20px"></mspace>
|
||||
<mspace width="10px" height="20px" style="background: blue;"></mspace>
|
||||
<mspace width="20px" height="20px"></mspace>
|
||||
<mspace width="10px" height="20px"></mspace>
|
||||
</mrow>
|
||||
</mfrac>
|
||||
</math>
|
||||
|
|
@ -63,8 +64,9 @@
|
|||
<mfrac>
|
||||
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
|
||||
<mrow>
|
||||
<mspace width="20px" height="20px"></mspace>
|
||||
<mspace width="10px" height="20px"></mspace>
|
||||
<mspace width="10px" height="20px" style="background: blue;"></mspace>
|
||||
<mspace width="10px" height="20px"></mspace>
|
||||
</mrow>
|
||||
</mfrac>
|
||||
</math>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,12 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Fraction numalign denomalign</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
|
||||
<meta name="assert" content="This fraction alignment with the numalign/denomalign attributes.">
|
||||
<meta name="assert" content="Check that legacy numalign/denomalign attributes are ignored.">
|
||||
<link rel="match" href="frac-numalign-denomalign-001-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if you see 3 fractions with a numerator respectively
|
||||
aligned left/center/right with respect to the denominator ;
|
||||
followed by 3 fractions with a denominator respectively aligned
|
||||
left/center/right with respect to the numerator.</p>
|
||||
<p>This test passes if you see 6 fractions with numerators and
|
||||
denominators horizontally centered.</p>
|
||||
<p>
|
||||
<math>
|
||||
<mfrac numalign="left">
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</munder>
|
||||
<munder>
|
||||
<mo lspace="0px" rspace="0px" movablelimits="false">A</mo>
|
||||
<mi>C</mi>
|
||||
<mi>B</mi>
|
||||
</munder>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
|
|
|
|||
|
|
@ -31,24 +31,44 @@
|
|||
assert_equals(style.getPropertyValue("direction"), "ltr", "no attribute");
|
||||
element.setAttribute("dir", "rtl");
|
||||
assert_equals(style.getPropertyValue("direction"), "rtl", "attribute specified");
|
||||
element.setAttribute("dir", "RtL");
|
||||
assert_equals(style.getPropertyValue("direction"), "rtl", "case insensitive");
|
||||
}, `dir on the ${tag} element is mapped to CSS direction`)
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 255)", "no attribute");
|
||||
assert_equals(style.getPropertyValue("color"),
|
||||
tag === "merror" ?
|
||||
"rgb(255, 0, 0)" : "rgb(0, 0, 255)",
|
||||
"no attribute");
|
||||
element.setAttribute("mathcolor", "black");
|
||||
assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 0)", "attribute specified");
|
||||
// The color names are case-insensitive.
|
||||
// See https://www.w3.org/TR/css-color-3/#html4
|
||||
element.setAttribute("mathcolor", "GrEeN");
|
||||
assert_equals(style.getPropertyValue("color"), "rgb(0, 128, 0)", "case insensitive");
|
||||
}, `mathcolor on the ${tag} element is mapped to CSS color`);
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgba(0, 0, 0, 0)", "no attribute");
|
||||
assert_equals(style.getPropertyValue("background-color"),
|
||||
tag === "merror" ?
|
||||
"rgb(255, 255, 224)" : "rgba(0, 0, 0, 0)",
|
||||
"no attribute");
|
||||
element.setAttribute("mathbackground", "lightblue");
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgb(173, 216, 230)", "attribute specified");
|
||||
// The color names are case-insensitive.
|
||||
// See https://www.w3.org/TR/css-color-3/#html4
|
||||
element.setAttribute("mathbackground", "YeLlOw");
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgb(255, 255, 0)", "case insensitive");
|
||||
}, `mathbackground on the ${tag} element is mapped to CSS background-color`);
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("font-size"), "50px", "no attribute");
|
||||
element.setAttribute("mathsize", "20px");
|
||||
assert_equals(style.getPropertyValue("font-size"), "20px", "attribute specified");
|
||||
// unit identifiers are ASCII case-insensitive.
|
||||
// https://www.w3.org/TR/css-values-3/#typedef-dimension
|
||||
element.setAttribute("mathsize", "30Px");
|
||||
assert_equals(style.getPropertyValue("font-size"), "30px", "case insensitive");
|
||||
}, `mathsize on the ${tag} element is mapped to CSS font-size`);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -22,9 +22,13 @@
|
|||
var style = window.getComputedStyle(element);
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("text-transform"), "none", "no attribute");
|
||||
assert_equals(style.getPropertyValue("text-transform"),
|
||||
tag === "mi" ? "math-auto" : "none",
|
||||
"no attribute");
|
||||
element.setAttribute("mathvariant", "fraktur");
|
||||
assert_equals(style.getPropertyValue("text-transform"), "math-fraktur", "attribute specified");
|
||||
element.setAttribute("mathvariant", "DoUbLe-StRuCk");
|
||||
assert_equals(style.getPropertyValue("text-transform"), "math-double-struck", "case insensitive");
|
||||
}, `mathvariant on the ${tag} element is mapped to CSS text-transform`)
|
||||
|
||||
test(function() {
|
||||
|
|
@ -37,6 +41,8 @@
|
|||
assert_equals(style.getPropertyValue("math-style"), "inline", "no attribute");
|
||||
element.setAttribute("displaystyle", "true");
|
||||
assert_equals(style.getPropertyValue("math-style"), "display", "attribute specified");
|
||||
element.setAttribute("displaystyle", "TrUe");
|
||||
assert_equals(style.getPropertyValue("math-style"), "display", "case insensitive");
|
||||
}, `displaystyle on the ${tag} element is mapped to CSS math-style`);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -23,14 +23,11 @@
|
|||
setup({ explicit_done: true });
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 5;
|
||||
function verify_displaystyle(element, displaystyle, description) {
|
||||
if (typeof element === "string")
|
||||
element = document.getElementById(element);
|
||||
var elementSize = element.getBoundingClientRect().height;
|
||||
if (displaystyle)
|
||||
assert_approx_equals(elementSize, 5000 * emToPx, epsilon, description);
|
||||
else
|
||||
assert_approx_equals(elementSize, 1000 * emToPx, epsilon, description);
|
||||
function verify_displaystyle(elementId, displaystyle, description) {
|
||||
var expectedSize = (displaystyle ? 5000 : 1000) * emToPx;
|
||||
var elementSize = document.getElementById(elementId).
|
||||
getBoundingClientRect().height;
|
||||
assert_approx_equals(elementSize, expectedSize, epsilon, description);
|
||||
}
|
||||
|
||||
window.addEventListener("load", function() {
|
||||
|
|
@ -45,6 +42,8 @@
|
|||
verify_displaystyle("math_block", true, "explicit display block");
|
||||
verify_displaystyle("math_false", false, "explicit displaystyle false");
|
||||
verify_displaystyle("math_true", true, "explicit displaystyle true");
|
||||
verify_displaystyle("math_block_false", false, "explicit display block and displaystyle false");
|
||||
verify_displaystyle("math_block_true", true, "explicit display block and displaystyle true");
|
||||
}, "math element");
|
||||
test(function() {
|
||||
verify_displaystyle("mstyle_false", false, "explicit displaystyle false");
|
||||
|
|
@ -101,6 +100,12 @@
|
|||
<math display="block"><mo id="math_block">⫿</mo></math>
|
||||
<math displaystyle="false"><mo id="math_false">⫿</mo></math>
|
||||
<math displaystyle="true"><mo id="math_true">⫿</mo></math>
|
||||
<math display="block" displaystyle="false">
|
||||
<mo id="math_block_false">⫿</mo>
|
||||
</math>
|
||||
<math display="block" displaystyle="true">
|
||||
<mo id="math_block_true">⫿</mo>
|
||||
</math>
|
||||
<math><mstyle displaystyle="false"><mo id="mstyle_false">⫿</mo></mstyle></math>
|
||||
<math><mstyle displaystyle="true"><mo id="mstyle_true">⫿</mo></mstyle></math>
|
||||
<math displaystyle="true"><mtable><mtr><mtd><mo id="mtable_default">⫿</mo></mtd></mtr></mtable></math>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,206 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>displaystyle</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
|
||||
<meta name="assert" content="Verify interaction between automatic displaystyle and specified displaystyle on descendants.">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: TestFont;
|
||||
src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
|
||||
}
|
||||
math, math * {
|
||||
font-family: TestFont;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 5;
|
||||
function verify_displaystyle(elementId, displaystyle, description) {
|
||||
var expectedSize = (displaystyle ? 5000 : 1000) * emToPx;
|
||||
var elementSize = document.getElementById(elementId).
|
||||
getBoundingClientRect().height;
|
||||
assert_approx_equals(elementSize, expectedSize, epsilon, description);
|
||||
}
|
||||
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
verify_displaystyle("cell_false", false, "cell with displaystyle false");
|
||||
verify_displaystyle("cell_true", true, "cell with displaystyle true");
|
||||
}, "mtable element");
|
||||
test(function() {
|
||||
verify_displaystyle("mfrac_numerator", true, "numerator");
|
||||
verify_displaystyle("mfrac_denominator", true, "denominator");
|
||||
}, "mfrac element");
|
||||
test(function() {
|
||||
verify_displaystyle("mroot_base", false, "base");
|
||||
verify_displaystyle("mroot_index", true, "index");
|
||||
}, "mroot element");
|
||||
test(function() {
|
||||
verify_displaystyle("msub_base", false, "base");
|
||||
verify_displaystyle("msub_subscript", true, "subscript");
|
||||
}, "msub element");
|
||||
test(function() {
|
||||
verify_displaystyle("msup_base", false, "base");
|
||||
verify_displaystyle("msup_superscript", true, "superscript");
|
||||
}, "msup element");
|
||||
test(function() {
|
||||
verify_displaystyle("msubsup_base", false, "base");
|
||||
verify_displaystyle("msubsup_subscript", true, "subscript");
|
||||
verify_displaystyle("msubsup_superscript", true, "superscript");
|
||||
}, "msubsup element");
|
||||
test(function() {
|
||||
verify_displaystyle("munder_base", false, "base");
|
||||
verify_displaystyle("munder_underscript", true, "underscript");
|
||||
}, "munder element");
|
||||
test(function() {
|
||||
verify_displaystyle("mover_base", false, "base");
|
||||
verify_displaystyle("mover_overscript", true, "overscript");
|
||||
}, "mover element");
|
||||
test(function() {
|
||||
verify_displaystyle("munderover_base", false, "base");
|
||||
verify_displaystyle("munderover_underscript", true, "underscript");
|
||||
verify_displaystyle("munderover_overscript", true, "overscript");
|
||||
}, "munderover element");
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<math displaystyle="true">
|
||||
<mtable>
|
||||
<mtr>
|
||||
<mtd>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="cell_false">⫿</mo>
|
||||
</mstyle>
|
||||
</mtd>
|
||||
<mtd>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="cell_true">⫿</mo>
|
||||
</mstyle>
|
||||
</mtd>
|
||||
</mtr>
|
||||
</mtable>
|
||||
</math>
|
||||
<math>
|
||||
<mfrac>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mfrac_numerator">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mfrac_denominator">⫿</mo>
|
||||
</mstyle>
|
||||
</mfrac>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<mroot>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="mroot_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mroot_index">⫿</mo>
|
||||
</mstyle>
|
||||
</mroot>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<msub>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="msub_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="msub_subscript">⫿</mo>
|
||||
</mstyle>
|
||||
</msub>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<msup>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="msup_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="msup_superscript">⫿</mo>
|
||||
</mstyle>
|
||||
</msup>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<msubsup>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="msubsup_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="msubsup_subscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="msubsup_superscript">⫿</mo>
|
||||
</mstyle>
|
||||
</msubsup>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<mmultiscripts>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="mmultiscripts_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mmultiscripts_subscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mmultiscripts_superscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mprescripts/>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mmultiscripts_presubscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mmultiscripts_presuperscript">⫿</mo>
|
||||
</mstyle>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<munder>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="munder_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="munder_underscript">⫿</mo>
|
||||
</mstyle>
|
||||
</munder>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<mover>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="mover_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mover_overscript">⫿</mo>
|
||||
</mstyle>
|
||||
</mover>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<munderover>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="munderover_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="munderover_underscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="munderover_overscript">⫿</mo>
|
||||
</mstyle>
|
||||
</munderover>
|
||||
</math>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Legacy mathsize values</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see four "A" of equal size:</p>
|
||||
<math>
|
||||
<mtext>A</mtext>
|
||||
<mtext>A</mtext>
|
||||
<mtext>A</mtext>
|
||||
<mtext>A</mtext>
|
||||
</math>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Legacy mathsize values</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#legacy-mathml-style-attributes">
|
||||
<meta name="assert" content="Verify that legacy values for mathsize have no effect.">
|
||||
<link rel="match" href="mathsize-attribute-legacy-values-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see four "A" of equal size:</p>
|
||||
<math>
|
||||
<mtext>A</mtext>
|
||||
<mtext mathsize="small">A</mtext>
|
||||
<mtext mathsize="medium">A</mtext>
|
||||
<mtext mathsize="big">A</mtext>
|
||||
</math>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,7 +7,8 @@
|
|||
<meta name="assert" content="Verify that border is taken into account.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/feature-detection.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -16,35 +17,83 @@
|
|||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-border")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Border properties on mrow");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-border-rtl")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Border properties on mrow (rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-border-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 20, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 20, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height");
|
||||
}, "Border properties on mrow (shorthand)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-border-logical")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-logical").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Border properties on mrow (logical)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-border-logical-rtl")
|
||||
assert_approx_equals(s.left, 30, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-logical-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Border properties on mrow (logical, rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-border-logical-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 30, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 30, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-logical-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height");
|
||||
}, "Border properties on mrow (logical, shorthand)");
|
||||
|
||||
done();
|
||||
|
|
@ -66,6 +115,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-border-rtl"
|
||||
style="border-left: 20px solid transparent;
|
||||
border-right: 30px solid transparent;
|
||||
border-top: 40px solid transparent;
|
||||
border-bottom: 50px solid transparent;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
@ -89,6 +151,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-border-logical-rtl"
|
||||
style="border-inline-start: 20px solid transparent;
|
||||
border-inline-end: 30px solid transparent;
|
||||
border-block-start: 40px solid transparent;
|
||||
border-block-end: 50px solid transparent;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -22,12 +22,13 @@
|
|||
continue;
|
||||
|
||||
var style = "border-left: 30px solid; border-right: 40px solid; border-top: 50px solid; border-bottom: 60px solid;";
|
||||
var styleRTL = `direction: rtl; ${style}`;
|
||||
|
||||
if (FragmentHelper.isEmpty(tag)) {
|
||||
test(function() {
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 30 + 40, epsilon, "left/right border");
|
||||
assert_approx_equals(s.height_delta, 50 + 60, epsilon, "top/bottom border");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right border");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom border");
|
||||
}, `Border properties on ${tag}`);
|
||||
continue;
|
||||
}
|
||||
|
|
@ -38,7 +39,19 @@
|
|||
assert_approx_equals(s.right_delta, 40, epsilon, "right border");
|
||||
assert_approx_equals(s.top_delta, 50, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom border");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
|
||||
}, `Border properties on ${tag}`);
|
||||
|
||||
test(function() {
|
||||
var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
|
||||
assert_approx_equals(s.left_delta, 30, epsilon, "left border");
|
||||
assert_approx_equals(s.right_delta, 40, epsilon, "right border");
|
||||
assert_approx_equals(s.top_delta, 50, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom border");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
|
||||
}, `Border properties on ${tag} (rtl)`);
|
||||
}
|
||||
|
||||
done();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
<meta name="assert" content="Verify that margin is taken into account.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/feature-detection.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -16,35 +17,83 @@
|
|||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-margin")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right margin");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
|
||||
var b = document.getElementById("mrow-margin").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-margin-rtl")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right margin");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
|
||||
var b = document.getElementById("mrow-margin-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-margin-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right margin");
|
||||
assert_approx_equals(s.top, 20, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom, 20, epsilon, "bottom margin");
|
||||
var b = document.getElementById("mrow-margin-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (shorthand)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-margin-logical")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right margin");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
|
||||
var b = document.getElementById("mrow-margin-logical").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (logical)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-margin-logical-rtl")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right margin");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
|
||||
var b = document.getElementById("mrow-margin-logical-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (logical, rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-margin-logical-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right margin");
|
||||
assert_approx_equals(s.top, 30, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom, 30, epsilon, "bottom margin");
|
||||
var b = document.getElementById("mrow-margin-logical-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (logical, shorthand)");
|
||||
|
||||
done();
|
||||
|
|
@ -66,6 +115,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-margin-rtl"
|
||||
style="margin-left: 20px;
|
||||
margin-right: 30px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 50px;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
@ -89,6 +151,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-margin-logical-rtl"
|
||||
style="margin-inline-start: 20px;
|
||||
margin-inline-end: 30px;
|
||||
margin-block-start: 40px;
|
||||
margin-block-end: 50px;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -22,12 +22,15 @@
|
|||
continue;
|
||||
|
||||
var style = "margin-left: 30px; margin-right: 40px; margin-top: 50px; margin-bottom: 60px;";
|
||||
var styleRTL = `direction: rtl; ${style}`;
|
||||
|
||||
if (FragmentHelper.isEmpty(tag)) {
|
||||
test(function() {
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 30 + 40, epsilon, "left/right margin");
|
||||
assert_approx_equals(s.height_delta, 50 + 60, epsilon, "top/bottom margin");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `Margin properties on ${tag}`);
|
||||
continue;
|
||||
}
|
||||
|
|
@ -38,7 +41,31 @@
|
|||
assert_approx_equals(s.right_delta, 40, epsilon, "right margin");
|
||||
assert_approx_equals(s.top_delta, 50, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `Margin properties on ${tag}`);
|
||||
|
||||
test(function() {
|
||||
var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
|
||||
assert_approx_equals(s.left_delta, 30, epsilon, "left margin");
|
||||
assert_approx_equals(s.right_delta, 40, epsilon, "right margin");
|
||||
assert_approx_equals(s.top_delta, 50, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `Margin properties on ${tag} (rtl)`);
|
||||
|
||||
test(function() {
|
||||
// Apply the same margin style on the parent mrow.
|
||||
// The margins are not collapsed so they should be added twice.
|
||||
var s = compareSpaceWithAndWithoutStyle(tag, style, style);
|
||||
assert_approx_equals(s.left_delta, 30 * 2, epsilon, "left margin");
|
||||
assert_approx_equals(s.right_delta, 40 * 2, epsilon, "right margin");
|
||||
assert_approx_equals(s.top_delta, 50 * 2, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom_delta, 60 * 2, epsilon, "bottom margin");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `Margin properties on ${tag} (no margin-collapsing)`);
|
||||
}
|
||||
|
||||
done();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
<meta name="assert" content="Verify that padding is taken into account.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/feature-detection.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -16,35 +17,83 @@
|
|||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-padding")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Padding properties on mrow");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-padding-rtl")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Padding properties on mrow (rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-padding-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 20, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 20, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height");
|
||||
}, "Padding properties on mrow (shorthand)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-padding-logical")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-logical").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Padding properties on mrow (logical)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-padding-logical-rtl")
|
||||
assert_approx_equals(s.left, 30, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-logical-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Padding properties on mrow (logical, rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-padding-logical-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 30, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 30, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-logical-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height");
|
||||
}, "Padding properties on mrow (logical, shorthand)");
|
||||
|
||||
done();
|
||||
|
|
@ -66,6 +115,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-padding-rtl"
|
||||
style="padding-left: 20px;
|
||||
padding-right: 30px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 50px;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
@ -89,6 +151,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-padding-logical-rtl"
|
||||
style="padding-inline-start: 20px;
|
||||
padding-inline-end: 30px;
|
||||
padding-block-start: 40px;
|
||||
padding-block-end: 50px;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -22,12 +22,13 @@
|
|||
continue;
|
||||
|
||||
var style = "padding-left: 30px; padding-right: 40px; padding-top: 50px; padding-bottom: 60px;";
|
||||
var styleRTL = `direction: rtl; ${style}`;
|
||||
|
||||
if (FragmentHelper.isEmpty(tag)) {
|
||||
test(function() {
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 30 + 40, epsilon, "left/right padding");
|
||||
assert_approx_equals(s.height_delta, 50 + 60, epsilon, "top/bottom padding");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right padding");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom padding");
|
||||
}, `Padding properties on ${tag}`);
|
||||
continue;
|
||||
}
|
||||
|
|
@ -38,7 +39,19 @@
|
|||
assert_approx_equals(s.right_delta, 40, epsilon, "right padding");
|
||||
assert_approx_equals(s.top_delta, 50, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
|
||||
}, `Padding properties on ${tag}`);
|
||||
|
||||
test(function() {
|
||||
var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
|
||||
assert_approx_equals(s.left_delta, 30, epsilon, "left padding");
|
||||
assert_approx_equals(s.right_delta, 40, epsilon, "right padding");
|
||||
assert_approx_equals(s.top_delta, 50, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
|
||||
}, `Padding properties on ${tag} (rtl)`);
|
||||
}
|
||||
|
||||
done();
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>padding</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
|
||||
<meta name="assert" content="Verify that padding is taken into account.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
|
||||
for (tag in MathMLFragments) {
|
||||
if (!FragmentHelper.isEmpty(tag))
|
||||
continue;
|
||||
|
||||
test(function() {
|
||||
var style = "padding-left: 10px; padding-right: 20px; padding-top: 15px; padding-bottom: 25px;";
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 10 + 20, epsilon, "padding left/right");
|
||||
assert_approx_equals(s.height_delta, 15 + 25, epsilon, "padding top/bottom");
|
||||
}, `Padding properties on ${tag}`);
|
||||
}
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Padding/border/margin</title>
|
||||
<body>
|
||||
<p>This test passes if you see a purple square of side 100px, surrounded by a
|
||||
10px blue padding, surrounded by a 10px blue/yellow dashed border, itself
|
||||
surrounded by a 10px pink margin.</p>
|
||||
</div>
|
||||
<div style="background: pink; position: absolute; left: 10px; top: 3em;">
|
||||
<div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
|
||||
<div style="width: 100px; height: 100px; background: purple;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Padding/border/margin</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-of-mrow">
|
||||
<link rel="match" href="padding-border-margin-001-ref.html"/>
|
||||
<meta name="assert" content="Verify visual rendering of padding/border/margin on the mrow element.">
|
||||
<body>
|
||||
<p>This test passes if you see a purple square of side 100px, surrounded by a
|
||||
10px blue padding, surrounded by a 10px blue/yellow dashed border, itself
|
||||
surrounded by a 10px pink margin.</p>
|
||||
<div style="background: pink; position: absolute; left: 10px; top: 3em;">
|
||||
<math>
|
||||
<mrow style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
|
||||
<mspace width="100px" height="100px" style="background: purple;"></mspace>
|
||||
</mrow>
|
||||
</math>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>width, height, inline-size and block-size</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
|
||||
<meta name="assert" content="Verify that width, height, inline-size and block-size properties are ignored.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
|
||||
for (tag in MathMLFragments) {
|
||||
if (!FragmentHelper.isValidChildOfMrow(tag) || tag === "mtable")
|
||||
continue;
|
||||
|
||||
test(function() {
|
||||
var style = "width: 500px; height: 400px;";
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 0, epsilon, "width");
|
||||
assert_approx_equals(s.height_delta, 0, epsilon, "height");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `width and height properties on ${tag}`);
|
||||
|
||||
test(function() {
|
||||
var style = "inline-size: 500px; block-size: 400px;";
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 0, epsilon, "width");
|
||||
assert_approx_equals(s.height_delta, 0, epsilon, "height");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `inline-size and block-size properties on ${tag}`);
|
||||
}
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>writing mode</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
|
||||
<meta name="assert" content="Verify CSS writing mode (writing-mode and directionproperties) for mrow.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/feature-detection.js"></script>
|
||||
<script src="/mathml/support/layout-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
var reference = document.getElementById("horizontal-tb_ltr");
|
||||
|
||||
["horizontal-tb_rtl",
|
||||
"vertical-lr_ltr",
|
||||
"vertical-lr_rtl",
|
||||
"vertical-rl_ltr",
|
||||
"vertical-rl_rtl"].forEach(id => {
|
||||
var element = document.getElementById(id);
|
||||
|
||||
test(function() {
|
||||
var style = window.getComputedStyle(element);
|
||||
var writingMode = id.split("_");
|
||||
assert_equals(style.getPropertyValue("writing-mode"),
|
||||
writingMode[0], "writing-mode");
|
||||
assert_equals(style.getPropertyValue("direction"),
|
||||
writingMode[1], "direction");
|
||||
}, `Inheritance of CSS writing-mode and direction (id='${id}')`);
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
compareLayout(element, reference, epsilon);
|
||||
}, `Layout of mrow (id='${id}')`);
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<p>
|
||||
<math>
|
||||
<mrow id="horizontal-tb_ltr">
|
||||
<mspace style="background: blue"
|
||||
width="20px" height="30px" depth="40px"></mspace>
|
||||
<mspace style="background: black"
|
||||
width="50px" depth="60px"></mspace>
|
||||
<mspace style="background: yellow"
|
||||
width="70px" height="80px"></mspace>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math style="direction: rtl;">
|
||||
<mrow id="horizontal-tb_rtl">
|
||||
<mspace style="background: blue"
|
||||
width="20px" height="30px" depth="40px"></mspace>
|
||||
<mspace style="background: black"
|
||||
width="50px" depth="60px"></mspace>
|
||||
<mspace style="background: yellow"
|
||||
width="70px" height="80px"></mspace>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math style="writing-mode: vertical-lr;">
|
||||
<mrow id="vertical-lr_ltr">
|
||||
<mspace style="background: blue"
|
||||
width="20px" height="30px" depth="40px"></mspace>
|
||||
<mspace style="background: black"
|
||||
width="50px" depth="60px"></mspace>
|
||||
<mspace style="background: yellow"
|
||||
width="70px" height="80px"></mspace>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<mrow id="vertical-lr_rtl">
|
||||
<mspace style="background: blue"
|
||||
width="20px" height="30px" depth="40px"></mspace>
|
||||
<mspace style="background: black"
|
||||
width="50px" depth="60px"></mspace>
|
||||
<mspace style="background: yellow"
|
||||
width="70px" height="80px"></mspace>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math style="writing-mode: vertical-rl;">
|
||||
<mrow id="vertical-rl_ltr">
|
||||
<mspace style="background: blue"
|
||||
width="20px" height="30px" depth="40px"></mspace>
|
||||
<mspace style="background: black"
|
||||
width="50px" depth="60px"></mspace>
|
||||
<mspace style="background: yellow"
|
||||
width="70px" height="80px"></mspace>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<mrow id="vertical-rl_rtl">
|
||||
<mspace style="background: blue"
|
||||
width="20px" height="30px" depth="40px"></mspace>
|
||||
<mspace style="background: black"
|
||||
width="50px" depth="60px"></mspace>
|
||||
<mspace style="background: yellow"
|
||||
width="70px" height="80px"></mspace>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue