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

Update web-platform-tests to revision ea3cae9746c39e8192b91181044144c60d9388e8

Browse source
This commit is contained in:
WPT Sync Bot 2019-03-12 21:33:06 -04:00
parent 9513544e91
commit b3f94b4330
194 changed files with 22476 additions and 15435 deletions
Download patch file Download diff file Expand all files Collapse all files

4
tests/wpt/web-platform-tests/.azure-pipelines.yml
View file

@ -183,7 +183,7 @@ jobs:
- template: tools/ci/azure/install_certs.yml
- template: tools/ci/azure/update_hosts.yml
- template: tools/ci/azure/update_manifest.yml
- script: python ./wpt run --no-manifest-update --no-fail-on-unexpected --install-fonts --test-types reftest testharness --this-chunk $(System.JobPositionInPhase) --total-chunks $(System.TotalJobsInPhase) --chunk-type hash --log-tbpl - --log-tbpl-level info --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json edge_webdriver
- script: python ./wpt run --no-manifest-update --no-fail-on-unexpected --install-fonts --test-types reftest testharness --this-chunk $(System.JobPositionInPhase) --total-chunks $(System.TotalJobsInPhase) --chunk-type hash --log-tbpl - --log-tbpl-level info --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt edge_webdriver
displayName: 'Run tests'
- task: PublishBuildArtifacts@1
displayName: 'Publish results'
@ -217,7 +217,7 @@ jobs:
- template: tools/ci/azure/install_safari.yml
- template: tools/ci/azure/update_hosts.yml
- template: tools/ci/azure/update_manifest.yml
- script: no_proxy='*' ./wpt run --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --this-chunk=$(System.JobPositionInPhase) --total-chunks=$(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --channel preview safari
- script: no_proxy='*' ./wpt run --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --this-chunk=$(System.JobPositionInPhase) --total-chunks=$(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt --channel preview safari
displayName: 'Run tests'
- task: PublishBuildArtifacts@1
displayName: 'Publish results'

11
tests/wpt/web-platform-tests/.taskcluster.yml
View file

@ -84,6 +84,7 @@ tasks:
--
--channel=${browser.channel}
--log-wptreport=../artifacts/wpt_report.json
--log-wptscreenshot=../artifacts/wpt_screenshot.txt
--no-fail-on-unexpected
--test-type=${chunk[0]}
--this-chunk=${chunk[1]}
@ -111,14 +112,20 @@ tasks:
description: >-
Collect results for all tests affected by a pull request in
${browser.name}.
extra_args: '--no-fail-on-unexpected --log-wptreport=../artifacts/wpt_report.json'
extra_args: >-
--no-fail-on-unexpected
--log-wptreport=../artifacts/wpt_report.json
--log-wptscreenshot=../artifacts/wpt_screenshot.txt
- name: wpt-${browser.name}-${browser.channel}-results-without-changes
checkout: FETCH_HEAD^
diff_range: FETCH_HEAD
description: >-
Collect results for all tests affected by a pull request in
${browser.name} but without the changes in the PR.
extra_args: '--no-fail-on-unexpected --log-wptreport=../artifacts/wpt_report.json'
extra_args: >-
--no-fail-on-unexpected
--log-wptreport=../artifacts/wpt_report.json
--log-wptscreenshot=../artifacts/wpt_screenshot.txt
each(operation):
taskId: {$eval: 'as_slugid(operation.name)'}
taskGroupId: {$eval: 'as_slugid("task group")'}

11
tests/wpt/web-platform-tests/animation-worklet/worklet-animation-cancel-ref.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<title>Reference for Canceling a playing WorkletAnimation should remove the effect</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div id="box"></div>

45
tests/wpt/web-platform-tests/animation-worklet/worklet-animation-cancel.https.html Normal file
View file

@ -0,0 +1,45 @@
<html class="reftest-wait">
<title>Canceling a playing WorkletAnimation should remove the effect</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<meta name="assert" content="Canceling a playing animation should remove the effect">
<link rel="match" href="worklet-animation-cancel-ref.html">
<script src="/web-animations/testcommon.js"></script>
<script src="/common/reftest-wait.js"></script>
<script src="common.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div id="box"></div>
<script>
registerConstantLocalTimeAnimator(500).then(_ => {
const box = document.getElementById('box');
const effect = new KeyframeEffect(box,
[
{transform: 'translateY(0)'},
{transform: 'translateY(200px)'}
], {
duration: 1000,
iterations: Infinity
}
);
const animation = new WorkletAnimation('constant_time', effect);
animation.play();
waitForAsyncAnimationFrames(1).then(_ => {
// Canceling a playing animation should remove the effect.
animation.cancel();
waitForAsyncAnimationFrames(1).then(_ => {
takeScreenshot();
});
});
});
</script>

126
tests/wpt/web-platform-tests/animation-worklet/worklet-animation-creation.https.html Normal file
View file

@ -0,0 +1,126 @@
<!DOCTYPE html>
<title>Verify that WorkletAnimation is correctly created</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="common.js"></script>
<style>
.scroller {
height: 100px;
width: 100px;
overflow: scroll;
}
.content {
height: 500px;
width: 500px;
}
</style>
<script>
function CreateKeyframeEffect(element) {
return new KeyframeEffect(
element,
[
{ transform: 'translateY(0%)' },
{ transform: 'translateY(100%)' }
],
{ duration: 3000, fill: 'forwards' }
);
}
</script>
<script id="simple_animate" type="text/worklet">
registerAnimator("test-animator", class {
animate(currentTime, effect) {}
});
</script>
<div id='element'></div>
<div id='element2'></div>
<div class='scroller'>
<div class='content'></div>
</div>
<script>
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let workletAnimation = new WorkletAnimation('test-animator', effect);
assert_equals(workletAnimation.playState, 'idle');
assert_equals(workletAnimation.timeline, document.timeline);
}, 'WorkletAnimation creation without timeline should use default documentation timeline');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let workletAnimation = new WorkletAnimation('test-animator', effect);
assert_equals(workletAnimation.playState, 'idle');
}, 'WorkletAnimation creation with timeline should work');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let options = { my_param: 'foo', my_other_param: true };
let workletAnimation = new WorkletAnimation(
'test-animator', effect, document.timeline, options);
assert_equals(workletAnimation.playState, 'idle');
}, 'WorkletAnimation creation with timeline and options should work');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let scroller = document.querySelector('.scroller');
let scrollTimeline = new ScrollTimeline(
{ scrollSource: scroller, timeRange: 100, orientation: 'inline' });
let workletAnimation = new WorkletAnimation(
'test-animator', effect, scrollTimeline);
assert_equals(workletAnimation.playState, 'idle');
}, 'ScrollTimeline is a valid timeline for a WorkletAnimation');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let constructorFunc = function() { new WorkletAnimation(
'test-animator', []); };
assert_throws('NotSupportedError', constructorFunc);
}, 'If there are no effects specified, object construction should fail');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let otherDoc = document.implementation.createHTMLDocument();
let otherElement = otherDoc.createElement('div');
otherDoc.body.appendChild(otherElement);
let otherEffect = CreateKeyframeEffect(otherElement);
let constructorFunc = function() { new WorkletAnimation(
'test-animator', [ effect, otherEffect ]); };
assert_throws('NotSupportedError', constructorFunc);
}, 'If the effects are from different documents, object construction should fail');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
// TODO(crbug.com/781816): Allow KeyframeEffects with no target in AnimationWorklet.
let effect = CreateKeyframeEffect(null);
let effect2 = CreateKeyframeEffect(document.querySelector('#element'));
let constructorFunc = function() { new WorkletAnimation(
'test-animator', [ effect, effect2 ]); };
assert_throws('NotSupportedError', constructorFunc);
let constructorFunc2 = function() { new WorkletAnimation(
'test-animator', [ effect2, effect ]); };
assert_throws('NotSupportedError', constructorFunc2);
}, 'If an effect has no target, object construction should fail');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let constructorFunc = function() {
new WorkletAnimation('unregistered-animator', effect);
};
assert_throws('InvalidStateError', constructorFunc);
}, 'Constructing worklet animation for unregisested animator should throw');
</script>

12
tests/wpt/web-platform-tests/animation-worklet/worklet-animation-duration-ref.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<title>Reference for WorkletAnimation should continue to be in effect forever, even if its duration is passed</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: green;
transform: translateY(100px);
}
</style>
<div id="box"></div>

40
tests/wpt/web-platform-tests/animation-worklet/worklet-animation-duration.https.html Normal file
View file

@ -0,0 +1,40 @@
<html>
<title>WorkletAnimation should continue to be in effect forever, even if its duration is passed</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<link rel="match" href="worklet-animation-duration-ref.html">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="common.js"></script>
<div id="box"></div>
<script>
promise_test(async t => {
await registerConstantLocalTimeAnimator(0.5);
const box = document.getElementById('box');
const effect = new KeyframeEffect(box,
[
{transform: 'translateY(0px)' },
{transform: 'translateY(200px)' }
], {
duration: 1,
}
);
const animation = new WorkletAnimation('constant_time', effect);
animation.play();
let expected_transform = "matrix(1, 0, 0, 1, 0, 100)";
await waitForAnimationFrameWithCondition(_ => {
return getComputedStyle(box).transform == expected_transform;
});
// The animation is specified to last for 1 millisecond
await new Promise(resolve => step_timeout(resolve, 500));
assert_equals(getComputedStyle(document.getElementById("box")).transform, expected_transform);
}, "WorkletAnimation should continue to be in effect forever, even if its duration is passed");
</script>

12
tests/wpt/web-platform-tests/animation-worklet/worklet-animation-start-delay-ref.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<title>Reference for WorkletAnimation should respect delay given in options</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div class="box"></div>
<div style="transform: translateX(100px);" class="box"></div>

64
tests/wpt/web-platform-tests/animation-worklet/worklet-animation-start-delay.https.html Normal file
View file

@ -0,0 +1,64 @@
<html class="reftest-wait">
<title>WorkletAnimation should respect delay given in options</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<meta name="assert" content="Worklet Animation should respect delay given in options">
<link rel="match" href="worklet-animation-start-delay-ref.html">
<script src="/web-animations/testcommon.js"></script>
<script src="/common/reftest-wait.js"></script>
<script src="common.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id="t0" class="box"></div>
<div id="t1" class="box"></div>
<div id="out"></div>
<script id="visual_update" type="text/worklet">
registerAnimator("t0_animator", class {
animate(currentTime, effect) {
effect.localTime = 500;
}
});
registerAnimator("t1_animator", class {
animate(currentTime, effect) {
effect.localTime = 5500;
}
});
</script>
<script>
runInAnimationWorklet(
document.getElementById('visual_update').textContent
).then(()=>{
const keyframes = [
{transform: 'translateX(0)' },
{transform: 'translateX(200px)' }
];
const options = {
duration: 1000,
delay: 5000,
};
const $t0 = document.getElementById('t0');
const $t0_effect = new KeyframeEffect($t0, keyframes, options);
const $t0_animation = new WorkletAnimation('t0_animator', $t0_effect);
const $t1 = document.getElementById('t1');
const $t1_effect = new KeyframeEffect($t1, keyframes, options);
const $t1_animation = new WorkletAnimation('t1_animator', $t1_effect);
$t0_animation.play();
$t1_animation.play();
waitForAsyncAnimationFrames(1).then(_ => {
takeScreenshot();
});
});
</script>

5
tests/wpt/web-platform-tests/common/sleep.py
View file

@ -1,12 +1,13 @@
import time
import timeit
# sleep can be lower than requested value in some platforms: https://bugs.python.org/issue31539
# We add padding here to compensate for that.
sleep_padding = 15.0
def sleep_at_least(sleep_in_ms):
sleep_until = time.time() + (sleep_in_ms / 1E3)
sleep_until = timeit.default_timer() + (sleep_in_ms / 1E3)
time.sleep((sleep_in_ms + sleep_padding) / 1E3)
# Check if the padding was sufficient; if not, sleep again.
while time.time() < sleep_until:
while timeit.default_timer() < sleep_until:
time.sleep(sleep_padding / 1E3)

41
tests/wpt/web-platform-tests/css/css-cascade/revert-val-002.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Cascade: 'revert' keyword interaction with !important</title>
<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://drafts.csswg.org/css-cascade/#default">
<link rel="match" href="reference/ref-filled-green-100px-square.xht">
<style>
#outer {
background-color: red;
width: 100px;
height: 100px;
overflow: hidden;
}
#inner {
/* This should win over `revert` */
display: block !important;
}
#inner {
color: green;
background-color: green;
display: revert;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="outer">
<span id="inner">
This<br>
is<br>
filler<br>
text.<br>
This<br>
is<br>
filler<br>
text.
</span>
</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-cascade/revert-val-003.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Cascade: 'revert' keyword in transition</title>
<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://drafts.csswg.org/css-cascade/#default">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
html, body { margin: 0 }
h1 {
margin: 0;
transition: margin 10s;
transition-delay: -5s; /* So we can expect it to be half-way the transition when toggling the property */
}
</style>
<h1>This is a header that should get some margin</h1>
<script>
test(function() {
const el = document.querySelector("h1");
const cs = getComputedStyle(el);
assert_equals(cs.marginTop, "0px", "Margin before transition");
el.style.margin = "revert";
const midTransition = cs.marginTop;
assert_not_equals(midTransition, "0px", "Margin mid transition");
el.style.transition = "none";
assert_not_equals(cs.marginTop, midTransition, "Default margin");
}, "revert works with transitions");
</script>

62
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage-ref.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: Testcase for bug 1526567</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.webconsole-app {
display: grid;
}
.sidebar {
display: flex;
flex: 1;
flex-direction: row;
background: blue;
}
.controlled {
display: flex;
overflow: auto;
}
.sidebar-wrapper {
display: grid;
grid-template-columns: 100px;
grid-template-rows: 50px 1fr;
overflow: hidden;
}
.sidebar-contents {
grid-row: 2 / 3;
overflow: auto;
}
</style>
</head>
<body>
<div class="webconsole-app">
<div class="sidebar">
<div class="controlled">
<div class="sidebar-wrapper">
<div></div>
<div class="sidebar-contents">
<div style="height:400px; background: grey"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

69
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Testcase for bug 1526567</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#behave-auto">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
<link rel="match" href="grid-item-overflow-auto-max-height-percentage-ref.html">
<meta name="assert" content="Check that max-height:100% has no effect on a grid item's max-content contribution, since the percentage basis is indefinite in this case.">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.webconsole-app {
display: grid;
height: 200px;
}
.sidebar {
display: flex;
flex: 1;
flex-direction: row;
height: 100%;
background: blue;
}
.controlled {
display: flex;
overflow: auto;
}
.sidebar-wrapper {
display: grid;
grid-template-columns: 100px;
grid-template-rows: 50px 1fr;
overflow: hidden;
}
.sidebar-contents {
grid-row: 2 / 3;
overflow: auto;
max-height: 100%;
}
</style>
</head>
<body>
<div class="webconsole-app">
<div class="sidebar">
<div class="controlled">
<div class="sidebar-wrapper">
<div></div>
<div class="sidebar-contents">
<div style="height:400px; background: grey"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

312
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html Normal file
View file

@ -0,0 +1,312 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
display: inline-grid;
height: 10px;
width: 10px;
grid: 1px auto 2px / 3px auto 4px;
border: solid 1px;
margin: 0 20px 20px 0;
place-items: start;
}
.item {
background: cyan;
grid-area: 2/2;
height: 30px;
width: 30px;
}
.content {
height: 30px;
width: 30px;
}
.min {
height: 7px;
width: 3px;
}
.min:not(.max):not(.size) {
height: 30px;
width: 30px;
}
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
.vll .item { writing-mode: vertical-lr; direction:ltr; }
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
.sll .item { writing-mode: sideways-lr; direction:ltr; }
.slr .item { writing-mode: sideways-lr; direction:rtl; }
</style>
<div class="hl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vll">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vlr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="slr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="srl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>

318
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-percentage-sizes-001.html Normal file
View file

@ -0,0 +1,318 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: item [min-|max-]*[width|height] percentages</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
<link rel="match" href="grid-item-percentage-sizes-001-ref.html">
<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks.">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
display: inline-grid;
height: 10px;
width: 10px;
grid: 1px auto 2px / 3px auto 4px;
border: solid 1px;
margin: 0 20px 20px 0;
place-items: start;
}
.item {
background: cyan;
grid-area: 2/2;
}
.content {
height: 30px;
width: 30px;
}
.min {
min-height: 100%;
min-width: 100%;
}
.max {
max-height: 100%;
max-width: 100%;
}
.size {
height: 100%;
width: 100%;
}
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
.vll .item { writing-mode: vertical-lr; direction:ltr; }
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
.sll .item { writing-mode: sideways-lr; direction:ltr; }
.slr .item { writing-mode: sideways-lr; direction:rtl; }
</style>
<div class="hl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vll">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vlr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="slr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="srl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>

312
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-percentage-sizes-002-ref.html Normal file
View file

@ -0,0 +1,312 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
display: inline-grid;
height: 10px;
width: 10px;
grid: 1px auto 2px 3px / 3px auto 4px 2px;
border: solid 1px;
margin: 0 20px 20px 0;
place-items: start;
}
.item {
background: cyan;
grid-area: 2/2/span 2/span 2;
height: 30px;
width: 30px;
}
.content {
height: 30px;
width: 30px;
}
.min {
height: 6px;
width: 5px;
}
.min:not(.max):not(.size) {
height: 30px;
width: 30px;
}
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
.vll .item { writing-mode: vertical-lr; direction:ltr; }
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
.sll .item { writing-mode: sideways-lr; direction:ltr; }
.slr .item { writing-mode: sideways-lr; direction:rtl; }
</style>
<div class="hl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vll">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vlr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="slr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="srl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>

318
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-percentage-sizes-002.html Normal file
View file

@ -0,0 +1,318 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: item [min-|max-]*[width|height] percentages</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
<link rel="match" href="grid-item-percentage-sizes-002-ref.html">
<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=2 auto tracks.">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
display: inline-grid;
height: 10px;
width: 10px;
grid: 1px auto 2px 3px / 3px auto 4px 2px;
border: solid 1px;
margin: 0 20px 20px 0;
place-items: start;
}
.item {
background: cyan;
grid-area: 2/2/span 2/span 2;
}
.content {
height: 30px;
width: 30px;
}
.min {
min-height: 100%;
min-width: 100%;
}
.max {
max-height: 100%;
max-width: 100%;
}
.size {
height: 100%;
width: 100%;
}
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
.vll .item { writing-mode: vertical-lr; direction:ltr; }
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
.sll .item { writing-mode: sideways-lr; direction:ltr; }
.slr .item { writing-mode: sideways-lr; direction:rtl; }
</style>
<div class="hl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vll">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vlr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="slr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="srl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>

316
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-percentage-sizes-003-ref.html Normal file
View file

@ -0,0 +1,316 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] calc() percentages</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
display: inline-grid;
height: 10px;
width: 10px;
grid: 1px auto 2px / 3px auto 4px;
border: solid 1px;
margin: 0 20px 20px 0;
place-items: start;
}
.item {
background: cyan;
grid-area: 2/2;
height: 30px;
width: 30px;
}
.content {
height: 30px;
width: 30px;
}
.min {
height: 9px;
width: 5px;
}
.min:not(.max):not(.size) {
height: 30px;
width: 30px;
}
.size:not(.min) {
height: 32px;
width: 32px;
}
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
.vll .item { writing-mode: vertical-lr; direction:ltr; }
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
.sll .item { writing-mode: sideways-lr; direction:ltr; }
.slr .item { writing-mode: sideways-lr; direction:rtl; }
</style>
<div class="hl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vll">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vlr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="slr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="srl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>

318
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-percentage-sizes-003.html Normal file
View file

@ -0,0 +1,318 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: item [min-|max-]*[width|height] calc() percentages</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
<link rel="match" href="grid-item-percentage-sizes-003-ref.html">
<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks.">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
display: inline-grid;
height: 10px;
width: 10px;
grid: 1px auto 2px / 3px auto 4px;
border: solid 1px;
margin: 0 20px 20px 0;
place-items: start;
}
.item {
background: cyan;
grid-area: 2/2;
}
.content {
height: 30px;
width: 30px;
}
.min {
min-height: calc(2px + 100%);
min-width: calc(2px + 100%);
}
.max {
max-height: calc(2px + 100%);
max-width: calc(2px + 100%);
}
.size {
height: calc(2px + 100%);
width: calc(2px + 100%);
}
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
.vll .item { writing-mode: vertical-lr; direction:ltr; }
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
.sll .item { writing-mode: sideways-lr; direction:ltr; }
.slr .item { writing-mode: sideways-lr; direction:rtl; }
</style>
<div class="hl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vrr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vll">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="vlr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="slr">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>
<div class="srl">
<div class="grid">
<div class="item max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item max size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min size">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max">
<div class="content"></div>
</div>
</div>
<div class="grid">
<div class="item min max size">
<div class="content"></div>
</div>
</div>
</div>

20
tests/wpt/web-platform-tests/css/css-sizing/range-percent-intrinsic-size-2-ref.html
View file

@ -97,12 +97,14 @@ input[orient="vertical"] {
<input type="range" class="mb" orient="vertical">
</div></div>
<div class="grid" style="grid: 4px / auto">
<input type="range" class="mb" orient="vertical" style="height:2px">
<div class="grid" style="grid: min-content / auto">
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
</div>
<div class="grid" style="grid: 30px / auto">
<input type="range" class="b" orient="vertical" style="height:15px">
<div class="grid" style="grid: min-content / auto">
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
</div>
<div class="grid" style="grid: 30px / auto">
@ -117,12 +119,14 @@ input[orient="vertical"] {
<input type="range" class="mb n" orient="vertical">
</div></div>
<div class="grid" style="grid: 4px / auto">
<input type="range" class="mb n" orient="vertical" style="height:2px">
<div class="grid" style="grid: min-content / auto">
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
</div>
<div class="grid" style="grid: 30px / auto">
<input type="range" class="b" orient="vertical" style="height:15px">
<div class="grid" style="grid: min-content / auto">
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
</div>
<div class="grid" style="grid: 30px / auto">

5
tests/wpt/web-platform-tests/css/css-sizing/range-percent-intrinsic-size-2a-ref.html
View file

@ -71,8 +71,9 @@ input[orient="vertical"] {
<input type="range" class="mb" orient="vertical">
</div></div>
<div class="grid" style="grid: 30px / auto">
<input type="range" class="b" orient="vertical" style="height:15px">
<div class="grid" style="grid: min-content / auto">
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
</div>
<div class="grid" style="grid: 30px / auto">

25
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: span</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span>&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span>&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: colour</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.color { color:blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="color">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="color">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font-weight</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.fontweight { font-weight: bold; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontweight">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontweight">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font-style</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.fontstyle { font-style: italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontstyle">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontstyle">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-004-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: margin 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.margin { margin:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="margin">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="margin">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-005-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: padding 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.padding { padding:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="padding">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="padding">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-006-ref.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: border 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.margin { margin:0; }
.padding { padding:0; }
.border { border:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="border">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="border">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-007-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font size 100%</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.fontsize { font-size:100%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsize">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsize">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font size 120%</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.fontsizeplus { font-size:120%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsizeplus">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsizeplus">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: margin &gt; 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.margin { margin: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="margin">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="margin">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: padding &gt; 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.padding { padding: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="padding">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="padding">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: border &gt; 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.border { border: 1px solid #ccc; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="border">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="border">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: isolation, bdi</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<!-- Notes:
This test only works if bdi and dir=auto are supported by the browser.
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-013-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: isolation, auto</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<!-- Notes:
This test only works if bdi and dir=auto are supported by the browser.
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: text-decoration</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
.styled { text-decoration: underline; }
</style>
</head>
<body>
<p class="instructions">Test passes if both boxes look the same.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-015-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: text-decoration</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { text-decoration: underline; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: outline</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { outline: 1px solid blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-017-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: em element</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-style: italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if both boxes look the same.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<em>&zwj;ع&zwj;</em>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
It also assumes that the default rendering for the em element is italic.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-018-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: b element</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-weight: bold; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<b>&zwj;ع&zwj;</b>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
It also assumes that the default rendering for the b element is bold.
-->
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, colour</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { color:blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</p>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<!-- Notes:
This test uses the Noto Sans N'Ko font to control variables related to font choice.
-->
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, font-style</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-style:italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</p>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<!-- Notes:
This test uses the Noto Sans N'Ko font to control variables related to font choice.
-->
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, text-decoration</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { text-decoration: underline; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</p>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<!-- Notes:
This test uses the Noto Sans N'Ko font to control variables related to font choice.
-->
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-000-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>marked up diacritic: span</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<div class="ref" lang="ar" dir="rtl">ع&#x064E;ع ع&#x0651;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&#x064E;ع ع&#x0651;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-001-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: colour</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { color:blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small></p>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-002-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font-weight</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-weight: bold; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-003-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font-style</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-style: italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-004-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: margin 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { margin:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-005-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: padding 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { padding:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-006-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: border 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { border:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-007-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font size 100%</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-size:100%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-008-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font size 120%</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-size:120%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-009-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: margin &gt; 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 5em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { margin: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-010-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: padding &gt; 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 5em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { padding: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-011-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: border &gt; 0</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 5em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { border: 1px solid #ccc; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_lig-000-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>ligatures: span</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<div class="ref" lang="ar" dir="rtl">علا</div>
<div class="ref" lang="ar" dir="rtl">علا</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-000.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: span</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries with no styling change.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-000-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<div class="test" lang="ar" dir="rtl">ع<span>ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span>&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-001.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: colour</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to colour.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-001-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.color { color:blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="color">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="color">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-002.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font-weight</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes in font weight.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-002-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.fontweight { font-weight: bold; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="fontweight">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontweight">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-003.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font-style</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes in font style.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-003-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.fontstyle { font-style: italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="fontstyle">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontstyle">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-004.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: margin 0</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries when margin is set to 0.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-004-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.margin { margin:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="margin">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="margin">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-005.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: padding 0</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries when padding is set to 0.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-005-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.padding { padding:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="padding">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="padding">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

34
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-006.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: border 0</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries when border is set to 0.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-006-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.margin { margin:0; }
.padding { padding:0; }
.border { border:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="border">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="border">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-007.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font size 100%</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries when font-size is set to 100%.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-007-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.fontsize { font-size:100%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="fontsize">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsize">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-008.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font size 120%</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to font-size.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-008-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.fontsizeplus { font-size:120%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="fontsizeplus">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsizeplus">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-009.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: margin &gt; 0</title>
<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when marginis set to a non-zero value.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-009-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.margin { margin: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="margin">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="margin">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-010.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: padding &gt; 0</title>
<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when padding is set to a non-zero value.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-010-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.padding { padding: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="padding">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="padding">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-011.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: border &gt; 0</title>
<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when border is set to a non-zero value.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-011-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.border { border: 1px solid #ccc; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="border">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="border">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-012.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: isolation, bdi</title>
<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when isolation occurs.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-012-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
<div class="test" lang="ar" dir="rtl">ع<bdi>ع</bdi>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<!-- Notes:
This test only works if bdi and dir=auto are supported by the browser.
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-013.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: isolation, auto</title>
<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when isolation occurs.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-012-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
<div class="test" lang="ar" dir="rtl">ع<span dir="auto">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<!-- Notes:
This test only works if bdi and dir=auto are supported by the browser.
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-014.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: text-decoration</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes in text-decoration.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-014-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { text-decoration: underline; }
</style>
</head>
<body>
<p class="instructions">Test passes if both boxes look the same.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-015.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: text-decoration</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes in text-decoration.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-015-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { text-decoration: underline; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-016.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: outline</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes in outline.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-016-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { outline: 1px solid blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-017.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: em element</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for the em element.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-017-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-style: italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if both boxes look the same.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<em>ع</em>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
It also assumes that the default rendering for the em element is italic.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-018.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: b element</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for the b element.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-018-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-weight: bold; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<b>ع</b>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
It also assumes that the default rendering for the b element is bold.
-->
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-020.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, colour</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to colour in N'Ko.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-020-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { color:blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</p>
<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<!-- Notes:
This test uses the Noto Sans N'Ko font to control variables related to font choice.
-->
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-021.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, font-style</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to font-style in N'Ko.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-021-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-style:italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</p>
<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<!-- Notes:
This test uses the Noto Sans N'Ko font to control variables related to font choice.
-->
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-022.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, text-decoration</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to text-decoration in N'Ko.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping-022-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { text-decoration: underline; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</p>
<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<!-- Notes:
This test uses the Noto Sans N'Ko font to control variables related to font choice.
-->
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-023.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>mongolian, colour</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to colour in Mongolian.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; }
/* the CSS above is not part of the test */
.styled { color:blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Mongolian characters join in the right-hand line.</p>
<small>Skip the test if the line on the left isn't arranged vertically and joined up.</small>
<div class="test" lang="mn" dir="rtl">ᠨᠨᠨ<br/>ᠨ<span class="styled">ᠨ</span>ᠨ</div>
<!-- Notes:
This test uses the Noto Sans Mongolian font to control variables related to font choice.
The test is manual because Safari (and possibly other browsers) don't support joining for vertical Mongolian anyway, so ref tests wouldn't test the correct thing.
-->
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-024.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>mongolian, font-style</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to font-style in Mongolian.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; }
/* the CSS above is not part of the test */
.styled { font-style:italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Mongolian characters join in the right-hand line.</p>
<small>Skip the test if the line on the left isn't arranged vertically and joined up.</small>
<div class="test" lang="mn" dir="rtl">ᠨᠨᠨ<br/>ᠨ<span class="styled">ᠨ</span>ᠨ</div>
<!-- Notes:
This test uses the Noto Sans Mongolian font to control variables related to font choice.
The test is manual because Safari (and possibly other browsers) don't support joining for vertical Mongolian anyway, so ref tests wouldn't test the correct thing.
-->
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-025.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>mongolian, text-decoration</title>
<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to text-decoration in Mongolian.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; }
/* the CSS above is not part of the test */
.styled { text-decoration:underline; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Mongolian characters join in the right-hand line.</p>
<small>Skip the test if the line on the left isn't arranged vertically and joined up.</small>
<div class="test" lang="mn" dir="rtl">ᠨᠨᠨ<br/>ᠨ<span class="styled">ᠨ</span>ᠨ</div>
<!-- Notes:
This test uses the Noto Sans Mongolian font to control variables related to font choice.
The test is manual because Safari (and possibly other browsers) don't support joining for vertical Mongolian anyway, so ref tests wouldn't test the correct thing.
-->
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-000.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>marked up diacritic: span</title>
<meta name="assert" content="Shaping should not be broken by a span with no styling change for an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-000-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<div class="test" lang="ar" dir="rtl">ع<span>&#x064E;</span>ع ع<span>&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&#x064E;ع ع&#x0651;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-001.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: colour</title>
<meta name="assert" content="Shaping should not be broken for changes to colour for an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-001-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { color:blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small></p>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-002.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font-weight</title>
<meta name="assert" content="Shaping should not be broken for changes in font weight for an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-002-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-weight: bold; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-003.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font-style</title>
<meta name="assert" content="Shaping should not be broken for changes in font style for an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-003-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-style: italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-004.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: margin 0</title>
<meta name="assert" content="Shaping should not be broken when margin is set to 0 for an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-004-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { margin:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-005.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: padding 0</title>
<meta name="assert" content="Shaping should not be broken when padding is set to 0 for an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-005-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { padding:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-006.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: border 0</title>
<meta name="assert" content="Shaping should not be broken when border is set to 0 for an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-006-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { border:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-007.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font size 100%</title>
<meta name="assert" content="Shaping should not be broken when font-size is set to 100% for an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-007-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-size:100%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-008.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font size 120%</title>
<meta name="assert" content="Shaping should not be broken when font-size is changed for an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-008-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { font-size:120%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-009.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: margin &gt; 0</title>
<meta name="assert" content="Shaping SHOULD be broken when margin is set to a non-zero value on an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-009-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 5em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { margin: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-010.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: padding &gt; 0</title>
<meta name="assert" content="Shaping SHOULD be broken when padding is set to a non-zero value on an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-010-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 5em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { padding: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-011.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: border &gt; 0</title>
<meta name="assert" content="Shaping SHOULD be broken when border is set to a non-zero value on an intervening diacritic.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_cchar-011-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 5em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { border: 1px solid #ccc; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_lig-000.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>ligatures: span</title>
<meta name="assert" content="Markup inside a ligature with no styling will NOT break joining behaviour.">
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
<link rel="match" href="reference/shaping_lig-000-ref.html">
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<div class="test" lang="ar" dir="rtl">ع<span>ل</span>ا</div>
<div class="ref" lang="ar" dir="rtl">علا</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

18
tests/wpt/web-platform-tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Test: word-break: break-word and overflow-wrap interaction</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1296042">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<style>
div {
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
overflow-wrap: anywhere;
}
</style>
<p>The boxes below should look the same.</p>
<div>FillerFillerFillerFiller</div>
<div>FillerFillerFillerFiller</div>
<div>FillerFillerFillerFiller</div>

21
tests/wpt/web-platform-tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Test: word-break: break-word and overflow-wrap interaction</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1296042">
<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-word-break">
<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-overflow-wrap">
<link rel="help" href="https://drafts.csswg.org/css-text/#valdef-overflow-wrap-anywhere">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="match" href="word-break-break-word-overflow-wrap-interactions-ref.html">
<style>
div {
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
<p>The boxes below should look the same.</p>
<div style="word-break: break-word; overflow-wrap: anywhere;">FillerFillerFillerFiller</div>
<div style="word-break: break-word; overflow-wrap: break-word;">FillerFillerFillerFiller</div>
<div style="word-break: break-word; overflow-wrap: normal;">FillerFillerFillerFiller</div>

10
tests/wpt/web-platform-tests/css/css-transforms/transform-flattening-001.html Normal file
View file

@ -0,0 +1,10 @@
<!doctype html>
<title>CSS Transforms: Transforms are flattened if transform-style is flat.</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-context">
<link rel="mismatch" href="about:blank">
<!-- Should see a green rectangle, not white -->
<div style="transform: rotateX(45deg)">
<div style="transform: rotateX(45deg); background: green; width: 100px; height: 100px"></div>
</div>

10
tests/wpt/web-platform-tests/css/css-variables/variable-definition-keywords.html
View file

@ -33,19 +33,25 @@
<div id="unsetTest" style="--var: unset;"></div>
</div>
<div id="revertParent" style="--var: 20px;">
<div id="revertTest" style="--var: revert;"></div>
</div>
<script type="text/javascript">
"use strict";
let computedStyle = [
{ elementId: "inheritTest", property: "--var", expectedValue: "20px", testName: "computed style inherit" },
{ elementId: "initialTest", property: "--var", expectedValue: "", testName: "computed style initial" },
{ elementId: "unsetTest", property: "--var", expectedValue: "20px", testName: "computed style unset" }
{ elementId: "unsetTest", property: "--var", expectedValue: "20px", testName: "computed style unset" },
{ elementId: "revertTest", property: "--var", expectedValue: "20px", testName: "computed style revert" }
];
let specifiedStyle = [
{ elementId: "inheritTest", property: "--var", expectedValue: "inherit", testName: "specified style inherit" },
{ elementId: "initialTest", property: "--var", expectedValue: "initial", testName: "specified style initial" },
{ elementId: "unsetTest", property: "--var", expectedValue: "unset", testName: "specified style unset" }
{ elementId: "unsetTest", property: "--var", expectedValue: "unset", testName: "specified style unset" },
{ elementId: "revertTest", property: "--var", expectedValue: "revert", testName: "specified style revert" }
];
computedStyle.forEach(function (csTest) {

8
tests/wpt/web-platform-tests/css/cssom/css-style-declaration-modifications.html
View file

@ -48,6 +48,7 @@
declaration.setProperty("margin-left", "15px");
declaration.setProperty("padding-left", "15px");
assert_equals(declaration.length, 2);
assert_equals(declaration.item(0), "margin-left");
assert_equals(declaration.item(1), "padding-left");
@ -57,7 +58,14 @@
var computedStyle = window.getComputedStyle(document.getElementById("test"));
assert_equals(computedStyle.getPropertyValue("margin-left"), "15px");
assert_equals(computedStyle.getPropertyValue("padding-left"), "15px");
}, "Calling CSSStyleDeclaration#setProperty");
test(function() {
declaration.setProperty("background-color", "red", "ImPoRtAnt");
assert_equals(declaration.getPropertyPriority("background-color"), "important");
}, "setProperty priority should be case-insensitive");
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more