mirror of
https://github.com/servo/servo.git
synced 2025-07-15 11:23:39 +01:00
Update web-platform-tests to revision 7a7e16ad8d1a1b843340f47101c0a5c24c9bba57
This commit is contained in:
WPT Sync Bot
parent
155fad62b3
commit
d4dc41672a
207 changed files with 3287 additions and 1703 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -287,9 +287,6 @@
|
|||
[Matching font-weight: '500' should prefer '350 399' over '351 398']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-style: 'oblique 21deg' should prefer 'oblique 20deg' over 'oblique 10deg']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-style: 'oblique 10deg' should prefer 'oblique 5deg' over 'oblique 15deg 20deg']
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -326,3 +323,12 @@
|
|||
[Matching font-style: 'oblique -10deg' should prefer 'italic' over 'oblique 0deg 10deg']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-weight: '501' should prefer '501' over '502 510']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-style: 'oblique 20deg' should prefer 'oblique 0deg' over 'oblique -50deg -20deg']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-style: 'oblique -10deg' should prefer 'oblique -50deg -40deg' over 'italic']
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
[font-weight-matching.html]
|
||||
[Test @font-face matching for weight 470]
|
||||
expected: FAIL
|
||||
|
||||
[Test @font-face matching for weight 600]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -35,9 +32,6 @@
|
|||
[Test @font-face matching for weight 420]
|
||||
expected: FAIL
|
||||
|
||||
[Test @font-face matching for weight 500]
|
||||
expected: FAIL
|
||||
|
||||
[Test @font-face matching for weight 400]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-atomic-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-atomic-004.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-atomic-006.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-atomic-007.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-atomic-008.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-replaced-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-replaced-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-replaced-003.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-replaced-004.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-breaking-replaced-005.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[word-break-valid.html]
|
||||
[e.style['word-break'\] = "break-word" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-000.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-003.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-008.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-009.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-010.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-011.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-017.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-018.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-020.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-021.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-023.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-024.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-025.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-join-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-join-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-join-003.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-no-join-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-tatweel-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-tatweel-003.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[control-chars-00C.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_1.html]
|
||||
[Multiple history traversals from the same task]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_3.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_4.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_5.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[toggleEvent.html]
|
||||
[Calling open twice on 'details' fires only one toggle event]
|
||||
expected: FAIL
|
||||
|
||||
[Setting open=true to opened 'details' element should not fire a toggle event at the 'details' element]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[script-onerror-insertion-point-2.html]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[iframe_005.html]
|
||||
[document.write external script into iframe write back into parent]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
[processing-instruction.html]
|
||||
expected: TIMEOUT
|
||||
[Styling SVG from ProcessingInstruction stroke]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -6,7 +7,7 @@
|
|||
expected: FAIL
|
||||
|
||||
[Styling SVG from ProcessingInstruction mask-image]
|
||||
expected: FAIL
|
||||
expected: NOTRUN
|
||||
|
||||
[Styling SVG from ProcessingInstruction marker-end]
|
||||
expected: FAIL
|
||||
|
|
@ -24,5 +25,5 @@
|
|||
expected: FAIL
|
||||
|
||||
[Styling SVG from ProcessingInstruction mask]
|
||||
expected: FAIL
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[adding-events.html]
|
||||
expected: ERROR
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#iframe_box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div id='iframe_box'></div>
|
||||
|
|
@ -59,6 +59,36 @@ function CreateKeyframeEffect(element) {
|
|||
assert_equals(workletAnimation.playState, 'idle');
|
||||
}, 'WorkletAnimation creation with timeline should work');
|
||||
|
||||
promise_test(async t => {
|
||||
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
|
||||
let iframe = document.createElement('iframe');
|
||||
iframe.src = 'resources/iframe.html';
|
||||
document.body.appendChild(iframe);
|
||||
|
||||
await waitForAnimationFrameWithCondition(_ => {
|
||||
return iframe.contentDocument.getElementById('iframe_box') != null;
|
||||
});
|
||||
let iframe_document = iframe.contentDocument;
|
||||
let effect = CreateKeyframeEffect(iframe_document.getElementById('iframe_box'));
|
||||
|
||||
let animation_with_main_frame_timeline =
|
||||
new WorkletAnimation('test-animator', effect, document.timeline);
|
||||
assert_equals(animation_with_main_frame_timeline.timeline, document.timeline);
|
||||
|
||||
let animation_with_iframe_timeline =
|
||||
new WorkletAnimation('test-animator', effect, iframe_document.timeline);
|
||||
assert_equals(animation_with_iframe_timeline.timeline, iframe_document.timeline);
|
||||
|
||||
let animation_with_default_timeline = new WorkletAnimation('test-animator', effect);
|
||||
// The spec says that the default timeline is taken from 'the Document that is
|
||||
// associated with the window that is the current global object'. In this case
|
||||
// that is the main document's timeline, not the iframe (despite the target
|
||||
// being in the iframe).
|
||||
assert_equals(animation_with_default_timeline.timeline, document.timeline);
|
||||
|
||||
iframe.remove();
|
||||
}, 'WorkletAnimation creation should choose the correct timeline based on the current global object');
|
||||
|
||||
promise_test(async t => {
|
||||
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
|
||||
let effect = CreateKeyframeEffect(document.querySelector('#element'));
|
||||
|
|
@ -95,10 +125,10 @@ function CreateKeyframeEffect(element) {
|
|||
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');
|
||||
let workletAnimation = new WorkletAnimation(
|
||||
'test-animator', [ effect, otherEffect ]);
|
||||
assert_equals(workletAnimation.playState, 'idle');
|
||||
}, 'Creating animation with effects from different documents is allowed');
|
||||
|
||||
promise_test(async t => {
|
||||
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Worklet animation can animate effects from different frames</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="common.js"></script>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
<script id="simple_animate" type="text/worklet">
|
||||
registerAnimator("test_animator", class {
|
||||
animate(currentTime, effect) {
|
||||
let effects = effect.getChildren();
|
||||
effects[0].localTime = 500;
|
||||
effects[1].localTime = 750;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
|
||||
const effect = new KeyframeEffect(box, [{ opacity: 0 }], { duration: 1000 });
|
||||
|
||||
let iframe = document.createElement('iframe');
|
||||
iframe.src = 'resources/iframe.html';
|
||||
document.body.appendChild(iframe);
|
||||
|
||||
await waitForAnimationFrameWithCondition(_ => {
|
||||
return iframe.contentDocument.getElementById('iframe_box') != null;
|
||||
});
|
||||
let iframe_box = iframe.contentDocument.getElementById('iframe_box');
|
||||
let iframe_effect = new KeyframeEffect(
|
||||
iframe_box, [{ opacity: 0 }], { duration: 1000 }
|
||||
);
|
||||
|
||||
const animation = new WorkletAnimation('test_animator', [effect, iframe_effect]);
|
||||
animation.play();
|
||||
|
||||
await waitForNotNullLocalTime(animation);
|
||||
assert_equals(getComputedStyle(box).opacity, '0.5');
|
||||
assert_equals(getComputedStyle(iframe_box).opacity, '0.25');
|
||||
|
||||
iframe.remove();
|
||||
animation.cancel();
|
||||
}, "Effects from different documents can be animated within one worklet animation");
|
||||
</script>
|
||||
|
|
@ -20,10 +20,6 @@
|
|||
|
||||
// Set the global cookie name.
|
||||
window.HTTP_COOKIE = "cookie_via_http";
|
||||
|
||||
// If we're not on |HOST|, move ourselves there:
|
||||
if (window.location.hostname != HOST)
|
||||
window.location.hostname = HOST;
|
||||
})();
|
||||
|
||||
// A tiny helper which returns the result of fetching |url| with credentials.
|
||||
|
|
@ -120,27 +116,44 @@ window.SameSiteStatus = {
|
|||
STRICT: "strict"
|
||||
};
|
||||
|
||||
const wait_for_message = (type, origin) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
window.addEventListener('message', e => {
|
||||
if (e.origin != origin) {
|
||||
reject("Message from unexpected origin in wait_for_message:" + e.origin);
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.data.type && e.data.type === type)
|
||||
resolve(e);
|
||||
}, { once: true });
|
||||
});
|
||||
};
|
||||
|
||||
// Reset SameSite test cookies on |origin|. If |origin| matches `self.origin`, assert
|
||||
// (via `document.cookie`) that they were properly removed and reset.
|
||||
function resetSameSiteCookies(origin, value) {
|
||||
return credFetch(origin + "/cookies/resources/dropSameSite.py")
|
||||
.then(_ => {
|
||||
async function resetSameSiteCookies(origin, value) {
|
||||
let w = window.open(origin + "/cookies/samesite/resources/puppet.html");
|
||||
try {
|
||||
await wait_for_message("READY", origin);
|
||||
w.postMessage({type: "drop", useOwnOrigin: true}, "*");
|
||||
await wait_for_message("drop-complete", origin);
|
||||
if (origin == self.origin) {
|
||||
assert_dom_cookie("samesite_strict", value, false);
|
||||
assert_dom_cookie("samesite_lax", value, false);
|
||||
assert_dom_cookie("samesite_none", value, false);
|
||||
}
|
||||
})
|
||||
.then(_ => {
|
||||
return credFetch(origin + "/cookies/resources/setSameSite.py?" + value)
|
||||
.then(_ => {
|
||||
|
||||
w.postMessage({type: "set", value: value, useOwnOrigin: true}, "*");
|
||||
await wait_for_message("set-complete", origin);
|
||||
if (origin == self.origin) {
|
||||
assert_dom_cookie("samesite_strict", value, true);
|
||||
assert_dom_cookie("samesite_lax", value, true);
|
||||
assert_dom_cookie("samesite_none", value, true);
|
||||
}
|
||||
})
|
||||
})
|
||||
} finally {
|
||||
w.close();
|
||||
}
|
||||
}
|
||||
|
||||
// Given an |expectedStatus| and |expectedValue|, assert the |cookies| contains the
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
<script>
|
||||
// Helper to either set or clear some cookies on its own origin, or
|
||||
// (potentially) cross-site on ORIGIN.
|
||||
window.onmessage = e => {
|
||||
var originToUse = ORIGIN;
|
||||
if (e.data.useOwnOrigin)
|
||||
originToUse = self.origin;
|
||||
|
||||
if (e.data.type === "set") {
|
||||
credFetch(originToUse + "/cookies/resources/setSameSite.py?" + e.data.value)
|
||||
.then(_ => {
|
||||
e.source.postMessage({
|
||||
type: "set-complete",
|
||||
value: e.data.value
|
||||
}, "*");
|
||||
});
|
||||
}
|
||||
|
||||
if (e.data.type === "drop") {
|
||||
credFetch(originToUse + "/cookies/resources/dropSameSite.py")
|
||||
.then(_ => {
|
||||
e.source.postMessage({type: "drop-complete"}, "*");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.opener.postMessage({
|
||||
type: "READY"
|
||||
}, "*");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
<script>
|
||||
promise_test(async function(t) {
|
||||
let w = window.open(ORIGIN + "/cookies/samesite/resources/puppet.html");
|
||||
await wait_for_message("READY", ORIGIN);
|
||||
let random = "" + Math.random();
|
||||
w.postMessage({type: "set", value: random}, "*");
|
||||
let e = await wait_for_message("set-complete", ORIGIN)
|
||||
assert_dom_cookie("samesite_strict", e.data.value, true);
|
||||
assert_dom_cookie("samesite_lax", e.data.value, true);
|
||||
assert_dom_cookie("samesite_none", e.data.value, true);
|
||||
w.close();
|
||||
}, "Same-site window should be able to set `SameSite=Lax` or `SameSite=Strict` cookies.");
|
||||
|
||||
promise_test(async function(t) {
|
||||
let w = window.open(CROSS_SITE_ORIGIN + "/cookies/samesite/resources/puppet.html");
|
||||
await wait_for_message("READY", CROSS_SITE_ORIGIN);
|
||||
let random = "" + Math.random();
|
||||
w.postMessage({type: "set", value: random}, "*");
|
||||
let e = await wait_for_message("set-complete", CROSS_SITE_ORIGIN);
|
||||
assert_dom_cookie("samesite_strict", e.data.value, false);
|
||||
assert_dom_cookie("samesite_lax", e.data.value, false);
|
||||
assert_dom_cookie("samesite_none", e.data.value, true);
|
||||
w.close();
|
||||
}, "Cross-site window shouldn't be able to set `SameSite=Lax` or `SameSite=Strict` cookies.");
|
||||
</script>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if the black box below is the same width, or shorter, than the blue box.</p>
|
||||
<div id="div1">XX	 </div>
|
||||
<div id="div1">XX
 </div>
|
||||
<div id="div2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
.content {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
Below should be a light blue square in uniform color.
|
||||
<div style="opacity: 0.5; will-change: opacity">
|
||||
<div class="content" style="left: 0"></div>
|
||||
<div class="content" style="left: 50px"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-color/#transparency">
|
||||
<link rel="match" href="composited-filters-under-opacity-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
will-change: opacity;
|
||||
}
|
||||
.content {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
background: yellow;
|
||||
filter: invert(100%);
|
||||
}
|
||||
</style>
|
||||
Below should be a light blue square in uniform color.
|
||||
<div style="opacity: 0.5">
|
||||
<div class="content" style="left: 0"></div>
|
||||
<div class="content" style="left: 50px"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — NBSP before atomic inline</title>
|
||||
<meta name=assert content="There's a soft wrap opportunity between an atomic inline and a preceeding NBSP">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=match href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
|
||||
<div>AB <span>CD</span></div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — NBSP after atomic inline</title>
|
||||
<meta name=assert content="There's a soft wrap opportunity between an atomic inline and a following NBSP">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=match href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
.red {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.test {
|
||||
font: 50px/1 Ahem;
|
||||
color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-left: -50px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
|
||||
<div class=red></div>
|
||||
<div class=test><span> AB</span> CD</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — NARROW NO-BREAK SPACE after atomic inline</title>
|
||||
<meta name=assert content="There is **not** a soft wrap opportunity between an atomic inline and a following NARROW NO-BREAK SPACE">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=match href="reference/line-breaking-atomic-003-ref.html">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
width: 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical squares below.
|
||||
|
||||
<div><span>AB</span> CD</div>
|
||||
<div>AB CD</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — NARROW NO-BREAK SPACE before atomic inline</title>
|
||||
<meta name=assert content="There is **not** a soft wrap opportunity between an atomic inline and a preceeding NARROW NO-BREAK SPACE">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=match href="reference/line-breaking-atomic-003-ref.html">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
width: 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical squares below.
|
||||
|
||||
<div>AB <span>CD</span></div>
|
||||
<div>AB CD</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — WORD JOINER after atomic inline</title>
|
||||
<meta name=assert content="There is **not** a soft wrap opportunity between an atomic inline and a following WORD JOINER">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=match href="reference/line-breaking-atomic-005-ref.html">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
width: 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a black square below.
|
||||
|
||||
<div><span>A</span>⁠B</div>
|
||||
<div>A⁠B</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — WORD JOINER before atomic inline</title>
|
||||
<meta name=assert content="There is **not** a soft wrap opportunity between an atomic inline and a preceeding WORD JOINER">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=match href="reference/line-breaking-atomic-005-ref.html">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
width: 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a black square below.
|
||||
|
||||
<div>A⁠<span>B</span></div>
|
||||
<div>A⁠B</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — atomic inline line breaks like ideographic character</title>
|
||||
<meta name=assert content="There's a soft wrap opportunity before and after an atomic inline">
|
||||
<link rel=match href="reference/line-breaking-atomic-007-ref.html">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
width: 40px;
|
||||
height: 140px;
|
||||
background: red;
|
||||
color: green;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle and <strong>no red</strong>.
|
||||
|
||||
<div>A<span>B</span>C</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — atomic inline line breaks like ideographic character, keep-all</title>
|
||||
<meta name=assert content="There isn't a soft wrap opportunity before and after an atomic inline when word-break is keep-all">
|
||||
<link rel=match href="reference/line-breaking-atomic-008-ref.html"
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
color: red;
|
||||
}
|
||||
.test {
|
||||
width: 0;
|
||||
color: green;
|
||||
word-break: keep-all;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle and <strong>no red</strong>.
|
||||
|
||||
<div class=red>ABC</div>
|
||||
<div class=test>A<span>B</span>C</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — NBSP and replaced element</title>
|
||||
<meta name=assert content="There's a soft wrap opportunity between replaced elements and adjacent NBSP.">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=match href="reference/line-breaking-replaced-001-ref.html">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
.red {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div class=red><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50><br> <br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50></div>
|
||||
|
||||
<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — NARROW NO-BREAK SPACE and replaced element</title>
|
||||
<meta name=assert content="There is **not** a soft wrap opportunity between replaced elements and adjacent NARROW NO-BREAK SPACE">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=match href="reference/line-breaking-replaced-002-ref.html">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
.red {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div class=red><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50></div>
|
||||
|
||||
<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — WORD JOINER and replaced element</title>
|
||||
<meta name=assert content="There is **not** a soft wrap opportunity between replaced elements and adjacent WORD JOINER">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=match href="reference/line-breaking-replaced-003-ref.html">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
.red {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div class=red><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50>⁠<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50></div>
|
||||
|
||||
<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50>⁠<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — replaced elements line break like ideographic characters</title>
|
||||
<meta name=assert content="There's a soft wrap opportunity before and after a replaced element">
|
||||
<link rel=match href="reference/line-breaking-replaced-004-ref.html">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if “B” is below “A”.
|
||||
|
||||
<div>A<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">B</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text — replaced elements line break like ideographic characters, keep-all</title>
|
||||
<meta name=assert content="There isn't a soft wrap opportunity before and after a replaced element with word-break: keep-all">
|
||||
<link rel=match href="reference/line-breaking-replaced-005-ref.html">
|
||||
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
width: 0;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if “A” and “B” are on the same line.
|
||||
|
||||
<div>A<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">B</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical squares below.
|
||||
|
||||
<div>AB CD</div>
|
||||
<div>AB CD</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a black square below.
|
||||
|
||||
<div>A⁠B</div>
|
||||
<div>A⁠B</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle and <strong>no red</strong>.
|
||||
|
||||
<div>A<br>B<br>C</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle and <strong>no red</strong>.
|
||||
|
||||
<div>ABC</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50><br> <br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50>⁠<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>Test passes if “B” is below “A”.
|
||||
|
||||
<div>A<br><br>B</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>Test passes if “A” and “B” are on the same line.
|
||||
|
||||
<div>A<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">B</div>
|
||||
|
|
@ -3,15 +3,16 @@
|
|||
<title>CSS Text Test: overflow-wrap: break-word</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: break-spaces' property, that must prevent the word to be broken.">
|
||||
<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
font-family: Ahem;
|
||||
line-height: 1em;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
|
|
@ -24,7 +25,6 @@ div {
|
|||
}
|
||||
.test {
|
||||
color: green;
|
||||
line-height: 1em;
|
||||
width: 5ch;
|
||||
|
||||
white-space: pre-wrap;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Text Module Test: parsing word-break with invalid values</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-break">
|
||||
<meta name="assert" content="word-break supports only the grammar 'normal | keep-all | break-all'.">
|
||||
<meta name="assert" content="word-break supports only the grammar 'normal | keep-all | break-all | break-word'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
|
|
@ -14,6 +14,11 @@
|
|||
test_invalid_value("word-break", "auto");
|
||||
test_invalid_value("word-break", "normal keep-all");
|
||||
test_invalid_value("word-break", "break-all break-all");
|
||||
test_invalid_value("word-break", "normal break-word");
|
||||
test_invalid_value("word-break", "break-word normal");
|
||||
test_invalid_value("word-break", "keep-all break-word");
|
||||
test_invalid_value("word-break", "break-all break-word");
|
||||
test_invalid_value("word-break", "word-break");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Text Module Test: parsing word-break with valid values</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-break">
|
||||
<meta name="assert" content="word-break supports the full grammar 'normal | keep-all | break-all'.">
|
||||
<meta name="assert" content="word-break supports the full grammar 'normal | keep-all | break-all | break-word'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
test_valid_value("word-break", "normal");
|
||||
test_valid_value("word-break", "keep-all");
|
||||
test_valid_value("word-break", "break-all");
|
||||
test_valid_value("word-break", "break-word");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,24 +2,20 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: span</title>
|
||||
<title>reference</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>
|
||||
<link rel=mismatch href="shaping-000-sanity-ref.html">
|
||||
</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.
|
||||
-->
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
|
||||
<div class="ref" lang="ar" dir="rtl">ععع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ععع</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>reference</title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
.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 in each box join, making the two boxes identical.</p>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌ع‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌ع‌ع</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,27 +2,22 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: colour</title>
|
||||
<title>reference</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"; }
|
||||
.text, .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>
|
||||
<link rel=mismatch href="shaping-001-sanity-ref.html">
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
|
||||
|
||||
<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,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>reference</title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
.text, .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 in each box join, making the two boxes identical.</p>
|
||||
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="color">‌ع‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="color">‌ع‌</span>‌ع</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,27 +2,22 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: font-weight</title>
|
||||
<title>reference</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>
|
||||
<link rel=mismatch href="shaping-002-sanity-ref.html">
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
|
||||
|
||||
<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,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>reference</title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
.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 in each box join, making the two boxes identical.</p>
|
||||
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontweight">‌ع‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontweight">‌ع‌</span>‌ع</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,27 +2,22 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: font-style</title>
|
||||
<title>reference</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>
|
||||
<link rel=mismatch href="shaping-003-sanity-ref.html">
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
|
||||
|
||||
<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,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>reference</title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
.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 in each box join, making the two boxes identical.</p>
|
||||
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontstyle">‌ع‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontstyle">‌ع‌</span>‌ع</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -2,27 +2,22 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: font size 120%</title>
|
||||
<title>reference</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>
|
||||
<link rel=mismatch href="shaping-008-sanity-ref.html">
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
|
||||
|
||||
<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>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>marked up diacritic: span</title>
|
||||
<title>reference</title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
|
|
@ -12,14 +12,13 @@
|
|||
}
|
||||
.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 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.
|
||||
-->
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
|
||||
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontsizeplus">‌ع‌</span>‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontsizeplus">‌ع‌</span>‌ع</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,26 +2,22 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: margin > 0</title>
|
||||
<title>reference</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>
|
||||
<link rel=mismatch href="shaping-009-sanity-ref.html">
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
|
||||
|
||||
<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>
|
||||
|
|
@ -2,27 +2,21 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: margin 0</title>
|
||||
<title>reference</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; }
|
||||
.margin { margin: 0.5em; }
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
|
||||
|
||||
<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>
|
||||
|
|
@ -2,26 +2,22 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: padding > 0</title>
|
||||
<title>reference</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>
|
||||
<link rel=mismatch href="shaping-010-sanity-ref.html">
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
|
||||
|
||||
<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>
|
||||
|
|
@ -2,27 +2,21 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: padding 0</title>
|
||||
<title>reference</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; }
|
||||
.padding { padding: 0.5em; }
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
|
||||
|
||||
<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>
|
||||
|
|
@ -2,26 +2,22 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: border > 0</title>
|
||||
<title>reference</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>
|
||||
<link rel=mismatch href="shaping-011-sanity-ref.html">
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
|
||||
|
||||
<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>
|
||||
|
|
@ -2,29 +2,21 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: border 0</title>
|
||||
<title>reference</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; }
|
||||
.border { border: 1px solid #ccc; }
|
||||
</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>
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
|
||||
|
||||
<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>
|
||||
|
|
@ -2,27 +2,21 @@
|
|||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>shaping: isolation, bdi</title>
|
||||
<title>reference</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>
|
||||
<link rel=mismatch href="shaping-012-sanity-ref.html">
|
||||
</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.
|
||||
-->
|
||||
<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
|
||||
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌ع‌ع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ع‌ع‌ع</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>reference</title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
.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 in each box DON'T join, making the two boxes identical.</p>
|
||||
|
||||
<div class="ref" lang="ar" dir="rtl">ععع</div>
|
||||
<div class="ref" lang="ar" dir="rtl">ععع</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!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>
|
||||
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