Skip to content

Commit

Permalink
Merge pull request #5 from bkardell/origin/mathml-idl-1
Browse files Browse the repository at this point in the history 
run autoformat to fix lint errors, I hope
  • Loading branch information
@bkardell
bkardell authored Aug 3, 2019
2 parents 014a683 + 9df3982 commit d3a08ff
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 96 deletions.
109 changes: 67 additions & 42 deletions mathml/relations/html5-tree/clipboard-event-handlers.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,84 @@
<!DOCTYPE html>
<title>DocumentAndElementEventHandlers / clipboard events for MathML</title>
<link
rel="help"
href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"
rel="help"
href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"
/>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/webappapis.html#documentandelementeventhandlers"
rel="help"
href="https://html.spec.whatwg.org/multipage/webappapis.html#documentandelementeventhandlers"
/>
<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-copy">
<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-cut">
<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-paste">
<meta name="assert" content="MathMLElements incorporate a functional DocumentAndElementEventHandlers interface" />

<link
rel="help"
href="https://w3c.github.io/clipboard-apis/#clipboard-event-copy"
/>
<link
rel="help"
href="https://w3c.github.io/clipboard-apis/#clipboard-event-cut"
/>
<link
rel="help"
href="https://w3c.github.io/clipboard-apis/#clipboard-event-paste"
/>
<meta
name="assert"
content="MathMLElements incorporate a functional DocumentAndElementEventHandlers interface"
/>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id=log></div>
<div id="log"></div>
<math
oncopy="document.copyHappened = true"
oncut="document.cutHappened = true"
onpaste="document.pasteHappened = true">
<mi>E</mi>
</math>
oncopy="document.copyHappened = true"
oncut="document.cutHappened = true"
onpaste="document.pasteHappened = true"
>
<mi>E</mi>
</math>
<script>
const EVENTS = [ 'copy', 'cut', 'paste' ];
const el = document.querySelector('math')
const EVENTS = ["copy", "cut", "paste"];
const el = document.querySelector("math");

function addEventListenerTest(name) {
async_test(test => {
el.addEventListener(
name,
test.step_func_done(e => {
assert_true(
true,
"MathML Elements should be able to receive ${name} events"
);
})
);
const event = new ClipboardEvent(name, {
bubbles: true,
cancellable: true
});
el.dispatchEvent(event);
}, `math.addEventListener for ${name}`);
}

function addEventListenerTest(name) {
async_test((test) => {
el.addEventListener(name, test.step_func_done(e => {
assert_true(true, "MathML Elements should be able to receive ${name} events")
}));
const event = new ClipboardEvent(name, { bubbles: true, cancellable: true });
el.dispatchEvent(event);
}, `math.addEventListener for ${name}`)
}
function evaluatedHandlerTest(name) {
const handlerName = "on" + name;

function evaluatedHandlerTest(name) {
const handlerName = 'on'+name

test(() => {
const compiledHandler = el[handlerName];

assert_equals(typeof compiledHandler, "function", `The ${handlerName} property must be a function`);
compiledHandler();
assert_true(window[name + "Happened"], "Calling the handler must run the code");
},
`${handlerName}: the content attribute must be compiled into a function as the corresponding property`);
}

EVENTS.forEach((name) => {
addEventListenerTest(name);
evaluatedHandlerTest(name)
})
const compiledHandler = el[handlerName];

assert_equals(
typeof compiledHandler,
"function",
`The ${handlerName} property must be a function`
);
compiledHandler();
assert_true(
window[name + "Happened"],
"Calling the handler must run the code"
);
}, `${handlerName}: the content attribute must be compiled into a function as the corresponding property`);
}

EVENTS.forEach(name => {
addEventListenerTest(name);
evaluatedHandlerTest(name);
});
</script>
62 changes: 32 additions & 30 deletions mathml/relations/html5-tree/css-inline-style-interface.tentative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,48 +8,50 @@
href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"
/>
<style>
math * { background-color: red; }
math * {
background-color: red;
}
</style>
<meta name="assert" content="MathMLElements incorporate a functional ElementCSSInlineStyle interface" />
<meta
name="assert"
content="MathMLElements incorporate a functional ElementCSSInlineStyle interface"
/>
<script src="/mathml/support/mathml-fragments.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

</head>
<body>
<span>This tests the presence and functionality of features of the `ElementCSSInlineStyle` interface for MathMLElements</span>
<span
>This tests the presence and functionality of features of the
`ElementCSSInlineStyle` interface for MathMLElements</span
>
<math></math>
<script>
let mathEl = document.querySelector("math");


let mathEl = document.querySelector("math")

test(function() {
mathEl.style.backgroundColor = "lime"
test(function() {
mathEl.style.backgroundColor = "lime";
assert_equals(
getComputedStyle(mathEl).backgroundColor,
"rgb(0, 255, 0)",
"The applied background should be green."
);
}, `The <math> element style property should be present and be functional.`)



Object.keys(MathMLFragments).forEach((elName) => {
mathEl.innerHTML = MathMLFragments[elName]

test(function() {
let el = FragmentHelper.element(mathEl)
el.style.backgroundColor = "blue"

assert_equals(
getComputedStyle(el).backgroundColor,
"rgb(0, 0, 255)",
"The applied background should be blue."
);
}, `The ${elName}'s style property should be present and be functional.`)
})

</script>
}, `The <math> element style property should be present and be functional.`);

Object.keys(MathMLFragments).forEach(elName => {
mathEl.innerHTML = MathMLFragments[elName];

test(function() {
let el = FragmentHelper.element(mathEl);
el.style.backgroundColor = "blue";

assert_equals(
getComputedStyle(el).backgroundColor,
"rgb(0, 0, 255)",
"The applied background should be blue."
);
}, `The ${elName}'s style property should be present and be functional.`);
});
</script>
</body>
</html>
</html>
46 changes: 22 additions & 24 deletions mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,35 @@
href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"
/>
<style>
mi { background-color: red; }
:focus { background-color: rgb(0, 255, 0); }
mi {
background-color: red;
}
:focus {
background-color: rgb(0, 255, 0);
}
</style>
<meta name="assert" content="MathMLElements incorporate a functional HTMLOrForeignElement interface" />
<meta
name="assert"
content="MathMLElements incorporate a functional HTMLOrForeignElement interface"
/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

</head>
<body tabindex="-1">
<span tabindex="-1">This tests the presence and functionality of features of `HTMLOrForeignElement` (currently `HTMLOrSVGElement`)</span>
<math
tabindex="-1"
>
<span tabindex="-1"
>This tests the presence and functionality of features of
`HTMLOrForeignElement` (currently `HTMLOrSVGElement`)</span
>
<math tabindex="-1">
<mi>E</mi>
</math>
</body>
<script>

// spot check the functionality of several interfaces
let el = document.querySelector("mi");
let mathEl = document.querySelector("math");

// this really belongs in
// this really belongs in
// https://github.com/web-platform-tests/wpt/blob/master/html/dom/elements/global-attributes/dataset.html
// it is here tentatively
test(function() {
Expand Down Expand Up @@ -72,15 +78,12 @@
}, "The dataset property should be present and be functional.");

test(function() {
assert_equals(
mathEl.tabIndex,
-1
);
assert_equals(mathEl.tabIndex, -1);
}, "MathML elements should have a tabIndex property");

promise_test(function() {
function focus() {
mathEl.focus();
mathEl.focus();
return Promise.resolve();
}

Expand All @@ -89,12 +92,10 @@
getComputedStyle(mathEl).backgroundColor,
"rgb(0, 255, 0)",
"MathML elements with tabindex=-1 should be programmatically focusable and apply :focus"
)
})

);
});
}, "MathML elements should work with focus predictably");


promise_test(function() {
function blur() {
mathEl.blur();
Expand All @@ -106,11 +107,8 @@
getComputedStyle(mathEl).backgroundColor,
"rgba(0, 0, 0, 0)",
"MathML elements with tabindex=-1 be programmatically blur() able"
)
);
});
}, "MathML elements should work with blur predictably");



</script>
</html>
</html>

0 comments on commit d3a08ff

Please sign in to comment.