mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
Update web-platform-tests to revision ea3cae9746c39e8192b91181044144c60d9388e8
This commit is contained in:
WPT Sync Bot
parent
9513544e91
commit
b3f94b4330
194 changed files with 22476 additions and 15435 deletions
|
|
@ -37,3 +37,6 @@
|
|||
[Revoke blob URL after creating Request, will fetch]
|
||||
expected: FAIL
|
||||
|
||||
[Revoke blob URL after calling fetch, fetch should succeed]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -332,3 +332,6 @@
|
|||
[Matching font-style: 'oblique -10deg' should prefer 'oblique -50deg -40deg' over 'italic']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-style: 'oblique -21deg' should prefer 'oblique -10deg' over 'italic']
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-000.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-004.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-005.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-006.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-007.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-014.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-015.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-016.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-022.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping_cchar-004.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping_cchar-005.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping_cchar-006.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping_cchar-007.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[word-break-break-word-overflow-wrap-interactions.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[variable-definition-keywords.html]
|
||||
[specified style revert]
|
||||
expected: FAIL
|
||||
|
||||
[computed style revert]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -3,3 +3,6 @@
|
|||
[scroll-behavior: smooth on DIV element]
|
||||
expected: FAIL
|
||||
|
||||
[Instant scrolling while doing history navigation.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -60,3 +60,6 @@
|
|||
[Check if start tag serialization takes into account of its xmlns:* attributes]
|
||||
expected: FAIL
|
||||
|
||||
[Check if redundant xmlns="..." is dropped.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -312,3 +312,9 @@
|
|||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
[javascript-url-abort-return-value-undefined.tentative.html]
|
||||
expected: TIMEOUT
|
||||
[Not aborting fetch for javascript:undefined navigation]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[pageload-image-in-popup.html]
|
||||
[The document for a standalone media file should have one child in the body.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_3.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_4.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
[window-named-properties.html]
|
||||
[Static name on the prototype]
|
||||
expected: FAIL
|
||||
|
||||
[Static name]
|
||||
expected: FAIL
|
||||
|
||||
[Static id]
|
||||
expected: FAIL
|
||||
|
||||
[Dynamic name]
|
||||
expected: FAIL
|
||||
|
||||
[duplicate property names]
|
||||
expected: FAIL
|
||||
|
||||
[constructor]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[DOMContentLoaded-defer.html]
|
||||
[The end: DOMContentLoaded and defer scripts]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[nav2_test_redirect_chain_xserver_partial_opt_in.html]
|
||||
[Navigation Timing 2 WPT]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[nav2_test_unloadEvents_with_cross_origin_redirect_chain_partial_opt_in.html]
|
||||
[Navigation Timing 2 WPT]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[nav2_test_unloadEvents_with_cross_origin_redirect_opt_in.html]
|
||||
[Navigation Timing 2 WPT]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[TAO-crossorigin-port.sub.html]
|
||||
[Makes sure that the iframe passed the test and had an entry which passed the timing allow check]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
[resource_reuse.sub.html]
|
||||
[Testing resource entries]
|
||||
expected: FAIL
|
||||
|
||||
[Entry name should start with cross-origin domain]
|
||||
expected: FAIL
|
||||
|
||||
[Entry name should end with file name]
|
||||
expected: FAIL
|
||||
|
||||
[responseEnd should not be before startTime]
|
||||
expected: FAIL
|
||||
|
||||
[requestStart should be non-zero on the same-origin request]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
[realtimeanalyser-fft-scaling.html]
|
||||
expected: TIMEOUT
|
||||
[X 2048-point FFT peak position is not equal to 64. Got 0.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
[005.html]
|
||||
expected: ERROR
|
||||
[dedicated worker in shared worker in dedicated worker]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
[003.html]
|
||||
type: testharness
|
||||
expected: ERROR
|
||||
[shared]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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")'}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">ع‍<span>‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span>‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="color">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="color">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="fontweight">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontweight">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="fontstyle">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontstyle">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="margin">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="margin">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="padding">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="padding">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="border">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="border">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="fontsize">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontsize">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="fontsizeplus">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontsizeplus">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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.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">ع‌<span class="margin">‌ع‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="margin">‌ع‌</span>‌ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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.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">ع‌<span class="padding">‌ع‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="padding">‌ع‌</span>‌ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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 */
|
||||
.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">ع‌<span class="border">‌ع‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="border">‌ع‌</span>‌ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‌<bdi>‌ع‌</bdi>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<bdi>‌ع‌</bdi>‌ع</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>
|
||||
|
|
@ -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">ع‌<bdi>‌ع‌</bdi>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<bdi>‌ع‌</bdi>‌ع</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>
|
||||
|
|
@ -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">ع‍<span class="styled">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="styled">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="styled">‍ع‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<em>‍ع‍</em>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</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>
|
||||
|
|
@ -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">ع‍<b>‍ع‍</b>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</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>
|
||||
|
|
@ -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">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div>
|
||||
<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Sans N'Ko font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div>
|
||||
<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Sans N'Ko font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div>
|
||||
<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Sans N'Ko font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">عَع عّع</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>
|
||||
|
|
@ -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">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍َ‍</span>‍ع ع‍<span class="styled">‍ّ‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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: 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">ع‌<span class="styled">‌َ‌</span>‌ع ع‌<span class="styled">‌ّ‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="styled">‌َ‌</span>‌ع ع‌<span class="styled">‌ّ‌</span>‌ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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: 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">ع‌<span class="styled">‌َ‌</span>‌ع ع‌<span class="styled">‌ّ‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="styled">‌َ‌</span>‌ع ع‌<span class="styled">‌ّ‌</span>‌ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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: 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">ع‌<span class="styled">‌َ‌</span>‌ع ع‌<span class="styled">‌ّ‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="styled">‌َ‌</span>‌ع ع‌<span class="styled">‌ّ‌</span>‌ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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">ع‍<span>‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="color">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="fontweight">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="fontstyle">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="margin">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="padding">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="border">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">ع‍<span class="fontsize">‍ع‍</span>‍ع</div>
|
||||
<!-- Notes:
|
||||
This test uses the Noto Naskh Arabic font to control variables related to font choice.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue